Making a preloader is the epitome of game development suck as far as I am concerned. Usually you are implementing them at the end of the development schedule when you are are sick and tired of looking at this game that you have spent so much time on already. Now you have to figure out how to massage all your assets magically across a few frames for people with slow internet connections when all you want to do is kick the darn thing out the door and be done with it. There are umptillion tutorials out there on how to create a preloader in the Flash IDE. Flex has a pretty snazzy built in preloader. Are we screwed because we’re going with a pure Actionscript 3.0 project? As it turns out, you can get a customizable AS3 only preloader with almost no effort at all.

Credit

This AS3 only preloader is heavily borrowed from the one described at bit-101. If you’re interested in the technical reasons for why this preloader works, then I would encourage you to start there. This preloader builds on the fundamentals established there but with a focus on extensibility and ease of implementation.

Zero Effort Preloading

Based on the fundamentals established in the bit-101 article, I have provided an AbstractPreloader class. You must subclass this class in order to create a meaningful preloader for your game. These are the steps required to get your preloader working:

1. Extend the provided AbstractPreloader class.

2. Override the following protected functions: beginLoading, updateLoading( percent ), endLoading. If your Main class is not called “Main”, then override the mainClassName function too.

3. Embed the preloader with a single line of code.

4. Be mindful of gotchas.

That’s it, really.

So, here is my #1 and #2, a simple (and super ugly) % displayer:

public class MyPreloader extends AbstractPreloader
{   
    private var m_textfield : TextField;

    public function MyPreloader() {}

    override protected function beginLoading():void 
    {
        m_textfield = new TextField();
        addChild( m_textfield );
        m_textfield.text = "0%";
    }

    override protected function updateLoading(a_percent:Number):void 
    {
        m_textfield.text = Math.round( a_percent * 100 ) + "%";
    }

    override protected function endLoading():void 
    {
        removeChild( m_textfield );
        m_textfield = null;
    }

} // c  

I embed this with a single line of code on the file in Flash Develop marked as “Always Compile” (ie: my typical “document root” class).

[Frame(factoryClass="MyPreloader")]

This tells the compiler to use MyPreloader (defined above) as my preloader for the Main class (and the rest of the game that is created by Main).

Celebrate

You’re done! It’s really that easy. You should never need another preloader for your AS3 projects.

Sober Up

There are a couple gotchas as a result of this method of preloading that are not significant unless you forget about them, so let’s review them quick.

Gotcha 1

Don’t link or put anything “heavy” inside the preloader subclass. Your subclass of AbstractPreloader should be as light as possible. Anything that is linked or otherwise created in that class has to be loaded before your preloader can begin.

Gotcha 2

Your preloader subclass becomes and will remain the document root of the document. When Main has finished preloading it is added as a child of the preloader. The preloader will exist forever, so make sure you clean it up in endLoading.

Gotcha 3

Main’s contructor doesn’t have a reference to stage. Because Main is now a child of the preloader, it does not have a reference to the stage until after the constructor has completed. You should be familiar with dealing with these sorts of issues. If you need to, add a listener for the ADDED_TO_STAGE event and do your init code in that handler.

Gotcha 4

The preloader is actually doing some Flex magic behind the scenes so a portion of the Flex framework gets embedded in order to support the preloader. If you build your swf with Flex 3, the bloat this causes is < 50k. This is a price you have to pay for “free” preloading. Sorry.

Here’s a Preloader example demonstrating the simple preloader outlined above. You can also download the source code for the preloader example (which includes the AbstractPreloader implementation).