RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Add Flash to Your .NET WinForms to Create Skinable UIs : Page 3

One of the most powerful uses of Flash today is to create more power user interfaces for conventional software, such as client-server applications. This article is a great introduction to Flash for .NET developers who want to take their WinForm designs to the next level.

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";

The path to your Flash movie has to be a fully qualified absolute path (e.g. c:\myprog\flash\mymovie.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.

Peter Koen, a Microsoft MVP, is an independent consultant, author, and programmer. He also gives lectures at a private university in Austria on Knowledge Management. He is a certified MCP, MCAD, MCSD.NET, MCDBA, and MCT, as well as the Allied Telesyn Certifications for CAI, CASE, and IAT. Peter is the founder of the the SQL Server User group in Austria.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date