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?
Simon Lenoir
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; }
}
}
I feel dumb...I was referencing one of my main application classes from within the preloader, thus causing all of my classes to be compiled into the preloader, meaning it cannot display the preloader until everything is loaded.
For future reference: Double-check every reference in your preloader, make sure you use nothing more than what is absolutely necessary
There is a Flex 4 Custom Preloader code sample here http://www.leavethatthingalone.com/blog/index.cfm/2009/11/11/Flex4CustomPreloader
来源：https://stackoverflow.com/questions/1146314/custom-preloader-in-flex-4