Add Flash to Your .NET WinForms to Create Skinable UIs

ithin the last few years, Macromedia’s Flash has become a leading development environment for online vector animation, Web site production, and rich Internet applications?as well as for offline presentations, small games, and more. Flash MX 2004 focuses more on user interface development than any of its earlier versions.

Perhaps the most unexpected?and potentially most important?use of Flash is in designing more powerful user interfaces for conventional software. In this article, we’ll teach you to do exactly that: use Flash to create a highly graphical user interface for a traditional Windows Form application. While previous experience with Flash is helpful, it is not required, as we’ll begin with the basics of creating a Flash movie. (To download or purchase Flash MX 2004, follow the links in the left column.)

Flash uses an ECMA-compatible scripting language called ActionScript, which is very similar to JavaScript, making it easy to learn. Scripting? Isn’t that exposing my source code? Well, yes and no. When creating and working with Flash movies, you are always working with *.fla files. For deploying your movie or application, you export everything to *.swf, which cannot be edited. While there are various disassembly and reverse-engineering tools available for inspecting SWF files, you needn’t worry, as the SWF will only contain code specific to the user interface.

What You Need
You should have a basic understanding of ActiveX controls, Windows Forms, scripting, and .NET programming in general. Some basic knowledge of Macromedia Flash, including ActionScript, would be very helpful too.

Creating a Basic Flash Movie

Figure 1. The Document Properties Dialog: This dialog shows the values entered for the sample application.

Before you design and program your user interface, you have to select basic properties for your movie. These include varying widths, heights, background colors, frame progression rate, etc. We’ll now step through these basic selections and get started with my first UI object.

Create a new document by going to File ?> New. Adjust the main settings by using Modify ?> Document. For the sample application in this article, set the size of the movie to 550 pixels wide by 200 pixels high. Set the frame rate to 12 frames per second (see Figure 1). Press OK and your changes will be applied immediately.

Figure 2. Setting Up Properties: Fill out the textfield property pane with the values shown to create the sample app.

An object in Flash can be anything ranging from a dot to a line to a textbox, etc. You can convert objects into buttons, graphics, and movie clips. The first object in the sample application is a textedit box. You’ll first create and modify a textedit box and then add some control buttons.

Figure 3. Button Action: Once you’ve dragged a button to the stage from the component menu, you can create a label and write the click event code in the Properties and Action panels.

Press the Text Tool icon in the Tools panel (on the left side of the IDE) and draw a textbox within the work area. Now you’ll need to modify the properties of this text box. To do that, make sure it is selected; you’ll find its property settings in a horizontal box immediately below the stage. Change the properties of the textbox according to these settings (see Figure 2):

  • To ensure that users can type into this textbox, change its type to “Input Text.”
  • In the second box, give the textbox an instance name of mc_mytext. This will allow you to access the textfield and its properties from your script code later.
  • In the bottom right, give the textbox a variable name of mytext. This step is optional as it is just another way to call the content of our textfield via script.

Create a button by clicking and dragging the “Button” from the component panel on the right side of the work area. Afterward, go again to the Properties area and set the label for the button to “send data to host.”

Then go to the Action window, between the stage and the Properties box. Add the following click handler code to the button (see Figure 3):

on(click){     _root.onsend();}

Now add two additional buttons, with the following parameters:

Button1
Label: “retrieve data from host”
Code:

     on(click){     _root.onretrieve();}

Button2
Label: “clear”
Code:

     on(click){     _root.onclear();}

The last step is to create three event handlers that will be responsible for the communication between Flash and the C# host. This script for the event handlers will be a “frame-script,” meaning it will be located on the first frame of the Flash movie, just as the textfield. For better structure, please first add an additional layer on the main timeline using the Add Layer icon in the Timeline box or by selecting the Insert ?> Timeline ?> Layer Menuitem.

In the Timeline, select the first frame (it should be empty) for the new layer. Then enter the following code in the Actions frame:

function onsend(){     fscommand("mysend", mc_mytext.text);}function onretrieve(){     fscommand("myretrieve","");}function onclear(){     mc_mytext.text="";}

While onclear only resets the textfield within Flash, the other two handlers are performing a call to fscommand. FSCommand then triggers an event that our C# host will follow. In the case of onsend, it is also passing the contents from the textfield.

Previewing your Movie
Flash lets you test your movie inside of the IDE by pressing CTRL+ENTER or using the menu Control ?> Test Movie. All of the fscommand calls will be ignored in the preview until the movie is hosted by your .NET application. So for us this feature will mainly be used for preview and visual checks, the overall functionality has to be tested together with our ActiveX host.

