Loading assets dynamically (part 2: using SWCs)

Posted on September 25, 2009

In the last post, I thought I would be able to start explaining a bit, but I got lost in my ramblings about the different ways to use assets into an ActionScript project. This time, I will get my hands dirty playing with code–and show you step by step how to get yours dirty as well. We will see how to use third party SWCs, how to create our own SWCs from the Flash IDE and how to load them efficiently. This tutorial requires you to have access to either Flash Builder, Flex Builder or a setup similar to mine with Eclipse and to Adobe Flash. I provide the sources for this tutorial at the end of the post.

Let’s start by creating an ActionScript project.

Importing an SWC into an ActionScript project

The easiest thing we can start with is importing an SWC from a third party into our project. We can either use Papervision or FisixEngine, as I stated before. Once you downloaded the sources, locate the SWC file and copy it into the “swc” directory, either with Finder if you are on Mac, or with Windows Explorer if you use Windows.

Once the file is placed, go back to Eclipse (or Flash/Flex Builder) and refresh your entire project so that the added file may be taken into account. You may right-click onto the folder and select “Refresh”, or simply click on the folder and hit F5 on your keyboard.

On a side note, it is actually a good habit to take to always refresh your project folder when you go back to your IDE after adding files into said project. It will save you some headaches.

Right-click on the project folder and go to “Properties”, and then select the “ActionScript Build Path” tab on the left. At the right of that window, click on the button “Add SWC…” and browse to the SWC you just added into your project.

The link type is set to “Merged into code” by default. What this means is that the SWC is added to your code at compile time, adding some size to your project. In the case of third party code libraries, you cannot modify this since they do not provide an SWF to load at runtime (more on this below).

Now all the classes from that are included into that SWC are available to you in your code, and you can get code complete as well. Also, another folder has been added to your project folder, “Referenced Libraries”. If you expand this icon, you will see the libraries you imported and all their API.

Creating an SWC from Flash and loading it dynamically

As you can see from the first screenshot in this post, I made a distinction between embedded assets and authoring assets.

What I mean by that is that the embedded assets are visual assets created in Flash, exported as an SWC and merged into the code (as seen in the previous point). The authoring assets are planned to be loaded at runtime, to ligthen the size of my final SWF. Let’s see how this goes.

In the embedded assets, I usually just have the preloader, since this is something we always need. In the Flash library, check the properties of the preloader MovieClip. Make sure to check the “Export for ActionScript” box. Also, give it the Preloader class name. No association to any .AS file, a simple class. Flash will alert that no class is associated and that it will create one on its own, which is all good.

What this means is that the Preloader class is available to you in code complete in your IDE since you will be able to see it in the Referenced Libraries.

Since this class you created extends MovieClip, the said class inherits of all the functions and variables. If you were to nest MovieClips into the one created and give them name, they will appear in the autocomplete as well. Quite useful, let me tell you!

var preloader:Preloader = new Preloader();
addChild(preloader);
trace("preloader.fillMC.width: " + preloader.fillMC.width);

That’s all fine and dandy, but it’s just a repeat of the previous point. What we need is actually to take some weight off of the filesize, load the assets dynamically and still be able to work as we did so far. Let’s first create MovieClips in the authoringAssets.fla with classes names and then export the SWF and the SWC. Then, once you imported the SWC, change the link type to “External”. Simply double click on the “Link type” and change it from the combo box.

However in this case it is important that you do not create an instance of these classes before the external assets are loaded, otherwise you would get an error during the compilation.

package {

  import flash.display.Loader;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.net.URLRequest;
  import flash.system.ApplicationDomain;

  public class Main extends Sprite {

    private var _loader:Loader;

    public function Main() {
      _loader = new Loader();
      _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderCompleteHandler);
      var loaderContext:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
      _loader.load(new URLRequest("../assets/swf/authoringAssets.swf"), loaderContext);
    }

    private function loaderCompleteHandler(event:Event):void {
      _loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, loaderCompleteHandler);
      var whiteSquare:WhiteSquare = new WhiteSquare();
      var blackSquare:BlackSquare = new BlackSquare();
      blackSquare.x = 32;
      addChild(whiteSquare);
      addChild(blackSquare);
    }

  }

}

The LoaderContext is essential here. What this does is to make sure that once the SWF is loaded, its contents, namely the classes you put in it, are available everywhere in the application. Once the SWF is loaded, then you can create as many instances as you need. If you end up having tons of classes and a huge assets file, at least it’s easy to use a preloader to deal with them.

Here are the sources for this tutorial. Thanks to James Paterson for showing me this useful technique!

Update: I have written another post about how to do this with FDT, IntelliJ IDEA, FlashDevelop and Ant.

Last updated on February 13, 2024