Avg. Rating 5.0
Tags:



Problem

Display a custom gif while an application is loading.

Solution

Create a custom preloader to display a gif.

Detailed explanation

Create a custom preloader that extends a sprite that will show a gif and fade out once the application is fully downloaded. 

Create a class called CustomPreloader

package
{
    import flash.display.*;
    import flash.events.*;
    import flash.net.*;
    import flash.utils.*;
   
    import mx.events.*;
    import mx.preloaders.*;
   
    public class CustomPreloader extends Sprite
        implements IPreloaderDisplay
    {
        [ Embed(source="../Graphics/myLogo.gif", mimeType="application/octet-stream") ]
        private var myLogo:Class;
        public var timer:Timer;
        private var logoLoader:flash.display.Loader;
       
        public function CustomPreloader() {  
            super();       
        }
       
        // Specify the event listeners.
        public function set preloader(preloader:Sprite):void {
            preloader.addEventListener(
                FlexEvent.INIT_PROGRESS, handleInitProgress);
            preloader.addEventListener(
                FlexEvent.INIT_COMPLETE, handleInitComplete);
        }
       
        public function initialize():void {
            logoLoader = new flash.display.Loader();      
            logoLoader.contentLoaderInfo.addEventListener(
                Event.COMPLETE, logoLoaderComplete);
            logoLoader.visible = false;
            logoLoader.loadBytes( new myLogo() as ByteArray );
            addChild(logoLoader);
        }
       
        // After the gif is loaded then display it.
        private function logoLoaderComplete(event:Event):void
        {
            logoLoader.stage.addChild(this)
            logoLoader.x = logoLoader.stage.stageWidth/2 - logoLoader.width/2
            logoLoader.y = logoLoader.stage.stageHeight/2 - logoLoader.height/2
              logoLoader.visible=true;
        }  
      
        private function handleInitProgress(event:Event):void {
        }
       
        //Application has downloaded so start the fade out.
        private function handleInitComplete(event:Event):void {
            var timer:Timer = new Timer(2000,1);
            timer.addEventListener(TimerEvent.TIMER, dispatchComplete);
            timer.start();   
            closeScreen(); 
        }
   
        private function dispatchComplete(event:TimerEvent):void {
            dispatchEvent(new Event(Event.COMPLETE));
        }

        public function closeScreen():void
        {
            timer = new Timer( 1 );
               timer.addEventListener( TimerEvent.TIMER, closeScreenFade );                   
            timer.start();
        }
       
        public function closeScreenFade( event:TimerEvent ):void
        {
            if( logoLoader.alpha > 0){
                logoLoader.alpha = logoLoader.alpha - .002;
                this.alpha = this.alpha - .002;
            } else {
                timer.stop()
                this.removeChild(logoLoader);
            }       
        }       
   
        public function get backgroundColor():uint {
            return 0;
        }
       
        public function set backgroundColor(value:uint):void {
        }
       
        public function get backgroundAlpha():Number {
            return 0;
        }
       
        public function set backgroundAlpha(value:Number):void {
        }
       
        public function get backgroundImage():Object {
            return null;
        }
       
        public function set backgroundImage(value:Object):void {
        }
       
        public function get backgroundSize():String {
            return "";
        }
       
        public function set backgroundSize(value:String):void {
        }
   
        public function get stageWidth():Number {
            return 0;
        }
       
        public function set stageWidth(value:Number):void {
        }
       
        public function get stageHeight():Number {
            return 0;
        }
       
        public function set stageHeight(value:Number):void {
        }
    }
}

Then in your application reference your class as the preloader

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    preloader="CustomPreloader"
    layout="absolute">
    <mx:VBox width="100%" height="100%" >
        <mx:Label text="made it to your application"/>
    </mx:VBox>
</mx:Application>
Report abuse

Related recipes