Preloaders in AS3

April 2, 2010

Update: Troy Gilbert suggested a much better solution for this in the comments below that uses -frame compiler option over the [Frame] metadata tag, I suggest you use his approach since it stops the compiler from bundling in Flex framework specific code like IFlexModuleFactory that you don’t really need.

Update: Troy further improved his class here

***

Today, I needed to create a preloader for a pure AS3 application compiled with mxmlc. I couldn’t find much documentation on the topic but this post by Keith Peters describes the solution in good detail, except his post is some what old and the code there doesn’t work with the latest compiler..

As Keith describes, the first thing you need to do to implement a preloader is move your application to the second frame of the movie, this is done by adding a [Frame] metadata tag above your document class and providing it with a factory class that will initialize your application, in case of Flex this factory is mx.core.SystemManager .. we will have to write our own.

Your document class would now look something like this …

Our ApplicationLoader factory class has to extend MovieClip (not Sprite) and has to implement the interface mx.core.IFlexModuleFactory (this is the main change since Keith’s post). In the below code, I’ve stubbed out functions from IFlexModuleFactory and you can leave the code as is for most applications, you will only need to change this if your application loads other SWF’s at runtime or if you’re building an AIR application.

When we compile our Example application the compiler will generate a class (you can see it with -keep) that subclasses our ApplicationLoader factory and implements some additional functionality .. an instance of this sits in the first frame of our movie, loads the second frame that has our application and shows a preloader while the application loads …

You may change the look of your preloader in the onEnterFrame method but since this first frame needs to load quickly keep it light and avoid using any classes that are not native to Flash Player.

Finally thank’s to Keith for his post that got me started and also for all the other cool stuff I’ve learned from him over the years.

6 Responses - What do you think?

  1. [...] this post on preloaders today. I see a lot of similar examples. What I don’t like about any of them is the fact that [...]

  2. I don’t like using the [Frame] tag because of it’s dependencies on the Flex framework (IFlexModuleFactory, etc.). Here’s how I handle a minimal, AS3 preloader:

    http://troygilbert.com/2010/04/minimal-preloader-for-as3/

  3. Hi Troy,

    That is perfect !
    I just tried out a quick example based on your code, works like a charm and no more mx classes in my SWF.
    Thank you for letting me know, I’ll update this post.

    Cheers,
    Mrinal

  4. [...] This post was mentioned on Twitter by Joseph Burchett, Mrinal Wadhwa, The Xcelsius Gurus, The Xcelsius Gurus, cksachdev and others. cksachdev said: RT @mrinal: Preloaders in AS3 http://bit.ly/aFpyD1 << nice post on preloader in #as3 [...]

  5. The reason you need another frame is to force compiler to export the classes of your app.But actually,You don’t even have to deal with “frame”.

    if you use “-include Main” or “-include XXX” compiler option,you’re telling the compiler to export the Main Class,or the XXX class.So when you use getDefinitionByName(),you won’t get runtime error.

  6. [...] Preloaders in AS3 – Mrinal Wadhwa on Rich Internet Applications [...]

Your thoughts or questions: