• 修改flex应用默认的装载界面 (转载)


        flex应用看久了,一个默认的装载loading界面就会导致审美疲劳,下面提供一种方法,让你可以自定义你的装载界面。

         

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

    转自:http://www.cnblogs.com/taobataoma/archive/2008/12/19/1358003.html

  • 相关阅读:
    artTemplate的使用总结
    死锁的简单实现
    代理模式
    装饰器模式
    建造者模式
    工厂模式
    单例模式
    linux查看日志内容
    系统信息及系统操作
    设计模式-建造者模式
  • 原文地址:https://www.cnblogs.com/wuhenke/p/1642738.html
Copyright © 2020-2023  润新知