自定义Flex在初始加载时的样式

看见很多flex站点都应用了自定义的装载页面，网上搜索了一下，找到了一个方案。

 

1，在src目录下建立自定义类，两个文件代码如下：

   

    Preloader.as

 

1. package com.preloader   
2. {   
3.     import mx.preloaders.DownloadProgressBar;   
4.     import flash.display.Sprite;   
5.     import flash.events.ProgressEvent;   
6.     import flash.events.Event;   
7.     import mx.events.FlexEvent;   
8.     import mx.managers.SystemManager;   
9.     import mx.managers.BrowserManager;   
10.     import flash.utils.Timer;   
11.     import flash.events.TimerEvent;   
12.            
13.     public class Preloader extends DownloadProgressBar   
14.     {   
15.         public var m_Progress: ProgressBar;   
16.         private var m_Timer: Timer;   
17.            
18.         public function Preloader(): void{   
19.             super();   
20.             var browser: BrowserManager;   
21.             m_Progress = new ProgressBar;               
22.             this.addChild(m_Progress);   
23.             m_Timer = new Timer(1);   
24.             m_Timer.addEventListener(TimerEvent.TIMER, timerEventHandler);   
25.             m_Timer.start();   
26.         }   
27.         override public function set preloader(value:Sprite):void{   
28.             value.addEventListener(ProgressEvent.PROGRESS, progressEventHandler);   
29.             value.addEventListener(Event.COMPLETE, completeEventHandler);   
30.             value.addEventListener(FlexEvent.INIT_PROGRESS, initProgressEventHandler);   
31.             value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteEventHandler);               
32.         }           
33.         private function progressEventHandler(event: ProgressEvent): void{   
34.             var progress: Number = event.bytesLoaded / event.bytesTotal * 100;   
35.             if (m_Progress){   
36.                 m_Progress.progress = progress;   
37.             }   
38.         }   
39.         private function timerEventHandler(event: TimerEvent): void{   
40.             this.stage.addChild(this);   
41.             var width: Number = this.stage.stageWidth * 40 / 100; // Get 40% for the Stage width   
42.             // Set the Position of the Progress bar to the middle of the screen   
43.             m_Progress.x = (this.stage.stageWidth - m_Progress.getWidth()) / 2;   
44.             m_Progress.y = (this.stage.stageHeight - m_Progress.getHeight()) / 2;   
45.             m_Progress.refreshProgressBar();   
46.         }   
47.         private function completeEventHandler(event: Event): void{   
48.             var i: int = 0;   
49.         }   
50.         private function initProgressEventHandler(event: FlexEvent): void{   
51.             var i: int = 0;   
52.         }   
53.         private function initCompleteEventHandler(event: FlexEvent): void{   
54.             m_Progress.ready = true;   
55.             m_Timer.stop();   
56.             this.dispatchEvent(new Event(Event.COMPLETE));   
57.         }   
58.     }   
59. }  

