Custom Flex Preloader

Flex has a built in preloader that isn’t very stylish, so it stands to reason that you might want to create your own. The process for this isn’t very well documented, but it’s not very difficult if you know what you’re doing.

To get your custom preloader to work you have to add the preloader attribute to the Application tag. I’ve also put the preloader in the same directory as the Application mxml, but you could put it in any directory as long as you give the preloader attribute the full package path.

<?xml version="1.0" ?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100%"
    height="100%"
    layout="absolute"
    preloader="CustomPreloader">
    <!-- Your Code Here -->
</mx:Application>

Your custom loader class must extend the DownloadProgressBar class. I’ve drawn the progress bar programmatically, but you are free to try what you want.

package
{
    import flash.display.GradientType;
    import flash.display.InterpolationMethod;
    import flash.display.MovieClip;
    import flash.display.SpreadMethod;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.ProgressEvent;
    import flash.filters.DropShadowFilter;
    import flash.geom.Matrix;

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

    public class CustomPreloader extends DownloadProgressBar
    {
        public var progress:Sprite;
        public var progressTotal:Sprite;

        public static var PROGRESS_WIDTH:Number = 274;
        public static var PROGRESS_HEIGHT:Number = 6;

        public function CustomPreloader():void
        {
            super();        

            progressTotal = new Sprite();
            addChild(progressTotal);

            var type:String = GradientType.LINEAR;
            var colors:Array = [0x545454, 0x8A8A8A];
            var alphas:Array = [1, 1];
            var ratios:Array = [0, 255];
            var spreadMethod:String = SpreadMethod.PAD;
            var interp:String = InterpolationMethod.LINEAR_RGB;
            var focalPtRatio:Number = 0;

            var matrix:Matrix = new Matrix();
            var boxWidth:Number = PROGRESS_WIDTH;
            var boxHeight:Number = PROGRESS_HEIGHT;
            var boxRotation:Number = Math.PI/2; // 90˚
            var tx:Number = 0;
            var ty:Number = 0;
            matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);

            progressTotal.graphics.beginGradientFill(type,
                                        colors,
                                        alphas,
                                        ratios,
                                        matrix,
                                        spreadMethod,
                                        interp,
                                        focalPtRatio);

            progressTotal.graphics.lineStyle(1, 0x000000);
            progressTotal.graphics.drawRoundRect(0, 0, PROGRESS_WIDTH, PROGRESS_HEIGHT, PROGRESS_HEIGHT);
            progressTotal.graphics.endFill();

            progress = new Sprite();
            addChild(progress);

            var dropShadowFilter:DropShadowFilter = new DropShadowFilter;
            dropShadowFilter.blurX = 10;
            dropShadowFilter.blurY = 10;
            dropShadowFilter.distance = 0;
            dropShadowFilter.color = 0x90d955;
            progress.filters = [dropShadowFilter];
        }

        public function drawProgress(percentage:Number):void
        {
            progress.graphics.clear();

            var type:String = GradientType.LINEAR;
            var colors:Array = [0x99DE62, 0x7AC142];
            var alphas:Array = [1, 1];
            var ratios:Array = [0, 255];
            var spreadMethod:String = SpreadMethod.PAD;
            var interp:String = InterpolationMethod.LINEAR_RGB;
            var focalPtRatio:Number = 0;

            var matrix:Matrix = new Matrix();
            var boxWidth:Number = PROGRESS_WIDTH*percentage;
            var boxHeight:Number = PROGRESS_HEIGHT;
            var boxRotation:Number = Math.PI/2; // 90˚
            var tx:Number = 0;
            var ty:Number = 0;
            matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);

            progress.graphics.beginGradientFill(type,
                                        colors,
                                        alphas,
                                        ratios,
                                        matrix,
                                        spreadMethod,
                                        interp,
                                        focalPtRatio);

            progress.graphics.drawRoundRect(0, 0,  PROGRESS_WIDTH*percentage, PROGRESS_HEIGHT, PROGRESS_HEIGHT);
            progress.graphics.endFill();
        }

        public override function set preloader(preloader:Sprite):void
        {
            preloader.addEventListener(ProgressEvent.PROGRESS, onSWFDownloadProgress);
            preloader.addEventListener(Event.COMPLETE, onSWFDownloadComplete);
            preloader.addEventListener(FlexEvent.INIT_PROGRESS,  onFlexInitProgress);
            preloader.addEventListener(FlexEvent.INIT_COMPLETE,  onFlexInitComplete);

            progressTotal.x = stage.stageWidth/2 - PROGRESS_WIDTH/2;
            progressTotal.y = stage.stageHeight/2;

            progress.x = stage.stageWidth/2 - PROGRESS_WIDTH/2;
            progress.y = stage.stageHeight/2;
        }     

        private function onSWFDownloadProgress(event:ProgressEvent):void
        {
            drawProgress(event.bytesLoaded/event.bytesTotal);
        }

        private function onSWFDownloadComplete(event:Event):void
        {
            //onSWFDownloadComplete
        }

        private function onFlexInitProgress(event:FlexEvent):void
        {
            //onFlexInitProgress
        }

        private function onFlexInitComplete(event:FlexEvent):void
        {
            dispatchEvent( new Event(Event.COMPLETE));
        }
    }
}