flex自定义加载进度条

根据网上找的一些资料，自定义了一个加载的进度条。
主要的功能就是在初始化flex界面时，显示当前要加载的组件个数，当前的加载进度，同时自定义一个进度条。


效果图：


原理就是重写DownloadProgressBar类中的方法。

主要代码:

package event.load
{
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.geom.Matrix;
import flash.text.TextField;

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

public class DownloadPrBar extends DownloadProgressBar
{

private var _barSprite:Sprite;
// 总进度（字节描述）
private var progressText:TextField;
// 总进度（进度条描述）
private var progressBarSpritIsAdded:Boolean = false;

public function DownloadPrBar()
{
super();

}


override public function set preloader(preloader:Sprite):void{

//Listen for 正在下载
preloader.addEventListener(ProgressEvent.PROGRESS, handleProgress);
//Listen for 下载完成
preloader.addEventListener(Event.COMPLETE, handleComplete);
//Listen for 正在初始化
preloader.addEventListener(FlexEvent.INIT_PROGRESS, handleInitProgress);
//Listen for 初始化完成
preloader.addEventListener(FlexEvent.INIT_COMPLETE, handleInitComplete);

// 预加载中
preloader.addEventListener(RSLEvent.RSL_PROGRESS, rslProgressr); 
// 预加载了
preloader.addEventListener(RSLEvent.RSL_COMPLETE, rslCompleteHandler); 
// 预加载出错（这些没写方法的，都是默认用了父类的方法）
preloader.addEventListener(RSLEvent.RSL_ERROR, rslErrorHandler);

}


//正在下载的进度
private function handleProgress(p:ProgressEvent):void {

}

// 预加载
protected function rslProgressr(r:RSLEvent):void
{
//第一次处理时绘制进度条Sprit
if (progressBarSpritIsAdded == false){
progressBarSpritIsAdded = true;
addProgressBarSprit();
}

var i:int = r.rslIndex + 1;
progressText.text = "第 " + i + " 个，共 " +r.rslTotal + " 个   当前进度：" + String(int(r.bytesLoaded/r.bytesTotal*100))+" %    " + r.bytesLoaded + " / " + r.bytesTotal + " byte"; ;

drawProgressBar(r.bytesLoaded, r.bytesTotal);
}



//
private function addProgressBarSprit():void{


//绘制进度条背景
var _Sprite2:Sprite = new Sprite();
addChild(_Sprite2);
_Sprite2.graphics.lineStyle(1, 0x8E388E);
_Sprite2.graphics.beginFill(0xD9D9D9);
_Sprite2.graphics.drawRect((this.stage.stageWidth/2 - 152), (this.stage.stageHeight/2 - 10), 304, 20);  
_Sprite2.graphics.endFill();

//-------------------------------------------------
//加载进度条Sprite
_barSprite = new Sprite();
addChild(_barSprite);
_barSprite.x = this.stage.stageWidth/2 - 150;
_barSprite.y = this.stage.stageHeight/2 - 8;

//-------------------------------------------------

//加载进度条文字
progressText = new TextField();
addChild(progressText);
progressText.textColor = 0x333333;
progressText.width = 300;
progressText.height = 18;
progressText.x = this.stage.stageWidth/2 - 152;
progressText.y = this.stage.stageHeight/2 + 20;
}


//刷新进度条
private function drawProgressBar(bytesLoaded:Number, bytesTotal:Number):void
{  
if (_barSprite != null && progressText != null){
var g:Graphics = _barSprite.graphics;
g.clear();
g.beginFill(0x008B00);
g.drawRect(0, 0, 300*(bytesLoaded/bytesTotal),16);
g.endFill();   

var matrix:Matrix=new Matrix();
matrix.createGradientBox(300*(bytesLoaded/bytesTotal),16,Math.PI/2);
var colors:Array=[0xDBDBDB,0xCDBA96];
var alphas:Array=[1,1];
var ratios:Array=[0,255];
g.lineStyle();
g.beginGradientFill(GradientType.LINEAR,colors,alphas,ratios,matrix);       
g.drawRect(0,0,300*(bytesLoaded/bytesTotal),16);
g.endFill(); 


}
}

private function handleComplete(e:Event):void{
progressText.text="下载完成 ！";
}
private function handleInitComplete(e:FlexEvent):void{
progressText.text="初始化完毕！";
//初始完后要派遣 Complete 事件，不然会停在这里，不会进入程序画面的
dispatchEvent(new Event(Event.COMPLETE));
}
private function handleInitProgress(e:FlexEvent):void{
progressText.text="开始初始化程序";
}



}
}


同时在自己的mxml页面中指定使用的加载类： preloader="event.load.DownloadPrBar"
大致如下：
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   preloader="event.load.DownloadPrBar"

评论

1 楼 从此醉 2014-02-23  

是最开始的那个白色加载页面吗