Media Art, User Experience Design, and Interface Development

Loading assets dynamically (part 2: using SWCs)

Posted on 2009-09-25

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.

Typical ActionScript project folder structure
Typical ActionScript project folder structure

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.

Library merged into code
Library merged into code

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).

Referenced libraries
Referenced libraries

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.

Referenced Librairies - Assets merged into code
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.

Library set as external
Library set as external
Referenced Libraries - External assets
Referenced libraries

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.


12 responses to “Loading assets dynamically (part 2: using SWCs)”

  1. lukas says:

    Older, but still helpful article, thanks

  2. super80 says:

    @Lukas
    You said “older”…is there a better way to do this in Flash Builder 4?

    Thanks

  3. parhelium says:

    Thank you 🙂
    You saved me a lot of time !

  4. […] already published a post about this workflow and this IDE, simply refer back to […]

  5. Pawel says:

    I’ve got this problem, when switching to “Link type: external” I’m getting 1014 VerifyError:
    Actually everything works fine, when I use loaded Clases in the main class, but the problem occurs when I star using it in PureMVC (It’s initiated as Singleton after downloading the swf).

    Did some google reasearch but couldnt find the answer

    Exact error:
    VerifyError: Error #1014: Class IXMLParsable could not be found.

  6. Pawel says:

    I forgot to mention, that my object in flash is being extended by different as class

  7. @Pawel: did you make sure that you allowed your Flash Player to load and use content locally? I had written a piece about that a while back, maybe that can solve your issue: http://jansensan.net/flash-player-security-settings-to-develop-locally

    Also, did you make sure that your dynamic content is loaded before you create instances of your classes?

    Otherwise, I would look into PureMVC maybe onto their forums. I do not know the framework and do think would cause such an issue, but it’s another possible parameter you mentioned.

    Good luck, and let me know how it goes.

  8. ManicVisitor says:

    I have imported your example project in FlashBuilder 4.5 as is but it gives me a runtime error when trying to instantiate the ‘WhiteSquare’ class. I am compiling with Flex 4.5.1 (build 21328) SDK.

    VerifyError: Error #1014: Class WhiteSquare could not be found.

    grtz

  9. @ManicVisitor: sorry for the long delay for me to reply. I just tested it in the same context you described, it works properly. I would like to verify with you if you have set your Flash Player settings to authorize your computer: http://jansensan.net/flash-player-security-settings-to-develop-locally

  10. AS3 Novice says:

    I just have one simple question, though unfortunately it seems information on the net are scarce.

    Working on one *.swc, in Build Path Panel, is the following correct?

    Adding the swc to the library allows you to reference it in code without compiler errors, regardless of the link type. What differs is the following:

    Merged into code :
    Resulting swf contains the swc. The runtime does not need anymore class-info loading when swf is played.
    .
    Runtime Shared Libraries :
    Resulting swf is separated from the swc. The runtime does the class-info loading for you.

    External :
    Resulting swf is separated from the swc. The runtime DO NOT load class-infos for you. This is a “Do It all by Yourself” setting. Class-info loading requires stuff like Loader/ApplicationDomain.

    Looking this up on google it seems some (especially Flex users) simply call External Linking “Loading RSLs”, adding my confusion.

    I really need someone who can confirm if my understanding is correct.

  11. Hello AS3 novice, in all honesty, it has been years since I have developed in AS3, so I cannot say if the instructions in this post are still relevant. I would suggest you ask your question on StackOverflow, as there are more chances that there are people up to date in AS3 development that could actually provide you with more help.

  12. Gimmick says:

    @AS3 Novice it has been quite a while since then and Flash is getting retired soon but for the sake of Adobe AIR and the remaining Flash community, I’ll try answering with whatever I know about this:

    RSLs cannot be used by pure AS3 applications with a base class of Sprite or MovieClip. In other words, if your document class extends Sprite or MovieClip, which is usually the case when you’re not using Flex, then you cannot use RSLs.

    RSLs seem to be a “convenience” for externally-linked SWCs. In other words, the Flex runtime does everything behind the scenes when you designate SWCs as runtime shared libraries. You could and probably would be able to use a library that does the same thing using ApplicationDomain like the 3rd option.

    Since SWCs are zip files with a SWF and metadata XMLs, I don’t see any reason why you can’t load them at runtime like you would DLLs. The only trouble, hence, being that you need to unzip them; that’s not really a problem with 99% of use cases (like AIR, which has the FZip or the Nochump zip library for example, to handle ZIPs)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.