flex预加载器Preloader

Flex的预加载器为 mx.preloaders.Preloader ， Preloader 加载应用程序和 SystemManager 传入的 RSL 共享库以及资源模块， Preloader 并不包含加载器的界面，它是一个位置为 (0,0) 的空 Sprite ，采用 mx.preloaders.DownloadProgressBar 作为默认的皮肤。 Preloader 在加载过程中发送大量的事件， DownloadProgressBar 和 SystemManger 通过监听 Preloader 的事件显示加载进度和跳帧。 Application 中 preloader 属性可以更改 Preloader 使用的加载界面，默认路径为 mx.preloaders.DownloadProgressBar ，如果你指定其他类，这些类将代替 DownloadProgressBar 被编译到项目中。修改加载界面可以分为两种方式，一是修改默认预加载器样式，即设置 DownloadProgressBar 的属性，二是通过制定类名自定义预加载器皮肤， Preloader 作为功能类无需更改其逻辑。 Application 的 usePreloader:Boolean 属性可以禁用预加载器，但并不会改变 Flex 发布 swf 的结构， swf 依然被编译为 2 帧并且使用 Prelaoder 加载，只是不创建加载外观而已。

修改预加载器样式

 

    DownLoadProgressBar 提供了一些属性用于设置加载器样式，背景样式被声明为 public ，自定义加载界面后仍然可以设置这些属性，绘制的矢量界面和文本标签被声明为 protected ，自定义加载界面后将无法访问。

背景样式

       DownloadProgressBar 并不是只有中间显示的那个加载框，还拥有一个和舞台一样大小的背景色块， backgroundColor:uint,backgroundAlpha:Number 属性可以设置加载器的背景颜色和透明度， backgroundImage:String 和 backgroundSize:String 属性可以设置背景图片和大小， backgroundImage 可以是文件名或类名，设置为文件名后会自动使用内部的 Loader 加载背景图片，但加载背景图片会增加加载 swf 加载时间， backgroundSize 设置背景图片的缩放方式，如果为百分比，则 ”100%” 表示拉伸到背景图片到完整大小，为 ”auto” 表示图片保持大小不变。

      Preloader 在创建 DownLoadProgressBar 时会将背景设置为 Application 的背景颜色，然后调用 DownLoadProgressBar 的 initialize() 方法，我们可以通过覆盖 initiliaze() 方法更改背景设置，例如：

override public function initialize():void

{

        super.initialize();

        backgroundImage="chuyin30.jpg";

        backgroundAlpha=0.2;

}

加载框和加载条

borderRect:RoundedRectangle 可以修改加载框的大小，

barFrameRect:RoundedRectangle 和 barRect:RoundedRectangle 可以修改加载槽和加载条的大小。

这两个属性都是只读的，修改需要覆盖 get 属性。没有修改加载框和加载条颜色的属性，加载框默认为透明的灰色，要自定义加载框和加载条，需要自定义加载界面。

修改加载标签

默认情况下 DownloadProgressBar 只显示了提示标签而没有显示进度标签，我们可以通过 showPercentage:Boolean 属性启用进度标签， showLabel:Boolean 用于扩展显示自定义标签， labelRect:Retangle,labelFormat:TextFormat 修改提示标签的大小和格式， percentRect:Rectangel 和 percentFormat 属性设置进度文本的大小和格式。 label:String 属性为提示标签文本内容，加载应用程序时显示 downloadingLabel:String 属性的值，加载共享库时显示共享库的加载个数。

下图为修改过的 DownloadProgressBar 样式：

修改代码如下：

 

package

{

    import mx.graphics.RoundedRectangle;

    import mx.preloaders.DownloadProgressBar;

 

    public class DownloadProgressBar1 extends DownloadProgressBar

    {

 

        public function DownloadProgressBar1()

        {

           super();

        }

 

        override public function initialize():void

        {

           super.initialize();

           backgroundColor=0xAAAAAA;

           downloadingLabel="";

           showPercentage=true;

        }

       

       

        override protected function get borderRect():RoundedRectangle

        {

           return new RoundedRectangle(0, 0, 282, 80, 4);

        }

       

        override protected function get barFrameRect():RoundedRectangle

        {

           return new RoundedRectangle(14, 40, 254, 24);

        }

       

        override protected function get barRect():RoundedRectangle

        {

           return new RoundedRectangle(14, 39, 254, 26, 0);

        }

    }

}

 

