Loader for Actionscript Flex Builder and FDT Projects

Since I started using Flex Builder to code Flash projects, one of the major hurdles I’ve had to deal with is how to get Flash based assets into Flex Builder. To accomplish this end, I’ve created a multi loader library that lets you load one or more SWF files at runtime. These SWF’s are then registered into the Application domain and any exported symbols in them become available.

This is really just an extension on the concept discussed by BigSpaceship and others in the past. You load one or more SWFs, then access the movie clips contained within them via the getDefinitionByName method. The main benefit of this library is that you can with one line load one or more SWFs and the class acts much the same as a single loader. You can still add all the same events to it that you would a normal Loader object, and the class manages the individual loading of the SWFs. This makes it super easy to create a preloader that works no matter how many SWFs you are loading. The percentage is actually accurate regardless of how many SWFs are being loaded as well.

This project I’ve uploaded shows a simple usage of it, and it breaks down pretty quickly (The loader source can be found as a flex builder project archive here, and the standalone swc can be downloaded here:

aLoader = new AssetLoader();
aLoader.addEventListener(ProgressEvent.PROGRESS, traceStatus);
aLoader.addEventListener(Event.INIT, assetLoadComplete);
aLoader.load(”circleassets.swf”, “squareassets.swf”);

You can see here that once you declare it, you can add the event listeners and then pass as many SWFs as you want to the load function. All of them will be seperately stored and loaded for you automatically. For the purposes of the ProgressEvent function, the bytesTotal and bytesLoaded properties of the ProgressEvent are treated as if you are loading one large SWF, the size of all the swfs combined. This way the percentage is accurate for any preloader percentage displays that need to listen to the ProgressEvent.

public function traceStatus(evt:ProgressEvent):void
{
trace( evt.bytesLoaded + “/” + evt.bytesTotal );
}

Also note that we’re listening for Event.INIT, and not the Event.COMPLETE. Since we’re waiting for the loaded SWFs to be registered to the application domain we need to make sure that they have been registered and all of their internal elements are available before we attempt to access them. Once all of the SWFs are loaded, its easy to access their internal symbols:

public function assetLoadComplete( evt:Event ):void
{
trace(”load complete”);

//Place the assets on the stage
var circle:MovieClip = AssetFinder.FindMovieClipAsset( “com.view.assets.LinLeftCircle” );
addChild( circle );

var square:MovieClip = AssetFinder.FindMovieClipAsset( “com.view.assets.RadOutSquare” );
addChild( square );
square.x = 250;
square.y = 250;
}

You should also take a look at the FLA’s in the project to get an uderstanding of how to create the symbols. Note that I use the “com.view.assets” prefix in front of the actual symbol name, if you look in the FLA you’ll find that same prefix on the exported symbol name. If all the symbols that are to be imported at runtime are named in this same way, its much easier to keep them organized. Once the getDefinitionByName method returns, the variables will have references to the MovieClips inside the SWF with the proper name. They are MovieClips and as such can be treated exactly like a MovieClip with no adverse side effects. So there you have it, a simple class for loading multiple SWFs into an actionscript project, and you get to minimize your time spent in Flash CS3.

To import the swc into your project, first move the swc into a folder that won’t get deleted, (I usually make a libs folder on the top level of the project folder). Then just right click on your projects root file, then click on properties. Once the properties window pops up, click on the Actionscript Build Path option.

Build Path Image

Then select the library path button at the top. From there, the add swc button should be visible, click it and browse to your swc. Once you’ve successfully linked to the swc you only need to import the right classes to use them:

import com.loaderutil.AssetFinder;
import com.loaderutil.AssetLoader;

There is still the hurdle of how to best organize and manage these symbols once they’ve been imported. Some friends and I have been working on some classes to help optimize that process as well. Once they get to a certain point I’ll add them to the library and post the new source up here.