distribution - How do you create a single/internal pre-loader for a Flash game written using Flex?

I've got a somewhat large SWF which I'd like to deliver through a pre-loader so the user doesn't have to appear to wait as long. With Actionscript it's pretty easy to create an external pre-loader but doing so makes it harder to distribute my game. What methods are available for including the pre-loader in a single SWF?

Answer

If you're using Flex in your project, i.e. you created a Flex project, including a preloader in your Application is very easy: set a class name in you Application declaration:

Now, create a class called com.example.Preloader which extends Sprite, and implements mx.preloaders.IPreloaderDisplay.

Basically, any Sprite can be a preloader display, provided that implements the functions written in the IPreloaderDisplay interface. These functions are properties that the application pass to the class so it can know something about the application: height, width, background color, and two important functions: a "preloader" property setter, and a initialize function.

The preloader property setter accepts a Sprite, and you usually add listeners to the parameter given to you, to the PROGRESS, and COMPLETE events that the sprite dispatches to let the preloader know how is the loading going. This is an example of the property setter:

public function set preloader(value:Sprite):void
{
    _preloader = value;

    value.addEventListener(ProgressEvent.PROGRESS, progressHandler);    
    value.addEventListener(Event.COMPLETE, completeHandler);

    value.addEventListener(RSLEvent.RSL_PROGRESS, rslProgressHandler);

    value.addEventListener(RSLEvent.RSL_COMPLETE, rslCompleteHandler);
    value.addEventListener(RSLEvent.RSL_ERROR, rslErrorHandler);

    value.addEventListener(FlexEvent.INIT_PROGRESS, initProgressHandler);
    value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteHandler);
}

The initialize function is called by the application when it starts loading the real data. The default preloader uses this function to start a timer, which after some time has passed and the application is still loading, it actually displays the preloader (this is to prevent the preloader to appear immediately, until the user has waited too much time for the app to load)

    public function initialize():void
{

    _startTime = getTimer(); //from flash.utils.getTimer()
}

You might want to download some real source code, though, so I recommend this article which answers some other preloader details on how to draw things inside it: http://iamjosh.wordpress.com/2007/12/18/flex-custom-preloader/

I said at the beginning that this was very easy, but if you're a newcomer you might find this rather daunting. But once you learn how to do it, you'll find that all preloaders in Flex work the same.