将 DownloadProgressBar1 指定给 Application 的 preload 属性即可看到效果。

 

自定义加载界面

    修改 DownloadProgressBarPreloader 的样式往往不能满足项目高级需求，例如需要将应用程序和资源下载进行分段显示，自定义加载界面需必须实现 IPreloaderDisplay 接口，这个接口包括外观的背景设置，所处的舞台大小等属性，但 Flex 的框架决定了 IPreloaderDisplay 与 Preloader 的耦合度很高，重新编写界面不容易，更多的时候我们选择继承 DownLoadProgressBar 类来简化操作， DownLoadProgressBar 不仅实现 IPreloaderDisplay 接口，而且考虑的非常细致，例如加载所需的时间小于 700m 或启动进度超过总数的一半不显示加载界面。此外 DownLoadProgressBar 更是为我们扩展加载界面提供了有力的支持，某些方法定义了但内容却为空，这就是供我们扩展的提示。

DownloadProgressBar 中的加载框、加载条都是通过代码绘制的，这使得默认加载器的体积很小，绘制的代码在 createChildren() 方法中，而更改进度显示的代码在 setProgress() 方法中，这两个方法实现了显示和逻辑的分离，通过覆盖这两个方法定制自己的加载界面可以在不改变加载逻辑的方式下进行，下面我们让 Flex 使用使用 flash 绘制的界面作为加载器的皮肤：

1.    在 flash 中新建影片剪辑，绘制所需的界面，如图：

    将加载条命名为 progressBar ，进度文本命名为 progressText ，共享库进度条为 rslBar ，共享库文本为 rslText ，然后将元件导出为 ActionScript ，类名为 DownloadProgressBarDisplay ，将 fla 发布为 swc 导入 Flex 后便可以使用 flash 制作的素材了。

2.    覆盖定义

    覆盖定义之前我们要了解 DownloadProgressBar 内部一些实现，为了避免加载速度过快导致加载界面闪动一下就消失， createChildren() 方法在 700ms 后才被调用，如果你想一开始就显示加载界面可以在构造函数中创建界面，但创建的界面不会自动居中，需要自己设置，此时可以利用基类提供的 stageWidth:Number 和 stageHeight:Number 属性访问舞台尺寸，但这个两个属性只有在执行 createChildren() 方法时才变得准确。默认绘制的加载条把显示进度分割为两个阶段，第一个阶段是加载阶段，应用程序将和 rsl 共享库同时加载，第二个阶段是 Application 初始化阶段， DownloadProgressBar 使用属性 DOWNLOAD_PERCENTAGE:uint 进行百分比分割，你可以修改 DOWNLOAD_PERCENTAGE 更改默认进度条分割的百分比，也可以选择不进行分割、，下表为 DownloadProgressBar 对 Preload 添加的侦听器。

 

侦听器	说明
progressHandler(event:ProgressEvent):void	应用程序和共享库加载进度
rslProgressHandler(event:RSLEvent):void	rsl 加载进度
rslCompleteHandler(event:RSLEvent):void	rsl 加载完毕
rslErrorHandler(event:RSLEvent):void	rsl 加载出错
completeHandler(event:Event):void	应用程序和共享库加载完毕
initProgressHandler(event:Event):void	应用程序初始化进度

       progressHandler() 和 initProgressHandler() 都调用 setProgress() 方法设置进度， setProgress() 反映加载总数。 RSLEvent 既可以反映 rsl 共享库的加载进度又可以反映加载数量，通过覆盖 rsl 的侦听器可以单独为 rsl 创建进度条。

    通过对 DownloadProgressBar 的观察使我们了解到，要定制加载界面，起码要覆盖 createChildren() 和 setProgress() 这两个方法，其它方法可以自己选择覆盖， MyDownloadProgressBar 通过覆盖 createChildren() 和 setProgress() 方法引入 flash 制作的界面并且更新进度，如下：

 

