Flex & Flash: The Best of Both

The Flash IDE (aka Flash CS3/CS4) was designed to be a powerful animation tool.  Over time, Actionscript was introduced and you could add code using it. The problem: The Flash IDE has never been good for programming.  Using The Flash IDE to make swf files drives programmers up the wall because there is little separation between the art and code.  As a Flash game programmer, I found that using Flex alongside the Flash IDE gives you the best of both: Choosing your own environment to build SWF files while still giving you the animation power of the flash IDE.

Setup

For the this article, I’ll be using Flash Develop 3.0.2 (Instructions on installing it) and Flash CS3.

Flex

Flex is best described as the programmer version of Flash.  It allows you to create SWF files using the flex compiler.  This means that you can create working SWF files without using the Flash IDE.  We’ll be using FlashDevelop to create our code and compile our projects.  Open up FlashDevelop and choose Project-> New Project. On the popup, select “AS3 Project” and set the name to “FlexProject”.

Now choose  Flash Project->Test Movie.  Once it has finished compiling, you will get a swf file that displays a blank white screen.  Not very interesting, but you’ve created a swf without the Flash IDE.

Flash CS3 and SWC importation

Now that we are not relying on the Flash IDE, how do we get animation and graphics made in it into our code?  This is where SWC Importation comes in. SWCs are like libraries that can be included into a project – They can contain animation, graphics, etc.

Download FlexProject.fla, put it into your project directory and then open it with the Flash IDE.  This fla file contains just one movieclip called “swcSquare” which is a square that changes color over 5 frames.

Before we create the swc, we need to set some values so that swcSquare can be seen and imported into the code.  Go to the library, right click the entry for swcSquare and chose “linkage”.  Check the box that says “Export for Actionscript” and make sure the class text box says “swcSquare”.  We are telling the IDE that we want this movieclip to be accessible from our actionscript and that we can reference it by the name swcSquare.

Now we need to change the project settings so that we get a SWC file instead of a swf. Choose File->Publish Settings and then Click on the Flash Tab. Click the box marked “Export SWC”

Now go to File->Publish.  If you look at your project directory, there should be a FlexProject.swc file when the program is done.

Getting the SWC in your code

Now need to tell our project to include the FlexProject.swc file that was just created. Flip back to FlashDevelop, choose Project -> Properties. Click on the Compiler Options tab.  In the list that appear, click on the one labeled “SWC Include Libraries”. A button with ellipses will appear.  Click that and in the resulting popup, put “FlexProject.swc”. Hit ok. Note that FlashDevelop will not give you an error if it cannot find the file that you typed in!

If FlashDevelop has found the swc file, then it’s contents will now start to appear in your code completion.  Now let’s display swcSquare.  To do that, add “stage.addChild(new swcSquare());” to the init function in your main.as file.  After building, a square that changes color should appear in the top left.

Conclusion

This was a simple example where you learned how separate your code from the Flash IDE using Flex.  This will help keep programmers sane and make you less reliant on the Flash IDE.  I’ve used this approach on two games already and I would never  go back to the old way of doing things.

In a future article, I’ll look at how you can use SWC Importing to create the User Interface for your game and how to wire it up.

Final Project

Edit: As a quick addition, this approach also leaves you less dependent on FLA files.  There are big issues with them, the least of which is that they are not  mergable – You need to be careful if you are using source control because only one person can edit it at a time.  using flex, you can break up your graphics into as many FLA files as you want.   It should also help out with your compile time.