conceptual inertia

I was working on a project a while back that required a fairly rich UI. I was brought a ”sketch” of the UI in Flash. Without even thinking, I started up Visual Studio and began laying out a few controls to port the sketch. Hmm…should I skin the controls or derive new ones? Should I draw everything manually with the Graphics object? Should I load some vector art from a metafile? How was I going to perform those animations and transitions? Ugh…it was going to take a long time to implement the UI before I could even get around to real processing functionality. Then it hit me, why not use Flash for the UI? The client had most of the work already done, he simply needed a Windows application to do some behind the scenes processing that would be hard given the constraints of Flash sandboxing.

Today’s post covers how to host Flash in a C# application with two-way communcation between environments. Here’s a screenshot of the demo:

Clicking the green button in Flash pops up a message box in C#. Entering text in C# and clicking the Send button echos it in Flash.
The first step is to add the Shockwave Flash ActiveX control to the Toolbox (it doesn’t matter which group you add the control to):

After selecting the component from the COM tab, you should see a new icon in your Toolbox:

Now, drag ‘n drop this control onto Form1 and you should get the following:

Something broke with the release of VS2005. You should have no problem doing the above in VS2003. However, I don’t have VS2003 so what’s the solution? As it turns out, the answer is in the warning messages. There was a failure to create a wrapper assembly due to a COM exception. Well, I know of another .NET language that should have no problem interacting with COM…

Now create a new FlashPanel user control:

The FlashPanel is a derivative of UserControl. In the designer, repeat the above steps – drag ‘n drop the Flash object onto the panel and set its Dock property to ”Fill”. The C++/CLI control library will successfully create a wrapper assembly for the ActiveX control. Add the following property so C# can access the Flash object:

public: property AxShockwaveFlashObjects::AxShockwaveFlash^ Flash
{
    AxShockwaveFlashObjects::AxShockwaveFlash^ get()
    {
        return this->axShockwaveFlash1;
    }
}
 

Once you build the control library, you should see your new UserControl in the Toolbox:

Now create a C# Windows application. Under the References folder, add the following:

Next, we begin using our FlashPanel. The ActiveX Flash control has a LoadMovie function which takes an absolute directory path to the .swf file. It also has an FsCommand delegate:

public Form1()
{
    InitializeComponent();
    string moviePath = Application.StartupPath + "test.swf";
    this.flashPanel1.Flash.LoadMovie(0, moviePath);
    this.flashPanel1.Flash.FSCommand += new
        AxShockwaveFlashObjects._IShockwaveFlashEvents_FSCommandEventHandler(
                                                            OnFsCommand);
}
 

FsCommand is used by Flash to communicate with the host environment. In the test.swf file, the green arrow button has the following ActionScript attached to it:

on(release)
{
    fscommand("ButtonClick", "You clicked a button in Flash");
}
 

OnFsCommand will respond to messages from Flash. In this example, it only checks for the “ButtonClick” message:

void OnFsCommand(object sender,
                 AxShockwaveFlashObjects._IShockwaveFlashEvents_FSCommandEvent e)
{
    if( e.command == "ButtonClick")
        MessageBox.Show(e.args);
}
 

When sending a message to Flash, we use SetVariable passing both the message name and value:

private void OnSendButtonClick(object sender, EventArgs e)
{
    this.flashPanel1.Flash.SetVariable("DotNetMessage", this.textBox1.Text);
}
 

If you wanted to send more information in the value param you could use a delimiter. For example, “foo?bar” would need to be parsed and split based on ”?” characters to extract multiple values.
The last bit of ActionScript code is used to setup event listening. The root watches for a “DotNetMessage” and then passes it along to the listener object. The code in this example, simple echos any value to the textbox control inside Flash.

var listenerObj:Object = new Object();
listenerObj.onMessage = function (prop, oldVal, newVal)
{
    _root.textBox = newVal;
}
_root.watch("DotNetMessage", listenerObj.onMessage);
 

The .fla file is available in the Debug directory. You can download the source code here.