自定义Flex应用在加载时的样式

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

 

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

   

    Preloader.as

 

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

 

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已经变成你想要的效果了。

评论

1 楼 haichuan11 2009-06-04  

部署到服务器上 用ie浏览器看 第一次运行 进度条有问题 调整了好几遍 最终放弃了