package

{

    import flash.events.Event;

   

    import mx.events.RSLEvent;

    import mx.preloaders.DownloadProgressBar;

 

    public class MyDownloadProgressBar extends DownloadProgressBar

    {

        private var downloadDisplay:DownloadProgressBarDisplay;

       

       

        public function MyDownloadProgressBar()

        {

           super();

           downloadDisplay=new DownloadProgressBarDisplay();

        }

       

       

        override protected function createChildren():void

        {

           downloadDisplay.x=(stageWidth-downloadDisplay.width)/2;

           downloadDisplay.y=(stageHeight-downloadDisplay.height)/2;

           addChild(downloadDisplay);

        }

       

       

        override protected function rslProgressHandler(event:RSLEvent):void

        {

           downloadDisplay.rslText.text=" 共享库 "+"("+event.rslIndex+"/"+event.rslTotal+")";

           downloadDisplay.rslBar.scaleX=event.bytesLoaded/event.bytesTotal;

        }

       

       

        override protected function setProgress(completed:Number, total:Number):void

        {

           var per:Number=completed/total;

           downloadDisplay.progressBar.scaleX=per;

           downloadDisplay.progressText.text=(100*per).toFixed(0)+"%";

        }

    }

}

    我们在构造函数中创建了 flash 绘制的加载界面是避免 createChildren() 方法 70ms 后才执行而导致 rslProgressHandler 中无法访问 downloadDisplay 报错，由于 stageWidth 和 stageHeight 在 createChildren() 才能反映准确的舞台尺寸，因此在 createChildren() 中创建 sownloadDisplay 并且设置为舞台居中， rslProgressHandler 使用了独立的进度条反映 rsl 加载进度， setProgress() 反映总的加载进度。

3.    测试加载效果

    将 Flex 框架发布为共享库，然后再导入几个共享库一同进行测试，如下图：

    

 

    总加载进度会在加载过程中有跳跃的现象，这是因为同时加载应用程序 swf 和 rsl 时，无法一时间获取所有 rsl 的大小，而在 Application 初始化时发生跳动是因为我们没有进行百分比分割。自定义加载界面后， DownloadProgressBar 默认加载器的加载框和加载标签等样式变得没有意义，但加载背景仍然有效，我们仍然可以通过覆盖 initiliaze() 方法设置加载器的背景。

 

封装预加载器

如果能够将预加载器界面和代码封装到一个 swc 中，就可以让任何 Flex 工程使用，通过上面的例子修改如下：

1.    新建影片剪辑，放置 DownloadProgressBarDisplay 的实例，命名为 preloadBox

2.    在 flash 路径库中导入 Flex 的 framwork.swc

3.    取消 DownloadProgressBarDisplay 的导出

4.    将新影片剪辑导出为 MyDownloadProgressBar

MyDownloadProgressBar 元件绑定的代码 MyDownloadProgressBar.as 如下：

 

package

{

    import flash.events.Event;

   

    import mx.events.RSLEvent;

    import mx.preloaders.DownloadProgressBar;

 

    public class MyDownloadProgressBar extends DownloadProgressBar

    {

        public function MyDownloadProgressBar()

        {

           super();

           preloadBox.visible=false;

        }

       

       

        override protected function createChildren():void

        {

           x=(stageWidth-width)/2;

           y=(stageHeight-height)/2;

           preloadBox.visible=true;

        }

       

       

        override protected function rslProgressHandler(event:RSLEvent):void

        {

           preloadBox.rslText.text=" 共享库 "+"("+event.rslIndex+"/"+event.rslTotal+")";

           preloadBox.rslBar.scaleX=event.bytesLoaded/event.bytesTotal;

        }

       

       

        override protected function setProgress(completed:Number, total:Number):void

        {

           var per:Number=completed/total;

           preloadBox.progressBar.scaleX=per;

           preloadBox.progressText.text=(100*per).toFixed(0)+"%";

        }

    }

}

在 createChildren() 方法中显示加载界面一来符合基类 70ms 的逻辑，再者舞台大小在 createChildren() 才具备准确的数值。

欢迎访问Java学习者论坛：  http://www.javaxxz.com