根据网上找的一些资料,自定义了一个加载的进度条。
主要的功能就是在初始化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"
- 大小: 7 KB
分享到:
相关推荐
flex可自定义圆形加载进度条例子代码,非常好看的特效,只能用炫酷来形容,感兴趣就下载看看吧,用在自己的网站觉得吸引眼球!
Flex自定义加载条的一个小示例。里面有readMe文本
NULL 博文链接:https://hje.iteye.com/blog/413401
flex自定的加载进度条,替换flex Application的preloader。
www.iflex4.com制作 qq群:121987778 更多资料请访问网站。
flex的自定义加载器,代码都在里面.写的比较简单,一看就知道怎么做了.
flex自定义的预加载进度条动画的一个demo,非常使用。
flex 自定义组件,UI,flex 自定义组件。
flex自定义的树形结构,展开,收缩,多级目录支持
Flex 自定义ToolTip源代码,可以运行的源代码
研究Flex 组件声明周期,了解组件的生成步骤
Flex 4 进度条的皮肤 自己定义的进度条的皮肤 可以按自己的要求随便修改
flex 自定义右键菜单 多级右键菜单flex 自定义右键菜单 多级右键菜单flex 自定义右键菜单 多级右键菜单
Flex自定义组件和自定义事件的使用。 Flex自定义组件和自定义事件的使用。
Flex 自定义 时间 日历 控件
FLEX自定义等待图标资源 18个SWF资源,19个GIF资源
flex自定义组件事件DEMO,一个简单的flex自定义组件的demo
Flex自定义右键菜单
flex自定义创建css样式,很有用的资源··
FLex自定义写的控件,有时间,datagrid,tree,combox等,以及常用的处理字符串,弹出窗口