Saving and Deploying to SWF
Save your movie and give it a file name, for example, simple.fla. You’ll also need the SWF file for deploying your movieclip. Exporting to SWF is a simple matter of pressing SHIFT+F12 or selecting the menu File ?> publish. By default, your SWF file will take the same name as the .fla file, simple.swf in our case, but you may choose whatever you like. You can also optimize your movie for a certain version of the Flash Player by going to File ?> Publish Settings.

Figure 4. Visual Studio Solution Explorer: This screenshot shows the references that have been added by the Customize Toolbox dialog.

Flash Meets WinForm
Now that you have your Flash movie working we’ll move on to the part where we create a new .NET Windows application. We’ll be using C# for our sample application, but you can use any .NET language you like.

In Visual Studio, create a new Windows Application and go to the Form Editor. You need to add the Shockwave ActiveX control that will host your Flash movie to the Visual Studio toolbox. Right click the toolbox, and select Add Tab to add a new toolbox tab. Next you should rename it to something meaningful. You need to generate an InterOp Assembly to be able to use the ActiveX control on a WinForm. This is done by right clicking on the toolbox tab and selecting the Add/Remove Items menuitem from the context menu. This will pop up the Customize Toolbox Dialog. Go to the COM Components tab and search for Shockwave Flash Object and click the OK Button.

Figure 5. Picture This: Check out the sample?your first Flash/WinForm application?in action.

This will add a new Item to the toolbox. Drag this new item from the toolbox onto your form and adjust docking to “Fill.” You should also adjust the size of the client area of your window to the size of your Flash movie (550 x 200 pixels). When adding the Shockwave Flash Object, Visual Studio will add some new references to your project. These are the InterOp Assemblies for the Shockwave Flash Object Player ActiveX control (see Figure 4).

You still haven’t written the code to handle the FSCommand event, but before you do that you should add the code to load your Flash movie. This is done in the constructor of your form. Simply add the following few lines after the call to InitializeComponent().

string path = System.Environment.CurrentDirectory;path += @"first.swf";axShockwaveFlash1.LoadMovie(0,path);axShockwaveFlash1.Play();

The path to your Flash movie has to be a fully qualified absolute path (e.g. c:myprogflashmymovie.swf). The first line of your code defines the path of the Flash movie; in this case the movie resides in the same directory as your executable. Remember to copy your .swf file to your Debug directory for testing!

Figure 6. FSCommand: This screenshot shows the property pane after selecting the ActiveX Control. The event that needs to be added is highlighted.

The next line loads the movie as the first layer in the Player, and then the movie is started by calling the Play() method. You can already test your application. It should look similar to Figure 5.

When playing around with your application at this stage you should notice how the controls nicely scale when you change the size of your window.

Next you need to add the event handler for the fscommand event sent by the Flash movie. When you receive this event from Flash you basically get two strings: The command string (e.g. mysend) and the argument (e.g. text from the textcontrol).

Go to the Form editor, click on the Flash control, then go to the Properties window and select the events icon. When the events show up, double-click on the FSCommand event (see Figure 6).

To handle this event simply add the following code to the body of the generated event handler:

private void axShockwaveFlash1_FSCommand(object sender,
AxShockwaveFlashObjects._IShockwaveFlashEvents_FSCommandEvent e){ switch(e.command) { case "mysend": MessageBox.Show(e.args); break; case "myretrieve": axShockwaveFlash1.SetVariable("mc_mytext.text", "Hello Flash, greetings from .NET"); break; }}

The value for the command is exactly the value you specified in your ActionScript code. To send data back to the Flash movie you just need to call the SetVariable() method on the Shockwave Flash Object and specify the name of an ActionScript variable or, as in this case, the property of a Flash object.

That’s it! You’ve successfully created your first skinable, rich graphics Windows application. If you want to change the Flash movie for another one, you simply need to replace the .swf file. There’s no need to recompile the .NET application.

Creating a More Complex UI

Figure 7. Fancy UI: This screenshots shows the bonus sample, which implements a very complex user interface.

Download the accompanying zip file for this article and unpack the contents. You’ll find two sample projects: “FirstFlashUI” is the project that you’ll end up with if you follow the steps in this article. “MoreComplexUI” is, obviously, a more complex sample application showing the power of Flash and .NET combined. Stepping through this application is beyond the scope of this article, as it requires a great deal more explanation to walk through the coding of its fancier UI and buttons (see Figure 7). This sample app also handles things like closing and dragging the Flash movie window without a Windows title bar. It will be useful to more experienced Flash users who just want to see what can be done and who need some ideas for more advanced Win32 concepts.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

Recent Articles: