Ever since i’ve started with Flex, I found it somewhat difficult to import custom graphical assets from Flash into my Flex applications. I had troubles linking my graphics to custom classes that weren’t a Sprite or MovieClip, and always found myself searching solutions for the same problems I had over and over again. Let me show you how you can easely import all your graphics from a Flash Library into Flex without breaking a sweat.

If you want to import a graphic from a Flash library, you have to link it to a class. Say you have 100 graphics you want to load, you will have to create 100 classes for them and link the two, or if you are a sane person, you can group certain graphics inside a container MovieClip, and load that container. Either way, you will still need to create atleast 1 class.

Let’s have a look at the swfLibraryLoader demo I created. The sourcecode is available, and I will be refering to it through the rest of this article.

I have created 3 Flash libraries for this example. You can find the fla’s in the ‘flashsrc’ folder. 2 swf libraries will be loaded at runtime (those are in the html-template/swf/ folder), when the application starts, and the last one will be embedded at compile time (swf file in the assets folder), just to show you how it’s done. In the ‘main’ library, you can see i’ve added an eyeball graphic, and simply created a movieclip of it. For that graphic, i have also written a class, named Eyeball. That class extends MovieClip and doesn’t really do anything more. Back in the fla file, I have linked the Eyeball MovieClip to the Eyeball class. All done, all i need to do now is export the library to a swf file. Hold up a minute, as there are still some things to keep in mind:

• Make sure the class that is linked to the MovieClip contains no flex framework classes as it won’t compile from Flash.
• If you like to keep an overview of all your graphics on the stage, it is allowed but make sure no stage instances are instantiated. We’ll be adding the graphics in Flex with code. Go to the publish settings > Flash > actionscript 3 > settings view and uncheck ‘Automatically declare stage instances’.
• Also don’t forget to add the source folder of your classes to the classpath.
• It doesn’t really matter which framerate you choose, as the final framerate will be the one you set in the swf that loads all these libraries. In our case, the framerate that is set in Flex.

The library is ready. Compile the swf library, and it’s time to move on to Flex. We need to load the swf library before making instances of the class we just created and linked the graphic to. In my example, it is called Eyeball. I use the SWFLibraryLoader class to load the libraries at runtime. The source is included in the example, but you don’t really need to know the inner workings to use it. The flow goes like this, add paths to the flash libraries in the SWFLibraryLoader queue. Add a listener for the QueueIsEmpty Event on the eventDispatcher property of the SwfLibraryLoader class, and then call the loadQueue function. Once all the libraries are loaded, the handler of the QueueIsEmpty event will be called. In that handler, you may instantiate all the classes that are linked to graphical assets. However there are again some things to keep in mind:

• All the classes that are linked to an asset inside your Flash Library are a child of a MovieClip. In Flex, you cannot add a MovieClip to it’s stage because it’s not a UIComponent. You will get a runtime error if you try and do so. To solve this problem, there is the UIComponentWrapper class. What this class does is package the movieclip inside a UIComponent instance, and add that to the flex stage. Just as you call addChild in Flex, you can call the addUIChild function of the UIComponentWrapper class. Have a look at the sourcecode included in the demo.
• There is a caching system available in the SWFLibraryLoader class that you may wish to use. The reason for this is that sometimes a class that is linked to a graphical asset inside your Flash Library, may be updated in Flex, but is not re-compiled from Flash. This results in 2 different versions of that class being used in your application. The one that was compiled inside your swf library (and wasn’t updated), and the one in your Flex app. Strange things may occur when you forget to synchronize the two, hence the caching system. What this ’system’ does is add a version number after the library path. This version number is something you control, and need to update everytime a new release of your application is deployed. Otherwise the same swf libraries will be loaded again, and this makes the system totally useless. The image on the right shows how your library paths look like if you load them using ‘1.0′ as your version string.

The second library contains a composition of graphical assets. If you look at the ‘SeaMonster’ MovieClip, there are 3 graphics inside, 2 MovieClips: ’seaMonster’ and ‘attack’ and 1 MovieClip that is linked to the ‘Chainsaw’ class, named Chainsaw. Notice i have filled in an instance name for all 3 assets. Now, if you look at the ‘SeaMonster’ class, there are 3 public properties with the same name as the ones in Flash. The property must have the same name, and must be public for this to work. All 3 assets are now available to you in code. I’ve animated some in the demo, to create a bad-ass chainsaw wielding seamonster.
The last asset in the 3rd library is one that is embedded inside the Flex app. It’s the same kind of asset I used in the ‘main’ library with the exception of 1 line of code that is different in the class that is linked to it. That line of code tells Flex to glue the graphic to the class at compile time.

[Embed(source="../assets/embed.swf", symbol="be.menhir.demo.Pirate")]

This line of code is placed just before the class code and contains the name of the symbol you wish to link the class to, aswell as the path to the swf library.

And there you go, you have learned how to import a graphical asset from a swf library into Flex!

This entry was posted on Sunday, October 26th, 2008 at 12:46 am and is filed under Actionscript 3.0, Design, Flash, Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.