当网络速度较慢时，如果在下载过程中界面没有任何的提示或变化，用户会感到烦躁，甚至抱怨开发商，这不是我们所希望的。进度条是很好的转移注意力的方式，它让用户感觉到程序在正常运转，可以耐心地等下去。
Preloader就是这样一个类，它负责监听Application、RSL和模块的下载和初始化进程的状态，包括对下载过程的监听，并且根据下载的状态生成相应的初始化进程事件，包括：
FlexEvent.INIT_PROGRESS
FlexEvent.INIT_COMPLETE
ProgressEvent.PROGRESS
Event.COMPLETE
Preloader 虽然发布初始化进程事件，但是并不直接显示初始化进程，而是把显示的工作交给一个显示类来完成，我们称这个类为加载显示类。SystemManager在 自己的initialize方法中会调用Preloader的initialize方法，并把加载显示类的类名作为参数值传递给Preloader。在默 认情况下，这个类被SystemManager指定为DownloadProgressBar（系统默认的进度条）。
如果我们在 mx:application标记中使用preloader属性指定加载显示类，那么指定的类名将作为参数传递给Preloader。Preloader 类在initialize方法中根据参数中获得的类名，创建加载显示类，初始化显示类的基本属性，并把自己赋值给加载显示类的preloader属性。
加 载显示类必须实现IPreloaderDisplay接口，这是Preloader类的要求，因为Preloader正是把加载显示类的实例强制转化为 IPreloaderDisplay接口来进行访问的。通过IPreloaderDisplay接口的方法，Preloader才能够完成对加载显示类的 基本属性的设置。这些属性包括backgroundImage和backgroundSize等，后面还会对IPreloaderDisplay接口详细 介绍。
有时候我们认为默认的加载显示类不能满足要求，希望实现更有特色的进度显示。我们可以通过三种方法改变加载显示类的表现形式：第 一，修改默认显示类进度条的属性；第二，监听加载进程事件，重新绘图；第三，重新实现IPreloaderDisplay接口。这三种方法需要重新编写代 码的工作量依次增加，当然，展现方式的自由度也依次增加了。
你也许会想，是否可以使用标记来修改进度条的属性呢？首先，没 有提供修改进度条的属性；其次，我们已经知道，preloader发生在第一帧，而Application和所有组件都是在第二帧初始化的。因此，即便能 够使用标记来修改进度条属性，那也是在第一帧的工作做完之后，而这时进度条已经不再显示了。所以，要想修改默认的Preloader显示类的行为，只能够 通过修改代码来完成。下面我们依次介绍改变预加载默认显示的三种方法。
1. 修改进度条的属性
预 加载的默认显示类是DownloadProgressBar（下载进度条），要修改下载进度条的显示形式，就要从默认的 DownloadProgressBar继承，然后修改其属性值，覆写该类的方法，最后将新的实现类指定给application的preloader属 性，从而实现不同风格的下载进度条。新建一个ActionScript类，从DownloadProgressBar继承，属性修改代码如代码清单3-1 所示。
代码清单3-1 修改进度条的属性
import flash.geom.Rectangle; import flash.text.TextFormat; import mx.graphics.RoundedRectangle; import mx.preloaders.DownloadProgressBar; public class MyDownProBar extends DownloadProgressBar { [Embed(source="bcgImage.jpg")] //进度条的背景图片 [Bindable] private var bcgImageClass: Class; public function MyDownProBar() { super(); downloadingLabel="下载中..."; //默认为 Loading initializingLabel="初始化中..." //默认为 Initializing showLabel=true; //是否显示标签，默认为true showPercentage=true; //是否显示下载百分比，默认为true } override public function get backgroundImage():Object{ return bcgImageClass; //背景图片 } override public function get backgroundSize():String{ return "30%"; //背景的尺寸，背景默认的尺寸是充满整个舞台的 } override public function get backgroundAlpha():Number{ return 0.5; //控件相对于背景的透明度 } //override public function get backgroundColor():uint //{ // return 0x00FF00; //背景颜色，设置背景颜色或图片只能选其一 //} //进度条边沿框的矩形区域（使进度条看起来是凹进去的） override protected function get barFrameRect():RoundedRectangle{ return new RoundedRectangle(14, 40, 154, 10); } //进度条的矩形区域 override protected function get barRect():RoundedRectangle { return new RoundedRectangle(14, 39, 154, 12, 0); } //外围边框的矩形区域（使进度条看起来在一个panel里） override protected function get borderRect():RoundedRectangle{ return new RoundedRectangle(0, 0, 182, 60, 10); } //label 的显示格式 override protected function get labelFormat():TextFormat{ var tf:TextFormat = new TextFormat(); tf.color = 0x333333; tf.font = "Verdana"; tf.size = 12; return tf; } //显示label的矩形区域 override protected function get labelRect():Rectangle{ return new Rectangle(14, 17, 100, 18); } //百分比的文字格式 override protected function get percentFormat():TextFormat{ var tf:TextFormat = new TextFormat(); tf.align = "right"; tf.color = 0x000000; tf.font = "Verdana"; tf.size = 12; return tf; } //显示百分比的矩形区域 override protected function get percentRect():Rectangle{ return new Rectangle(108, 4, 34, 16); } }
代码清单3-1中列出了可以修改的属性和可以覆写的方法，代码只是对部分属性的值做了修改，包括提示的字体以及进度条的高度。
注意 虽然backgroundImage、backgroundSize、backgroundAlpha以及backgroundColor都是public的属性，但是通过直接赋值的方法并不能起到作用，必须覆盖其get方法才能起作用。
背 景图片（backgroundImage）和背景颜色（backgroundColor）这两个属性不能同时设置，只能选其一。这两个属性的默认作用范围 是舞台（stage）的大小，可以通过覆写backgroundSize的get方法来控制背景图片和背景颜色的大小（相对于舞台的一个比例）。背景透明 度（backgroundAlpha）是指进度条相对于背景的透明度，也必须通过覆写get方法来修改。
注意，虽然Application也具有与上述相同的属性，但是DownloadProgressBar的上述属性是在第一帧显示的属性，而Application的上述属性是控制第二帧的显示。
在Application标记中添加属性preloader=“flex.sample.MyDownProBar”，编译运行Application，能看到修改后的进度条效果如图3-1所示，与默认的进度条（如图3-2所示）比较可以看出修改后的效果。
通过上述方法能够修改进度条的边框、背景图片、下载提示标签文本、初始提示标签文本，以及是否显示百分比等。但是，进度条的整体框架形式无法改变。如果想制作其他形式的进度条，需要采用另外两种方式。
2. 监听加载进程事件并重新绘图
为 了能够实现自己绘图，必须要能够处理加载进程的相关事件，包括下载进程事件、下载完毕事件、初始化开始事件和初始化结束事件等。这些事件都是由 preloader对象发送的，DownloadProgressBar类在设置自身的preloader属性时对这些事件进行监听。因此，为了能够实现 自行绘制进度条，就需要覆写DownloadProgressBar的preloader属性的set方法。具体实现如代码清单3-2所示。
代码清单3-2 监听加载进程事件
import flash.display.Graphics; import flash.display.Sprite; import flash.events.*; import flash.text.TextField; import mx.containers.Canvas; import mx.events.*; import mx.preloaders.DownloadProgressBar; public class MyDownProBar extends DownloadProgressBar { private var progressBar:Sprite; private var myLabel:TextField public function MyDownProBar(){ super(); myLabel=new TextField(); //创建显示信息的文本标签 myLabel.x=200; myLabel.y=200; addChild(myLabel); } //覆盖DownloadProgressBar方法，监听相关事件 override public function set preloader(s:Sprite):void{ s.addEventListener(ProgressEvent.PROGRESS,inProgress); s.addEventListener(Event.COMPLETE,complete); s.addEventListener(FlexEvent.INIT_COMPLETE,initComplete); s.addEventListener(FlexEvent.INIT_PROGRESS,initProgress); } //进程中自行绘图 private function inProgress(e:ProgressEvent): void{var barWidth:Number = e.bytesLoaded/e.bytesTotal*100; var g:Graphics = this.graphics; //绘图区域 g.clear(); g.beginFill(0x88ff22); g.drawRect(180,220, 100, 20); g.endFill(); g.beginFill(0xff9900); g.drawRect(180,220, barWidth, 20); g.endFill(); myLabel.text=String(int(barWidth))+ " %"; } private function complete(e:Event):void{ myLabel.text="下载完毕"; } private function initComplete(e:FlexEvent):void{ myLabel.text="初始化完毕" //初始完后要派发 Complete 事件，不然不会进入第二帧 dispatchEvent(new Event(Event.COMPLETE)); } private function initProgress(e:FlexEvent):void{ myLabel.text="初始化..."; //进度条开始加载的方法 } }
上述代码的实现效果，如图3-3所示。
实现的效果还是比较简陋的，毕竟关于绘图方面的代码很简单，要想实现赏心悦目的进度条，需要更多的绘图代码。
3. 重新实现IPreloaderDisplay接口
从 Sprite类继承，实现IpreloaderDisplay接口，相当于重新开发一个DownloadProgressBar。由于篇幅所限，本书不详 细讨论实现细节，只对实现的原理稍作讲解。首先，我们看一下IPreloaderDisplay要求实现的方法，如代码清单3-3所示。
代码清单3-3 IPreloaderDisplay接口
public interface IPreloaderDisplay extends IEventDispatcher { function get backgroundAlpha():Number; function set backgroundAlpha(value:Number):void; function get backgroundColor():uint; function set backgroundColor(value:uint):void; function get backgroundImage():Object; function set backgroundImage(value:Object):void; function get backgroundSize():String; function set backgroundSize(value:String):void; function get stageHeight():Number; //舞台高度 function set stageHeight(value:Number):void; function get stageWidth():Number; //舞台宽度 function set stageWidth(value:Number):void; function set preloader(obj:Sprite):void; function initialize():void; //进度条创 建后的初始化方法，配置进度条属性 }
可 以看到，代码中设置属性的方法就是我们在第一种实现方式中设置的属性，方法的实现可以参考代码清单3-1中的代码。而接口中preloader的set方 法的实现和第二种实现方式中的preloader的set方法的内容是基本一致的。通过监听下载和初始化事件，通过绘图实现自己的Preloader。通 过实现接口，可以更加自由地修改进度条的展示方式。
使用方法：
在Application里设置preloader属性，指向自定义的这个类即可