flex应用看久了，一个默认的装载loading界面就会导致审美疲劳，下面提供一种方法，让你可以自定义你的装载界面。
1，在src目录下建立自定义类，两个文件代码如下：
Preloader.as
package com.preloader
{
import mx.preloaders.DownloadProgressBar;
import flash.display.Sprite;
import flash.events.ProgressEvent;
import flash.events.Event;
import mx.events.FlexEvent;
import mx.managers.SystemManager;
import mx.managers.BrowserManager;
import flash.utils.Timer;
import flash.events.TimerEvent;
public class Preloader extends DownloadProgressBar
{
public var m_Progress: ProgressBar;
private var m_Timer: Timer;
public function Preloader(): void{
super();
var browser: BrowserManager;
m_Progress = new ProgressBar;
this.addChild(m_Progress);
m_Timer = new Timer(1);
m_Timer.addEventListener(TimerEvent.TIMER, timerEventHandler);
m_Timer.start();
}
override public function set preloader(value:Sprite):void{
value.addEventListener(ProgressEvent.PROGRESS, progressEventHandler);
value.addEventListener(Event.COMPLETE, completeEventHandler);
value.addEventListener(FlexEvent.INIT_PROGRESS, initProgressEventHandler);
value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteEventHandler);
}
private function progressEventHandler(event: ProgressEvent): void{
var progress: Number = event.bytesLoaded / event.bytesTotal * 100;
if (m_Progress){
m_Progress.progress = progress;
}
}
private function timerEventHandler(event: TimerEvent): void{
this.stage.addChild(this);
var width: Number = this.stage.stageWidth * 40 / 100; // Get 40% for the Stage width
// Set the Position of the Progress bar to the middle of the screen
m_Progress.x = (this.stage.stageWidth - m_Progress.getWidth()) / 2;
m_Progress.y = (this.stage.stageHeight - m_Progress.getHeight()) / 2;
m_Progress.refreshProgressBar();
}
private function completeEventHandler(event: Event): void{
var i: int = 0;
}
private function initProgressEventHandler(event: FlexEvent): void{
var i: int = 0;
}
private function initCompleteEventHandler(event: FlexEvent): void{
m_Progress.ready = true;
m_Timer.stop();
this.dispatchEvent(new Event(Event.COMPLETE));
}
}
}
{
import mx.preloaders.DownloadProgressBar;
import flash.display.Sprite;
import flash.events.ProgressEvent;
import flash.events.Event;
import mx.events.FlexEvent;
import mx.managers.SystemManager;
import mx.managers.BrowserManager;
import flash.utils.Timer;
import flash.events.TimerEvent;
public class Preloader extends DownloadProgressBar
{
public var m_Progress: ProgressBar;
private var m_Timer: Timer;
public function Preloader(): void{
super();
var browser: BrowserManager;
m_Progress = new ProgressBar;
this.addChild(m_Progress);
m_Timer = new Timer(1);
m_Timer.addEventListener(TimerEvent.TIMER, timerEventHandler);
m_Timer.start();
}
override public function set preloader(value:Sprite):void{
value.addEventListener(ProgressEvent.PROGRESS, progressEventHandler);
value.addEventListener(Event.COMPLETE, completeEventHandler);
value.addEventListener(FlexEvent.INIT_PROGRESS, initProgressEventHandler);
value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteEventHandler);
}
private function progressEventHandler(event: ProgressEvent): void{
var progress: Number = event.bytesLoaded / event.bytesTotal * 100;
if (m_Progress){
m_Progress.progress = progress;
}
}
private function timerEventHandler(event: TimerEvent): void{
this.stage.addChild(this);
var width: Number = this.stage.stageWidth * 40 / 100; // Get 40% for the Stage width
// Set the Position of the Progress bar to the middle of the screen
m_Progress.x = (this.stage.stageWidth - m_Progress.getWidth()) / 2;
m_Progress.y = (this.stage.stageHeight - m_Progress.getHeight()) / 2;
m_Progress.refreshProgressBar();
}
private function completeEventHandler(event: Event): void{
var i: int = 0;
}
private function initProgressEventHandler(event: FlexEvent): void{
var i: int = 0;
}
private function initCompleteEventHandler(event: FlexEvent): void{
m_Progress.ready = true;
m_Timer.stop();
this.dispatchEvent(new Event(Event.COMPLETE));
}
}
}
ProgressBar.as
package com.preloader
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Graphics;
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Matrix;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import flash.utils.ByteArray;
import mx.controls.Label;
import mx.graphics.codec.PNGEncoder;
public class ProgressBar extends Loader
{
// Logo picture
[Embed(source="icon/loader.png")]
[Bindable]
private var logoClass: Class;
private var Logo: Bitmap;
private var m_Ready: Boolean;
private var m_Progress: Number;
private var m_BitmapData: BitmapData;
// Constant to change to fit your own layout
private static var ProgressWidth: int = 150; // Progress bar width
private static var PictureWidth: int = 48; // Logo picture width
private static var LeftMargin: int = 1; // Left Margin
private static var RightMargin: int = 1; // Right Margin
private static var Spacing: int = 10; // Spacing between logo and progress bar
private static var TopMargin: int = 1; // Top Margin
private static var BottomMargin: int = 1; // Bottom Margin
private static var PictureHeight: int = 48; // Logo picture height
private static var ProgressHeight: int = 12; // Progress bar height
private static var ProgressBarBackground: uint = 0xFFFFFF;
private static var progressBarOuterBorder: uint = 0x323232;
private static var ProgressBarColor: uint = 0xFF4707;
private static var ProgressBarInnerColor: uint = 0xFFFFFF;
public function ProgressBar(): void{
super();
m_Progress = 0;
Logo = new logoClass as Bitmap;
this.addEventListener(Event.RENDER, renderEventHandler);
}
private function renderEventHandler(event: Event): void{
}
public function refreshProgressBar(): void{
m_BitmapData = drawProgress(); // Create the bitmapdata object
var encoder: PNGEncoder = new PNGEncoder();
var byteArray: ByteArray = encoder.encode(m_BitmapData); // Encode the bitmapdata to a bytearray
this.loadBytes(byteArray); // Draw the bitmap on the loader object
}
public function getWidth(): Number{
return LeftMargin + PictureWidth + Spacing + ProgressWidth + RightMargin;
}
public function getHeight(): Number{
return TopMargin + PictureHeight + BottomMargin;
}
private function drawProgress(): BitmapData{
// Create the bitmap class object
var bitmapData: BitmapData = new BitmapData(getWidth(), getHeight(), true, 0);
// Draw the Progress Bar
var sprite: Sprite = new Sprite();
var graph: Graphics = sprite.graphics;
// Draw the progress bar background
graph.beginFill(ProgressBarBackground);
graph.lineStyle(1, progressBarOuterBorder, 1, true);
var containerWidth: Number = ProgressWidth;
var px: int = getWidth() - RightMargin - ProgressWidth;
var py: int = (getHeight() - ProgressHeight)*2/3;
graph.drawRoundRect(px, py, containerWidth, ProgressHeight, 0);
containerWidth -= 4;
var progressWidth: Number = containerWidth * m_Progress / 100;
graph.beginFill(ProgressBarColor);
graph.lineStyle(1, ProgressBarInnerColor, 1, true);
graph.drawRoundRect(px+1, py+1, progressWidth, ProgressHeight-2, 0);
//Construct the Text Field Object and put the progress value in it
var textField: TextField = new TextField();
//textField.background = true;
//textField.border = true;
var format:TextFormat = new TextFormat();
format.font = "Verdana";
format.color = 0x000000;
format.size = 10;
//format.bold = true;
textField.defaultTextFormat = format;
textField.text = m_Progress.toFixed(0) + "%";
//Create a BitmapData object and take the Width and height of the TextField text.
var textBitmapData: BitmapData = new BitmapData(textField.textWidth + 5, textField.textHeight);
//Set the BitmapData object background color to the background color of the progress bar
textBitmapData.floodFill(0, 0, ProgressBarBackground);
//Draw the TextFiel object in the BitmapData object
textBitmapData.draw(textField);
//Construct the matrix object
//The matrix object is used to place the text
var textBitmapMatrix: Matrix = new Matrix();
textBitmapMatrix.translate(px + (containerWidth-textBitmapData.width) / 2, py + (ProgressHeight - textBitmapData.height) / 2-2);
var textField1: TextField = new TextField();
var format1:TextFormat = new TextFormat();
format1.color = 0x0b333c;
textField1.defaultTextFormat = format1;
textField1.text = "系统正在装载，请稍候
";
textField1.autoSize = TextFieldAutoSize.LEFT;
//Create a BitmapData object and take the Width and height of the TextField text.
var textBitmapData1: BitmapData = new BitmapData(textField1.textWidth + 5, textField1.textHeight);
//Set the BitmapData object background color to the background color of the progress bar
textBitmapData1.floodFill(0, 0, ProgressBarBackground);
//Draw the TextFiel object in the BitmapData object
textBitmapData1.draw(textField1);
//Construct the matrix object
//The matrix object is used to place the text
var textBitmapMatrix1: Matrix = new Matrix();
textBitmapMatrix1.translate(px, 2);
//Draw the sprite object on the parent BitmapData
bitmapData.draw(sprite);
//Draw the text on the parent BitmapData
bitmapData.draw(textBitmapData, textBitmapMatrix, null, null, null, false);
bitmapData.draw(textBitmapData1, textBitmapMatrix1, null, null, null, false);
//Draw the Logo
bitmapData.draw(Logo.bitmapData, null, null, null, null, true);
return bitmapData;
}
public function set ready(value: Boolean): void{
m_Ready = value;
this.visible = !value;
}
public function get ready(): Boolean{
return m_Ready;
}
public function set progress(value: Number): void{
m_Progress = value;
}
public function get progress(): Number{
return m_Progress;
}
}
}
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Graphics;
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Matrix;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import flash.utils.ByteArray;
import mx.controls.Label;
import mx.graphics.codec.PNGEncoder;
public class ProgressBar extends Loader
{
// Logo picture
[Embed(source="icon/loader.png")]
[Bindable]
private var logoClass: Class;
private var Logo: Bitmap;
private var m_Ready: Boolean;
private var m_Progress: Number;
private var m_BitmapData: BitmapData;
// Constant to change to fit your own layout
private static var ProgressWidth: int = 150; // Progress bar width
private static var PictureWidth: int = 48; // Logo picture width
private static var LeftMargin: int = 1; // Left Margin
private static var RightMargin: int = 1; // Right Margin
private static var Spacing: int = 10; // Spacing between logo and progress bar
private static var TopMargin: int = 1; // Top Margin
private static var BottomMargin: int = 1; // Bottom Margin
private static var PictureHeight: int = 48; // Logo picture height
private static var ProgressHeight: int = 12; // Progress bar height
private static var ProgressBarBackground: uint = 0xFFFFFF;
private static var progressBarOuterBorder: uint = 0x323232;
private static var ProgressBarColor: uint = 0xFF4707;
private static var ProgressBarInnerColor: uint = 0xFFFFFF;
public function ProgressBar(): void{
super();
m_Progress = 0;
Logo = new logoClass as Bitmap;
this.addEventListener(Event.RENDER, renderEventHandler);
}
private function renderEventHandler(event: Event): void{
}
public function refreshProgressBar(): void{
m_BitmapData = drawProgress(); // Create the bitmapdata object
var encoder: PNGEncoder = new PNGEncoder();
var byteArray: ByteArray = encoder.encode(m_BitmapData); // Encode the bitmapdata to a bytearray
this.loadBytes(byteArray); // Draw the bitmap on the loader object
}
public function getWidth(): Number{
return LeftMargin + PictureWidth + Spacing + ProgressWidth + RightMargin;
}
public function getHeight(): Number{
return TopMargin + PictureHeight + BottomMargin;
}
private function drawProgress(): BitmapData{
// Create the bitmap class object
var bitmapData: BitmapData = new BitmapData(getWidth(), getHeight(), true, 0);
// Draw the Progress Bar
var sprite: Sprite = new Sprite();
var graph: Graphics = sprite.graphics;
// Draw the progress bar background
graph.beginFill(ProgressBarBackground);
graph.lineStyle(1, progressBarOuterBorder, 1, true);
var containerWidth: Number = ProgressWidth;
var px: int = getWidth() - RightMargin - ProgressWidth;
var py: int = (getHeight() - ProgressHeight)*2/3;
graph.drawRoundRect(px, py, containerWidth, ProgressHeight, 0);
containerWidth -= 4;
var progressWidth: Number = containerWidth * m_Progress / 100;
graph.beginFill(ProgressBarColor);
graph.lineStyle(1, ProgressBarInnerColor, 1, true);
graph.drawRoundRect(px+1, py+1, progressWidth, ProgressHeight-2, 0);
//Construct the Text Field Object and put the progress value in it
var textField: TextField = new TextField();
//textField.background = true;
//textField.border = true;
var format:TextFormat = new TextFormat();
format.font = "Verdana";
format.color = 0x000000;
format.size = 10;
//format.bold = true;
textField.defaultTextFormat = format;
textField.text = m_Progress.toFixed(0) + "%";
//Create a BitmapData object and take the Width and height of the TextField text.
var textBitmapData: BitmapData = new BitmapData(textField.textWidth + 5, textField.textHeight);
//Set the BitmapData object background color to the background color of the progress bar
textBitmapData.floodFill(0, 0, ProgressBarBackground);
//Draw the TextFiel object in the BitmapData object
textBitmapData.draw(textField);
//Construct the matrix object
//The matrix object is used to place the text
var textBitmapMatrix: Matrix = new Matrix();
textBitmapMatrix.translate(px + (containerWidth-textBitmapData.width) / 2, py + (ProgressHeight - textBitmapData.height) / 2-2);
var textField1: TextField = new TextField();
var format1:TextFormat = new TextFormat();
format1.color = 0x0b333c;
textField1.defaultTextFormat = format1;
textField1.text = "系统正在装载，请稍候
";textField1.autoSize = TextFieldAutoSize.LEFT;
//Create a BitmapData object and take the Width and height of the TextField text.
var textBitmapData1: BitmapData = new BitmapData(textField1.textWidth + 5, textField1.textHeight);
//Set the BitmapData object background color to the background color of the progress bar
textBitmapData1.floodFill(0, 0, ProgressBarBackground);
//Draw the TextFiel object in the BitmapData object
textBitmapData1.draw(textField1);
//Construct the matrix object
//The matrix object is used to place the text
var textBitmapMatrix1: Matrix = new Matrix();
textBitmapMatrix1.translate(px, 2);
//Draw the sprite object on the parent BitmapData
bitmapData.draw(sprite);
//Draw the text on the parent BitmapData
bitmapData.draw(textBitmapData, textBitmapMatrix, null, null, null, false);
bitmapData.draw(textBitmapData1, textBitmapMatrix1, null, null, null, false);
//Draw the Logo
bitmapData.draw(Logo.bitmapData, null, null, null, null, true);
return bitmapData;
}
public function set ready(value: Boolean): void{
m_Ready = value;
this.visible = !value;
}
public function get ready(): Boolean{
return m_Ready;
}
public function set progress(value: Number): void{
m_Progress = value;
}
public function get progress(): Number{
return m_Progress;
}
}
}
2,修改你的Application的属性： preloader="com.preloader.Preloader"
3,运行应用，默认的loading已经变成你想要的效果了。
