Creating and applying custom preloader to Flex application (part 2)

In part 1 I created custom preloader for Flex app using Flex API (IPreloaderDisplay). In this post I'm going to apply my preloader through loading Flex compiled SWF. Here I'm using the same SWC with progress bar movieclip as in part 1.

Main steps:

1. Create pure AS3 application.
2. Show custom preloader.
3. Load external SWF with Loader.
4. Catch loading events, update preloader view.
5. Pass flashvars to loaded application.
6. Hide preloader, show application.

package
{
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.events.ProgressEvent;
    import flash.net.URLRequest;
 
    public class MyPreloader extends Sprite
    {
        private var appLoader : Loader = new Loader();
        private var preloader : PreloaderBar;
        private var appSystemManager : Object;
 
        public function MyPreloader()
        {
            stage.scaleMode = StageScaleMode.NO_SCALE;
            addEventListener(Event.ADDED_TO_STAGE, onAdded);
            appLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
            appLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
        }
 
        private function onAdded(event : Event) : void
        {
            preloader = new PreloaderBar();
            addChild(preloader);
            centerPreloader();
            preloader.stop();
            appLoader.load(new URLRequest("http://dl.dropbox.com/u/15365115/blog/preloader_part2/Main.swf"));
        }
 
        private function onProgress(event : ProgressEvent) : void
        {
            var progressPercent : int = event.bytesLoaded / event.bytesTotal * 100;
            preloader.label.text = progressPercent.toString() + "%";
            preloader.gotoAndStop(progressPercent);
        }
 
        private function onComplete(event : Event) : void
        {
            preloader.label.text = "Initializing...";
            addChildAt(appLoader.content, 0);
            appSystemManager = appLoader.content;
            appSystemManager.visible = false;
            appSystemManager.addEventListener("applicationComplete", onReadyToShow, false, 1000);
        }
 
        private function centerPreloader() : void
        {
            preloader.x = (stage.stageWidth / 2) - (width / 2);
            preloader.y = (stage.stageHeight / 2) - (height / 2);
        }
 
        private function onReadyToShow(event : Event) : void
        {
            //passing flashvars
            for(var key : String in loaderInfo.parameters)
                appSystemManager.application.parameters[key] = loaderInfo.parameters[key];
            removeChild(preloader);
            appSystemManager.visible = true;
        }
    }
}
 

 In constructor we subscribe to Event.COMPLETE  and ProgressEvent.PROGRESS of appLoader.contentLoaderInfo. On progress we update preloader view. On complete we add loaded application instance to display list, but we're not going to show it now, because it's not initialized yet. Pay attention, that main top class in any Flex application is SystemManager, not Application. After applicationComplete event (not before) we can access Application instance through application property of SystemManager instance, pass flashvars to our app and show it. Parameters of application is read-only, so we need to pass flashvars by values.
That's all, preloader is ready.

Hope, it was easy.

Run example 
Download sources