ZZ 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属性，

 

view plain copy to clipboard print ?

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

 

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

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

 

view plain copy to clipboard print ?

1. package com.ibsol.view   
2. {   
3.     import flash.display.Sprite;   
4.     import flash.events.Event;   
5.     import flash.events.ProgressEvent;   
6.     import flash.events.TimerEvent;   
7.     import flash.text.TextField;   
8.     import flash.utils.Timer;   
9.     import mx.events.FlexEvent;   
10.     import mx.preloaders.DownloadProgressBar;   
11.        
12.     public class Preloader extends DownloadProgressBar   
13.      {   
14.         //显示进度的文字   
15.         private var progressText:TextField;   
16.         //进度条   
17.         public var img:WelcomeScreen;   
18.         //logo页面   
19.         public var logo:WelcomeLogo;   
20.         private var _timer:Timer;   
21.            
22.         public function Preloader()   
23.          {   
24.             super();   
25.             //加入logo   
26.              logo = new WelcomeLogo();   
27.             this.addChild(logo);   
28.             //加入进度条   
29.              img = new WelcomeScreen();   
30.             this.addChild(img);   
31.             //加入进度文字   
32.              progressText = new TextField();   
33.              progressText.x = 40;   
34.              progressText.y = 90;   
35.             this.addChild(progressText);   
36.             //进度条计时器初始化，我们实现进度条的原理就是不停的刷新进图条图片   
37.             //因为每次进度条的长度不同，所以就有进度条在走的效果   
38.              _timer = new Timer(1);   
39.              _timer.addEventListener(TimerEvent.TIMER, drawTimerHandler);   
40.              _timer.start();   
41.          }   
42.         /**
43.           * override这个函数，来实现自己Preloader的设置，而不是用其默认的设置
44.           */  
45.          override public function set preloader(value:Sprite):void  
46.          {   
47.              value.addEventListener(ProgressEvent.PROGRESS, progHandler);   
48.              value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteHandler);   
49.             //在这里设置预载界面居中   
50.             //如果在初始化函数中设置，会有stageWidth和最终界面大小不一致的错误，而导致不能居中   
51.              x = (stageWidth/2) - (300/2);   
52.              y = (stageHeight/2) - (180/2);   
53.          }   
54.            
55.         private function progHandler(e:ProgressEvent):void  
56.          {   
57.             //计算进度，并且设置文字进度和进度条的进度。   
58.             var prog:Number = e.bytesLoaded/e.bytesTotal*100;   
59.              progressText.text = "已下载 " + String(int(prog)) + "%";   
60.             if(img)   
61.              {   
62.                  img.progress = prog;   
63.              }   
64.          }   
65.            
66.         private function compHandler(e:Event):void  
67.          {   
68.                
69.          }   
70.            
71.         private function initCompleteHandler(e:FlexEvent):void  
72.          {   
73.             //如果载入完毕，则停止刷新   
74.              img.ready = true;   
75.              _timer.stop();   
76.             //测试专用。下载完毕后，不马上跳到程序的默认界面。而是停顿10秒后再跳入。  
77.             var timer:Timer = new Timer(10000, 1);   
78.              timer.addEventListener(TimerEvent.TIMER, dispatchComplete);   
79.              timer.start();   
80.          }   
81.            
82.         private function initProgHandler(e:FlexEvent):void  
83.          {   
84.                
85.          }   
86.         /**
87.           * 一定要分发这个事件，来通知程序已经完全下载，可以进入程序的默认界面了
88.           */  
89.         private function dispatchComplete(event:TimerEvent):void  
90.          {   
91.             this.dispatchEvent(new Event(Event.COMPLETE));   
92.          }   
93.         /**
94.          * 每个时钟周期都刷新进度条图片
95.          */  
96.         private function drawTimerHandler(event:TimerEvent):void  
97.          {   
98.              img.refresh();   
99.          }   
100.   
101.      }   
102. }  

图片logo层的实现方式是

 

view plain copy to clipboard print ?

1. package com.ibsol.view   
2. {   
3.     import flash.display.Loader;   
4.     import flash.utils.ByteArray;   
5.        
6.     public class WelcomeLogo extends Loader   
7.      {   
8.          [Embed(source="assets/preloader.png", mimeType="application/octet-stream")]   
9.         public var WelcomeScreenGraphic:Class;   
10.         public function WelcomeLogo()   
11.          {   
12.             this.loadBytes(new WelcomeScreenGraphic() as ByteArray);   
13.          }   
14.   
15.      }   
16. }  

转载于:https://www.cnblogs.com/ternastone/archive/2010/12/06/1897641.html