flex4 - Custom Preloader in Flex 4?

Question

Has anyone successfully implemented a custom preloader in Flex 4? In my experience, when I specify a custom preloader using the preloader="com.foo.MyPreloader" in the Application tag, the preloader does not display until the SWF is completely downloaded, defeating the purpose of the preloader! Perhaps this is a bug in the still-beta Flex 4 framework?

Answer 1

I've been using this example in many Flex3 projects. It's still working with Flex4 sdk:

I can remember where I get it from. And you are right when you say it's important that this script is NOT referencing anything...

<s:Application tag ...  preloader="com.YYY.XXX.shell.view.CustomPreloader"

CustomPreloader

package com.YYY.XXX.shell.view
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.ProgressEvent;
    import flash.events.TimerEvent;
    import flash.utils.Timer;

    import mx.events.FlexEvent;
    import mx.preloaders.DownloadProgressBar;

    public final class CustomPreloader
        extends DownloadProgressBar
    {
        public  var loader : LoadScreen;
        private var _timer : Timer;

        public function CustomPreloader() 
        {
            super(); 
        }

        override public function initialize() : void
        {
            super.initialize();

            this.loader = new LoadScreen();
            this.addChild(this.loader);

            this._timer = new Timer(1);
            this._timer.addEventListener(TimerEvent.TIMER, handleTimerTick);
            this._timer.start();
        }

        override public function set preloader(preloader : Sprite):void 
        {                   
            preloader.addEventListener(ProgressEvent.PROGRESS,  SWFDownLoadScreen);
            preloader.addEventListener(Event.COMPLETE,          SWFDownloadComplete);
            preloader.addEventListener(FlexEvent.INIT_PROGRESS, FlexInitProgress);
            preloader.addEventListener(FlexEvent.INIT_COMPLETE, FlexInitComplete);
        }

        private function SWFDownLoadScreen(event : ProgressEvent) : void
        {
            var prog : Number = event.bytesLoaded / event.bytesTotal * 100;
            if (this.loader)
            {
                this.loader.progress = prog;
            }
        }

        private function handleTimerTick(event : TimerEvent) : void
        {
            this.stage.addChild(this);
            this.loader.x = (this.stageWidth  - this.loader.width)  / 2;
            this.loader.y = (this.stageHeight - this.loader.height) / 2;
            this.loader.refresh();
        }

        private function SWFDownloadComplete(event : Event) : void {}

        private function FlexInitProgress(event : Event) : void {}

        private function FlexInitComplete(event : Event) : void 
        {      
            this.loader.ready = true;
            this._timer.stop();
            this.dispatchEvent(new Event(Event.COMPLETE));
        }

        override protected function showDisplayForInit(elapsedTime:int, count:int):Boolean
        {
            return true;
        }

        override protected function showDisplayForDownloading(elapsedTime:int,
                                                  event:ProgressEvent):Boolean
        {
            return true;
        }
    }
}

LoadScreen

package com.YYY.XXX.shell.view
{

    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.Graphics;
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.utils.ByteArray;

    import mx.graphics.codec.PNGEncoder;

    public class LoadScreen extends Loader {

        //~ Settings ----------------------------------------------------------
        private static var _BarWidth     : int = 153;  // Progress bar width
        private static var _BarHeight    : int = 12;   // Progress bar height
        private static var _LogoHeight   : int = 153;   // Logo picture height
        private static var _LogoWidth    : int = 68;  // Logo picture width
        private static var _Padding      : int = 5;   // Spacing between logo and progress bar
        private static var _LeftMargin   : int = 0;    // Left Margin
        private static var _RightMargin  : int = 0;    // Right Margin
        private static var _TopMargin    : int = 1;    // Top Margin
        private static var _BottomMargin : int = 1;    // Bottom Margin

        private static var _BarBackground  : uint = 0xFFFFFF; // background of progress bar
        private static var _BarOuterBorder : uint = 0x737373; // color of outer border
        private static var _BarColor       : uint = 0x6F9FD5; // color of prog bar
        private static var _BarInnerColor  : uint = 0xFFFFFF; // inner color of prog bar

        //~ Instance Attributes -----------------------------------------------
        [Embed(source="/asset/embed/img/XXX.gif")]
        private var MyLogoClass: Class;
        private var _logo : Bitmap;
        private var _logoData : BitmapData;

        private var isReady  : Boolean = false;
        public  var progress : Number;

        //~ Constructor -------------------------------------------------------        
        public function LoadScreen()
        {
            super();
            this.progress = 0;
            this._logo = new MyLogoClass as Bitmap;
        }

        //~ Methods -----------------------------------------------------------
        public function refresh() : void
        {
            this._logoData = this.draw();
            var encoder : PNGEncoder = new PNGEncoder();
            var bytes   : ByteArray  = encoder.encode(this._logoData);
            this.loadBytes(bytes);
        }

        override public function get width() : Number
        {
            return Math.max(_BarWidth, _LogoWidth) + _LeftMargin + _RightMargin;
        }

        override public function get height() : Number
        {
            return _LogoHeight + _BarHeight + _Padding + _TopMargin + _BottomMargin;
        }

        private function draw() : BitmapData
        {
            // create bitmap data to create the data
            var data : BitmapData = new BitmapData(this.width, this.height, true, 0);

            // draw the progress bar
            var s : Sprite = new Sprite();
            var g : Graphics = s.graphics;

            // draw the bar background
            g.beginFill(_BarBackground);
            g.lineStyle(2, _BarOuterBorder, 1, true);
            var px : int = (this.width - _BarWidth) / 2;
            var py : int = _TopMargin + _LogoHeight + _Padding;
            g.drawRoundRect(px, py, _BarWidth, _BarHeight, 2);
            var containerWidth : Number = _BarWidth - 4;
            var progWidth : Number = containerWidth * this.progress / 100;
            g.beginFill(_BarColor);
            g.lineStyle(1, _BarInnerColor, 1, true);
            g.drawRect(px + 1, py + 1, progWidth, _BarHeight - 3);
            data.draw(s);

            // draw the logo
            data.draw(this._logo.bitmapData, null, null, null, null, true);
            return data;
        }

        public function set ready(value : Boolean) : void
        {
            this.isReady = value;
            this.visible = !this.isReady;
        }

        public function get ready() : Boolean { return this.isReady; }

    }
}