Custom Preloader in Flex 4?
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
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; }
}
}