Flex preloader

Flex 的默认的 Preloader, 平心而论，不是很好看。一个个性化的Preloader，基本上要包括三个部分。

1. 公司或者网站Logo，或者个性化的预载图片。好似是桌面软件的Splash Screen。

2. 载入数据的进度，文字形式的百分比。

3. 载入进度条。

preloader不像Flex项目中普通的部件可以通过CSS进行设置，是因为当程序初始载入时，CSS文件的设定还未被载入，所以不好通过CSS进行外观的控制。

这里有Ted把SWF，GIF 和 PNG 文件作为 Preloader 的教程。不过这里没有上述元素三合一的例子。

把网上的资料总结一下，这里放个三合一的例子。最终效果预览，

 

设置WEB程序的Preloader为自制的Preloader时，要修改主程序Application标签中的preloader属性，

 

<?xml version="1.0" encoding="utf-8"?>
 <MX:APPLICATION xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"preloader="com.ibsol.view.Preloader">
<MX:SCRIPT>
...</MX:SCRIPT></MX:APPLICATION>

 

这里的com.ibsol.view.Preloader是自定义Preloader类的路径。

Preloader要扩展DownloadProgressBar类才能设置自己的Preloader

 

package com.ibsol.view
{
     import flash.display.Sprite;
     import flash.events.Event;
     import flash.events.ProgressEvent;
     import flash.events.TimerEvent;
     import flash.text.TextField;
     import flash.utils.Timer;
     import mx.events.FlexEvent;
     import mx.preloaders.DownloadProgressBar;

     public class Preloader extends DownloadProgressBar
     {
         //显示进度的文字
         private var progressText:TextField;
         //进度条
         public var img:WelcomeScreen;
         //logo页面
         public var logo:WelcomeLogo;
         private var _timer:Timer;

         public function Preloader()
         {
             super();
             //加入logo
              logo = new WelcomeLogo();
             this.addChild(logo);
             //加入进度条
              img = new WelcomeScreen();
             this.addChild(img);
             //加入进度文字
              progressText = new TextField();
             progressText.x = 40;
             progressText.y = 90;
             this.addChild(progressText);
             //进度条计时器初始化，我们实现进度条的原理就是不停的刷新进图条图片
             //因为每次进度条的长度不同，所以就有进度条在走的效果
              _timer = new Timer(1);
             _timer.addEventListener(TimerEvent.TIMER, drawTimerHandler);
             _timer.start();
         }
         /**
          * override这个函数，来实现自己Preloader的设置，而不是用其默认的设置
          */
          override public function set preloader(value:Sprite):void
         {
             value.addEventListener(ProgressEvent.PROGRESS, progHandler);
             value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteHandler);
             //在这里设置预载界面居中
             //如果在初始化函数中设置，会有stageWidth和最终界面大小不一致的错误，而导致不能居中
             x = (stageWidth/2) - (300/2);
             y = (stageHeight/2) - (180/2);
         }

         private function progHandler(e:ProgressEvent):void
         {
             //计算进度，并且设置文字进度和进度条的进度。
             var prog:Number = e.bytesLoaded/e.bytesTotal*100;
              progressText.text = "已下载 " + String(int(prog)) + "%";
             if(img)
             {
                 img.progress = prog;
             }
         }

         private function compHandler(e:Event):void
         {

         }

         private function initCompleteHandler(e:FlexEvent):void
         {
             //如果载入完毕，则停止刷新
              img.ready = true;
             _timer.stop();
             //测试专用。下载完毕后，不马上跳到程序的默认界面。而是停顿10秒后再跳入。
             var timer:Timer = new Timer(10000, 1);
             timer.addEventListener(TimerEvent.TIMER, dispatchComplete);
             timer.start();
         }

         private function initProgHandler(e:FlexEvent):void
         {

         }
         /**
          * 一定要分发这个事件，来通知程序已经完全下载，可以进入程序的默认界面了
          */
         private function dispatchComplete(event:TimerEvent):void
         {
             this.dispatchEvent(new Event(Event.COMPLETE));
         }
         /**
         * 每个时钟周期都刷新进度条图片
         */
         private function drawTimerHandler(event:TimerEvent):void
         {
             img.refresh();
         }

     }
}

图片logo层的实现方式是

 

package com.ibsol.view
{
     import flash.display.Loader;
     import flash.utils.ByteArray;

     public class WelcomeLogo extends Loader
     {
          [Embed(source="assets/preloader.png", mimeType="application/octet-stream")]
         public var WelcomeScreenGraphic:Class;
         public function WelcomeLogo()
         {
             this.loadBytes(new WelcomeScreenGraphic() as ByteArray);
         }

     }
}

--------------------- 我可以操纵冰冷的代码，但我操纵不了我的人生......