flex学习-----自定义加载动画

一、flex程序的生命周期：

      Flex程序从本质上讲，就是使用了（由AS编写的）Flex框架的Flash程序。但在Flex程序中可以忽略timeline这个概念，所有的内容都集于一帧。事实上Flex程序中的根，是继承flash.display.MovieClip的mx.managers.SystemManager。SystemManager有两帧。第一帧是预加载程序，第二帧是主程序。因此，所有程序在真正开始运行前，需要经过如下过程:
     1)   预初始(preinitialize):程序在这个过程后，已经被实例化，但还未创建任何内容。
     2)   初始化(initialize):程序在这个过程后，已创建好内容，但还未完成布局。
     3)   创建完成(creationComplete):程序在这个过程后，已完成包括布局在内的所有创建。

     在顺利完成以上3个过程后，SystemManager广播applicationComplete事件，意味着程序整装待发了。

     SystemManager还管理着所有显示在前端的内容。包括弹出窗，鼠标指针，工具提示等。

     SystemManager 有一个叫totelLevelSystemManager的属性。当Flex程序是一个独立程序时，该属性指向SystemManager的实例，而当 Flex程序是被加载到别的Flex程序时，该属性指向加载者的SystemManager实例。

     所有UIComponents都有一个systemManager的属性，指向程序的SystemManager实例。

二、预加载器：

     预加载器由SystemManager在第一帧自动创建，当完成后发布complete事件，并进入第二帧，再由SystemManager删除。

     除了complete以外，还有如下事件：
     progress：程序下载过程
     rslError：运行期共享库下载失败
     rslProgress：运行期共享库下载过程
     rslComplete：运行期共享库下载完成
     initProgress：程序初始化过程
     initComplete：程序初始化完成

三、Preloader:

     SystemManager使用Preloader类来监视Flex应用程序的下载和初使化状态，同时还负责下载运行时共享库(RSL),

     在使用时，Preloader类例示必须实现IPreloaderDisplay 接口的下载进度条，并将下载和初使化事件传递到下载进度栏。
四、Sprite：

     Sprite类是基本显示列表构造块：一个可显示图形并且也可包含子项的显示列表节点。
     Sprite对象与影片剪辑类似，但没有时间轴。Sprite是不需要时间轴的对象的相应基类。例如,Sprite将是通常不使用时间轴的用户界面 (UI) 组件的逻辑基类。

五、IPreloaderDisplay：

     定义类必须实现以用作下载进度栏的接口。IPreloaderDisplay从 Preloader 类接收事件，并负责向用户显示此信息。

六、关键代码：

      [Embed(source="icons/loading.swf", mimeType="application/octet-stream")] public class LoadingLogo extends ByteArray { public function LoadingLogo() { super(); } } public class CustomPreloader extends Sprite implements IPreloaderDisplay { public var _loadingLogo:LoadingLogo; private var dpbImageControl:Loader; private var _barSprite:Sprite; private var progressText:TextField; private var ProgressBarSpritIsAdded:Boolean = false; public function CustomPreloader() { super(); } //添加监听器 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); } //初始化 public function initialize():void { //添加logo图 dpbImageControl = new Loader(); dpbImageControl.contentLoaderInfo.addEventListener(Event.COMPLETE, loader_completeHandler); dpbImageControl.loadBytes(new LoadingLogo()); } //设置加载控件 private function loader_completeHandler(event:Event):void { addChild(dpbImageControl); dpbImageControl.width = 550; dpbImageControl.height= 60; dpbImageControl.x = this.stage.stageWidth/2 - 500; dpbImageControl.y = this.stage.stageHeight/2 - 240; } //设置进度条 private function addProgressBarSprit():void{ //绘制背景渐变 var matrix:Matrix=new Matrix(); matrix.createGradientBox(this.stage.stageWidth,this.stage.stageHeight,Math.PI/2); var colors:Array=[0x058BBD,0xFFFFFF]; var alphas:Array=[1,1]; var ratios:Array=[0,255]; this.graphics.lineStyle(); this.graphics.beginGradientFill(GradientType.LINEAR,colors,alphas,ratios,matrix); this.graphics.drawRect(0,0,this.stage.stageWidth,this.stage.stageHeight); this.graphics.endFill(); //绘制中心白色发光 var _Sprite1:Sprite = new Sprite(); addChild(_Sprite1); _Sprite1.graphics.beginFill(0xffffff,0.45); _Sprite1.graphics.drawEllipse(this.stage.stageWidth/2-130, this.stage.stageHeight/2-90, 280, 100); _Sprite1.graphics.endFill(); //滤镜实现发光边缘柔和 var blur:BlurFilter = new BlurFilter(); blur.blurX = 100; blur.blurY = 50; blur.quality = BitmapFilterQuality.HIGH; _Sprite1.filters = [blur]; //加载进度条文字 progressText = new TextField(); addChild(progressText); progressText.textColor = 0x333333; progressText.width = 300; progressText.height = 18; progressText.x = this.stage.stageWidth/2 - 140; 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(); var matrix:Matrix=new Matrix(); matrix.createGradientBox(300*(bytesLoaded/bytesTotal),16,Math.PI/2); var colors:Array=[0x0099CC,0x99cc77]; 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 handleProgress(event:ProgressEvent):void { //第一次处理时绘制进度条Sprit if (ProgressBarSpritIsAdded == false){ ProgressBarSpritIsAdded = true; addProgressBarSprit(); } if (progressText != null){ progressText.text = "loding..." + (event.bytesLoaded/event.bytesTotal) * 100 + "%"; } drawProgressBar(event.bytesLoaded, event.bytesTotal); } private function handleComplete(event:Event):void { Alert.show("1"); if (progressText != null){ progressText.text = "下载完成."; } drawProgressBar(1,1); } private function handleInitProgress(event:Event):void { if (progressText != null){ progressText.text = "正在初始化..."; } drawProgressBar(1,1); } private function handleInitComplete(event:Event):void { if (progressText != null){ progressText.text = "初始化完成."; } drawProgressBar(1,1); //0.03秒后抛出完成事件 var timer:Timer = new Timer(300,1); timer.addEventListener(TimerEvent.TIMER, dispatchComplete); timer.start(); } private function dispatchComplete(event:TimerEvent):void { dispatchEvent(new Event(Event.COMPLETE)); } }

 

 七、Loader：

      可用于加载 SWF 文件或图像（JPG、PNG 或 GIF）文件。使用 load() 方法来启动加载。被加载的显示对象将作为 Loader对象的子级添加。

使用 URLLoader 类加载文本或二进制数据。

八、ByteArray：

      提供用于优化读取、写入以及处理二进制数据的方法和属性。   

内存中的数据是一个压缩字节数组（数据类型的最紧凑表示形式），但可以使用标准 []（数组访问）运算符来操作ByteArray类的实例。也可以使用与 URLStream 和 Socket 类中的方法相类似的方法将它作为内存中的文件进行读取和写入。

 

九、简单说明：

      将应用程序的preloader属性设为自定义的加载动画类，SystemManager利用自定义的Preloader监视应用的加载与初使化。整个执行过程是：

      1) 应用程序加载初使化(initialize) 

      2) 自定义的Preloader监测到初使化事件，执行自己的initialize方法，初使化自己的组件。

      3) 执行set preloader(Sprite)方法，将应用的preloader设置为当前。给Preloader添加事件。

      4) 分别执行自定义的Preloader的初使化、初使化完成、下载完成方法。

      5) 触发应用程序创建完成事件