package com.preloader  {      import mx.preloaders.DownloadProgressBar;      import flash.display.Sprite;      import flash.events.ProgressEvent;      import flash.events.Event;      import mx.events.FlexEvent;      import mx.managers.SystemManager;      import mx.managers.BrowserManager;      import flash.utils.Timer;      import flash.events.TimerEvent;                public class Preloader extends DownloadProgressBar      {          public var m_Progress: ProgressBar;          private var m_Timer: Timer;                    public function Preloader(): void{              super();              var browser: BrowserManager;              m_Progress = new ProgressBar;                          this.addChild(m_Progress);              m_Timer = new Timer(1);              m_Timer.addEventListener(TimerEvent.TIMER, timerEventHandler);              m_Timer.start();          }          override public function set preloader(value:Sprite):void{              value.addEventListener(ProgressEvent.PROGRESS, progressEventHandler);              value.addEventListener(Event.COMPLETE, completeEventHandler);              value.addEventListener(FlexEvent.INIT_PROGRESS, initProgressEventHandler);              value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteEventHandler);                      }                  private function progressEventHandler(event: ProgressEvent): void{              var progress: Number = event.bytesLoaded / event.bytesTotal * 100;              if (m_Progress){                  m_Progress.progress = progress;              }          }          private function timerEventHandler(event: TimerEvent): void{              this.stage.addChild(this);              var width: Number = this.stage.stageWidth * 40 / 100; // Get 40% for the Stage width              // Set the Position of the Progress bar to the middle of the screen              m_Progress.x = (this.stage.stageWidth - m_Progress.getWidth()) / 2;              m_Progress.y = (this.stage.stageHeight - m_Progress.getHeight()) / 2;              m_Progress.refreshProgressBar();          }          private function completeEventHandler(event: Event): void{              var i: int = 0;          }          private function initProgressEventHandler(event: FlexEvent): void{              var i: int = 0;          }          private function initCompleteEventHandler(event: FlexEvent): void{              m_Progress.ready = true;              m_Timer.stop();              this.dispatchEvent(new Event(Event.COMPLETE));          }      }  }    

 

ProgressBar.as

 

1. package com.preloader   
2. {       
3.     import flash.display.Bitmap;   
4.     import flash.display.BitmapData;   
5.     import flash.display.Graphics;   
6.     import flash.display.Loader;   
7.     import flash.display.Sprite;   
8.     import flash.events.Event;   
9.     import flash.geom.Matrix;   
10.     import flash.text.TextField;   
11.     import flash.text.TextFormat;   
12.     import flash.text.TextFieldAutoSize;   
13.     import flash.utils.ByteArray;   
14.        
15.     import mx.controls.Label;   
16.     import mx.graphics.codec.PNGEncoder;   
17.        
18.     public class ProgressBar extends Loader   
19.     {   
20.         // Logo picture   
21.         [Embed(source="icon/loader.png")]   
22.         [Bindable]   
23.         private var logoClass: Class;           
24.         private var Logo: Bitmap;   
25.            
26.         private var m_Ready: Boolean;   
27.         private var m_Progress: Number;   
28.         private var m_BitmapData: BitmapData;   
29.   
30.         // Constant to change to fit your own layout   
31.         private static var ProgressWidth: int = 150; // Progress bar width   
32.         private static var PictureWidth: int = 48;  // Logo picture width   
33.         private static var LeftMargin: int = 1;      // Left Margin   
34.         private static var RightMargin: int = 1;     // Right Margin   
35.         private static var Spacing: int = 10;        // Spacing between logo and progress bar   
36.         private static var TopMargin: int = 1;       // Top Margin   
37.         private static var BottomMargin: int = 1;    // Bottom Margin   
38.         private static var PictureHeight: int = 48; // Logo picture height   
39.         private static var ProgressHeight: int = 12; // Progress bar height   
40.            
41.         private static var ProgressBarBackground: uint = 0xFFFFFF;   
42.         private static var progressBarOuterBorder: uint = 0x323232;   
43.         private static var ProgressBarColor: uint = 0xFF4707;   
44.         private static var ProgressBarInnerColor: uint = 0xFFFFFF;   
45.            
46.         public function ProgressBar(): void{   
47.             super();   
48.             m_Progress = 0;   
49.             Logo = new logoClass as Bitmap;   
50.             this.addEventListener(Event.RENDER, renderEventHandler);   
51.         }   
52.         private function renderEventHandler(event: Event): void{   
53.                
54.         }   
55.         public function refreshProgressBar(): void{               
56.             m_BitmapData = drawProgress(); // Create the bitmapdata object   
57.             var encoder: PNGEncoder = new PNGEncoder();   
58.             var byteArray: ByteArray = encoder.encode(m_BitmapData); // Encode the bitmapdata to a bytearray   
59.             this.loadBytes(byteArray); // Draw the bitmap on the loader object   
60.         }           
61.         public function getWidth(): Number{   
62.             return LeftMargin + PictureWidth + Spacing + ProgressWidth + RightMargin;   
63.         }   
64.         public function getHeight(): Number{   
65.             return TopMargin + PictureHeight + BottomMargin;   
66.         }   
67.         private function drawProgress(): BitmapData{   
68.             // Create the bitmap class object   
69.             var bitmapData: BitmapData = new BitmapData(getWidth(), getHeight(), true, 0);   
70.                
71.             // Draw the Progress Bar   
72.             var sprite: Sprite = new Sprite();   
73.             var graph: Graphics = sprite.graphics;   
74.                
75.             // Draw the progress bar background   
76.             graph.beginFill(ProgressBarBackground);   
77.             graph.lineStyle(1, progressBarOuterBorder, 1, true);   
78.             var containerWidth: Number = ProgressWidth;   
79.             var px: int = getWidth() - RightMargin - ProgressWidth;   
80.             var py: int = (getHeight() - ProgressHeight)*2/3;   
81.             graph.drawRoundRect(px, py, containerWidth, ProgressHeight, 0);   
82.             containerWidth -= 4;   
83.             var progressWidth: Number = containerWidth * m_Progress / 100;   
84.             graph.beginFill(ProgressBarColor);   
85.             graph.lineStyle(1, ProgressBarInnerColor, 1, true);   
86.             graph.drawRoundRect(px+1, py+1, progressWidth, ProgressHeight-2, 0);   
87.   
88.             //Construct the Text Field Object and put the progress value in it   
89.             var textField: TextField = new TextField();   
90.             //textField.background = true;   
91.             //textField.border = true;   
92.             var format:TextFormat = new TextFormat();   
93.             format.font = "Verdana";   
94.             format.color = 0x000000;   
95.             format.size = 10;   
96.             //format.bold = true;   
97.             textField.defaultTextFormat = format;   
98.             textField.text = m_Progress.toFixed(0) + "%";   
99.             //Create a BitmapData object and take the Width and height of the TextField text.   
100.             var textBitmapData: BitmapData = new BitmapData(textField.textWidth + 5, textField.textHeight);   
101.             //Set the BitmapData object background color to the background color of the progress bar   
102.             textBitmapData.floodFill(0, 0, ProgressBarBackground);   
103.             //Draw the TextFiel object in the BitmapData object   
104.             textBitmapData.draw(textField);   
105.             //Construct the matrix object   
106.             //The matrix object is used to place the text               
107.             var textBitmapMatrix: Matrix = new Matrix();               
108.             textBitmapMatrix.translate(px + (containerWidth-textBitmapData.width) / 2, py + (ProgressHeight - textBitmapData.height) / 2-2);   
109.   
110.             var textField1: TextField = new TextField();   
111.             var format1:TextFormat = new TextFormat();   
112.             format1.color = 0x0b333c;   
113.             textField1.defaultTextFormat = format1;   
114.             textField1.text = "系统正在装载，请稍候";   
115.             textField1.autoSize = TextFieldAutoSize.LEFT;   
116.             //Create a BitmapData object and take the Width and height of the TextField text.   
117.             var textBitmapData1: BitmapData = new BitmapData(textField1.textWidth + 5, textField1.textHeight);   
118.             //Set the BitmapData object background color to the background color of the progress bar   
119.             textBitmapData1.floodFill(0, 0, ProgressBarBackground);   
120.             //Draw the TextFiel object in the BitmapData object   
121.             textBitmapData1.draw(textField1);   
122.             //Construct the matrix object   
123.             //The matrix object is used to place the text               
124.             var textBitmapMatrix1: Matrix = new Matrix();               
125.             textBitmapMatrix1.translate(px, 2);   
126.   
127.             //Draw the sprite object on the parent BitmapData   
128.             bitmapData.draw(sprite);   
129.                
130.             //Draw the text on the parent BitmapData    
131.             bitmapData.draw(textBitmapData, textBitmapMatrix, null, null, null, false);   
132.             bitmapData.draw(textBitmapData1, textBitmapMatrix1, null, null, null, false);   
133.                
134.             //Draw the Logo   
135.             bitmapData.draw(Logo.bitmapData, null, null, null, null, true);   
136.             return bitmapData;                       
137.         }           
138.         public function set ready(value: Boolean): void{   
139.             m_Ready = value;               
140.             this.visible = !value;               
141.         }   
142.         public function get ready(): Boolean{   
143.             return m_Ready;               
144.         }   
145.         public function set progress(value: Number): void{   
146.             m_Progress = value;               
147.         }   
148.         public function get progress(): Number{   
149.             return m_Progress;   
150.         }           
151.     }   
152. }  

package com.preloader  {          import flash.display.Bitmap;      import flash.display.BitmapData;      import flash.display.Graphics;      import flash.display.Loader;      import flash.display.Sprite;      import flash.events.Event;      import flash.geom.Matrix;      import flash.text.TextField;      import flash.text.TextFormat;      import flash.text.TextFieldAutoSize;      import flash.utils.ByteArray;            import mx.controls.Label;      import mx.graphics.codec.PNGEncoder;            public class ProgressBar extends Loader      {          // Logo picture          [Embed(source="icon/loader.png")]          [Bindable]          private var logoClass: Class;                  private var Logo: Bitmap;                    private var m_Ready: Boolean;          private var m_Progress: Number;          private var m_BitmapData: BitmapData;            // Constant to change to fit your own layout          private static var ProgressWidth: int = 150; // Progress bar width          private static var PictureWidth: int = 48;  // Logo picture width          private static var LeftMargin: int = 1;      // Left Margin          private static var RightMargin: int = 1;     // Right Margin          private static var Spacing: int = 10;        // Spacing between logo and progress bar          private static var TopMargin: int = 1;       // Top Margin          private static var BottomMargin: int = 1;    // Bottom Margin          private static var PictureHeight: int = 48; // Logo picture height          private static var ProgressHeight: int = 12; // Progress bar height                    private static var ProgressBarBackground: uint = 0xFFFFFF;          private static var progressBarOuterBorder: uint = 0x323232;          private static var ProgressBarColor: uint = 0xFF4707;          private static var ProgressBarInnerColor: uint = 0xFFFFFF;                    public function ProgressBar(): void{              super();              m_Progress = 0;              Logo = new logoClass as Bitmap;              this.addEventListener(Event.RENDER, renderEventHandler);          }          private function renderEventHandler(event: Event): void{                        }          public function refreshProgressBar(): void{                          m_BitmapData = drawProgress(); // Create the bitmapdata object              var encoder: PNGEncoder = new PNGEncoder();              var byteArray: ByteArray = encoder.encode(m_BitmapData); // Encode the bitmapdata to a bytearray              this.loadBytes(byteArray); // Draw the bitmap on the loader object          }                  public function getWidth(): Number{              return LeftMargin + PictureWidth + Spacing + ProgressWidth + RightMargin;          }          public function getHeight(): Number{              return TopMargin + PictureHeight + BottomMargin;          }          private function drawProgress(): BitmapData{              // Create the bitmap class object              var bitmapData: BitmapData = new BitmapData(getWidth(), getHeight(), true, 0);                            // Draw the Progress Bar              var sprite: Sprite = new Sprite();              var graph: Graphics = sprite.graphics;                            // Draw the progress bar background              graph.beginFill(ProgressBarBackground);              graph.lineStyle(1, progressBarOuterBorder, 1, true);              var containerWidth: Number = ProgressWidth;              var px: int = getWidth() - RightMargin - ProgressWidth;              var py: int = (getHeight() - ProgressHeight)*2/3;              graph.drawRoundRect(px, py, containerWidth, ProgressHeight, 0);              containerWidth -= 4;              var progressWidth: Number = containerWidth * m_Progress / 100;              graph.beginFill(ProgressBarColor);              graph.lineStyle(1, ProgressBarInnerColor, 1, true);              graph.drawRoundRect(px+1, py+1, progressWidth, ProgressHeight-2, 0);                //Construct the Text Field Object and put the progress value in it              var textField: TextField = new TextField();              //textField.background = true;              //textField.border = true;              var format:TextFormat = new TextFormat();              format.font = "Verdana";              format.color = 0x000000;              format.size = 10;              //format.bold = true;              textField.defaultTextFormat = format;              textField.text = m_Progress.toFixed(0) + "%";              //Create a BitmapData object and take the Width and height of the TextField text.              var textBitmapData: BitmapData = new BitmapData(textField.textWidth + 5, textField.textHeight);              //Set the BitmapData object background color to the background color of the progress bar              textBitmapData.floodFill(0, 0, ProgressBarBackground);              //Draw the TextFiel object in the BitmapData object              textBitmapData.draw(textField);              //Construct the matrix object              //The matrix object is used to place the text                          var textBitmapMatrix: Matrix = new Matrix();                          textBitmapMatrix.translate(px + (containerWidth-textBitmapData.width) / 2, py + (ProgressHeight - textBitmapData.height) / 2-2);                var textField1: TextField = new TextField();              var format1:TextFormat = new TextFormat();              format1.color = 0x0b333c;              textField1.defaultTextFormat = format1;              textField1.text = "系统正在装载，请稍候";              textField1.autoSize = TextFieldAutoSize.LEFT;              //Create a BitmapData object and take the Width and height of the TextField text.              var textBitmapData1: BitmapData = new BitmapData(textField1.textWidth + 5, textField1.textHeight);              //Set the BitmapData object background color to the background color of the progress bar              textBitmapData1.floodFill(0, 0, ProgressBarBackground);              //Draw the TextFiel object in the BitmapData object              textBitmapData1.draw(textField1);              //Construct the matrix object              //The matrix object is used to place the text                          var textBitmapMatrix1: Matrix = new Matrix();                          textBitmapMatrix1.translate(px, 2);                //Draw the sprite object on the parent BitmapData              bitmapData.draw(sprite);                            //Draw the text on the parent BitmapData               bitmapData.draw(textBitmapData, textBitmapMatrix, null, null, null, false);              bitmapData.draw(textBitmapData1, textBitmapMatrix1, null, null, null, false);                            //Draw the Logo              bitmapData.draw(Logo.bitmapData, null, null, null, null, true);              return bitmapData;                              }                  public function set ready(value: Boolean): void{              m_Ready = value;                          this.visible = !value;                      }          public function get ready(): Boolean{              return m_Ready;                      }          public function set progress(value: Number): void{              m_Progress = value;                      }          public function get progress(): Number{              return m_Progress;          }              }  }    

 

 

     2,修改你的Application的属性： preloader="com.preloader.Preloader"

     3,运行应用，默认的loading已经变成你想要的效果了。

 

转自：http://michaeltangbin.javaeye.com/blog/338254