自定义DownloadProgressBar

最近在思考如何能够让自己的Flex(或者AS3)程序在初始化时更加漂亮，答案就是使用自定义preloader，即DownloadProgressBar，以下就是自定义DownloadProgressBar，这个自定义的DownloadProgressBar包括一个image和一个根据下载进度前进的进度条。先说说原理：）
1、首先你需要extends DownloadProgressBar。
2、使用Loader方法load进来一个image图片，例如png等格式，并addChild到DownloadProgressBar里面。
3、然后重写set proloader方法，这点很重要。
4、然后添加4个监听事件，并实现4个监听时间的具体方法和进一步操作
preloader.addEventListener(ProgressEvent.PROGRESS, myHandleProgress);
preloader.addEventListener(Event.COMPLETE, myHandleComplete);
preloader.addEventListener(FlexEvent.INIT_PROGRESS, myHandleInitProgress);
preloader.addEventListener(FlexEvent.INIT_COMPLETE, myHandleInitEnd);

5、preloader.addEventListener(ProgressEvent.PROGRESS, myHandleProgress); 这里可以得到bytesLoaded和bytesTotal的內容，
6，在使用graphics画一個長方形，并且这个长方形的长就是bytesLoaded/bytesTotal。这样就能实时显示下载进度。
package com.sheldon.pro.utils{
    import flash.display.*;
    import flash.events.*;
    import flash.filters.BitmapFilterQuality;
    import flash.filters.BlurFilter;
    import flash.geom.Matrix;
    import flash.net.*;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import mx.events.FlexEvent;
    import mx.preloaders.DownloadProgressBar;
    public class MyDownProBar extends DownloadProgressBar{
       private var logo: Loader;
       private var txt: TextField;
       private var _barSprite:Sprite;
       private var _preloader:Sprite;
       //private var ProgressBarSpritIsAdded:Boolean = false;
       public function MyDownProBar(){
           logo =  new Loader();
           logo.load(new URLRequest("assets/panelicon.png"));
           addChild(logo);
           var style : TextFormat = new TextFormat(null,null,0xFFFFFF,null,null,null,null,null,"center");
           txt = new TextField();
           txt.defaultTextFormat = style;
           txt.width = 200;
           txt.selectable = false;
           txt.height = 20;
           addChild(txt);
           super();
       }
       //重写preloader,让swf执行加载的时候~进行你希望的操作~
       override public function set preloader(value:Sprite):void{
           _preloader = value;
           //四个侦听~分别是 加载进度 / 加载完毕 / 初始化进度 / 初始化完毕
_preloader.addEventListener(ProgressEvent.PROGRESS,load_progress);
_preloader.addEventListener(Event.COMPLETE,load_complete);
_preloader.addEventListener(FlexEvent.INIT_PROGRESS,init_progress);
_preloader.addEventListener(FlexEvent.INIT_COMPLETE,init_complete);
           stage.addEventListener(Event.RESIZE,resize);
           resize(null);
       }
       private function remove():void{
_preloader.removeEventListener(ProgressEvent.PROGRESS,load_progress);
_preloader.removeEventListener(Event.COMPLETE,load_complete);

_preloader.removeEventListener(FlexEvent.INIT_PROGRESS,init_progress);_preloader.removeEventListener(FlexEvent.INIT_COMPLETE,init_complete);

           stage.removeEventListener(Event.RESIZE,resize);
       }
       private function resize(e:Event):void{
           logo.x = (stage.stageWidth -40)/2;
           logo.y = (stage.stageHeight - 80)/2-20;
           txt.x = (stage.stageWidth - 200)/2;
           txt.y = logo. y +65;
          
           graphics.clear();
           graphics.beginFill(0x333333);
           graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
           graphics.endFill();
       }
       private function load_progress(e : ProgressEvent):void{
           addProgressBarSprit();
           txt.text = "正在加载..."+int(e.bytesLoaded/e.bytesTotal*100)+"%";
           //txt.text = "已下载 " + e.bytesLoaded + " byte，总大小 " + e.bytesTotal + " byte.";
           drawProgressBar(e.bytesLoaded, e.bytesTotal);
           //if (txt != null){
              //txt.text = "下载进度：已下载 " + e.bytesLoaded + " byte，总大小 " + e.bytesTotal + " byte.";
           //}        
           //drawProgressBar(e.bytesLoaded, e.bytesTotal);
       }
       private function load_complete(e:Event):void{
           if(txt != null){
              txt.text = "加载完毕!";
           }
           drawProgressBar(1,1);
       }
       private function init_progress(e:FlexEvent):void{
           if(txt != null){
              txt.text ="正在初始化...";
           }
           drawProgressBar(1,1);
       }
       private function init_complete(e:FlexEvent):void{
           if(txt != null){
              txt.text = "初始化完毕!";
           }
           drawProgressBar(1,1);
           remove();
           //最后这个地方需要dpe一个Event.COMPLETE事件..表示加载完毕让swf继续操作~
           dispatchEvent(new Event(Event.COMPLETE));
       }
      
       private function addProgressBarSprit():void{
           //绘制背景渐变
           var matrix : Matrix = new Matrix();
           matrix.createGradientBox(this.stage.stageWidth,this.stage.stageHeight,Math.PI/2);
           var colors : Array=[0x05BBD,0xFFFFFF];
           var alphas : Array=[1,1];
           var ratios : Array=[0,255];
           this.graphics.lineStyle();
           this.graphics.beginGradientFill(GradientType.LINEAR,colors,alphas,ratios,matrix);
           this.graphics.drawRect(0,0,this.stage.stageWidth,this.stage.stageHeight);
           this.graphics.endFill();
          
           //绘制中心白色发光
           var _Sprite1 : Sprite = new Sprite();
           addChild(_Sprite1);
           _Sprite1.graphics.beginFill(0xffffff,0.45);
       _Sprite1.graphics.drawEllipse(this.stage.stageWidth/2-145,this.stage.stageHeight/2-105,280,100);
           _Sprite1.graphics.endFill();
           //滤镜实现发光边缘柔和
           var blur : BlurFilter = new BlurFilter();
           blur.blurX = 100;
           blur.blurY = 50;
           blur.quality = BitmapFilterQuality.HIGH;
           _Sprite1.filters = [blur];
          
           //绘制进度条背景
           var _Sprite2:Sprite = new Sprite();
           addChild(_Sprite2);
           _Sprite2.graphics.lineStyle(1,0xCCCCCC);
           _Sprite2.graphics.beginFill(0xFFFFFF);
           _Sprite2.graphics.drawRect(this.stage.stageWidth/2-165,this.stage.stageHeight/2 -23,304,20);
           _Sprite2.graphics.endFill();
          
           //--------------------------------
           //加载进度条Sprite
           _barSprite = new Sprite();
           addChild(_barSprite);
           _barSprite.x = this.stage.stageWidth/2 -163;
           _barSprite.y = this.stage.stageHeight/2 -21;
          
           //---------------------------------
           //加载进度条文字
//         txt = new TextField();
//         addChild(txt);
//         txt.textColor = 0x333333;
//         txt.width = 300;
//         txt.height = 18;
//         txt.x = this.stage.stageWidth/2-152;
//         txt.y = this.stage.stageHeight/2 + 20;
       }
      
       //刷新进度条
       private function drawProgressBar(bytesLoader:Number,bytesTotal:Number):void{
           if(_barSprite != null && txt !=null){
              var g:Graphics = _barSprite.graphics;
              g.clear();
             
              var matrix : Matrix = new Matrix();
              matrix.createGradientBox(300*(bytesLoader/bytesTotal),16,Math.PI/2);
              var colors : Array = [0x0099CC,0x99cc77];
              var alphas:Array=[1,1];
              var ratios : Array = [0,255];
              g.lineStyle();
              g.beginGradientFill(GradientType.LINEAR,colors,alphas,ratios,matrix);
              g.drawRect(0,0,300*(bytesLoader/bytesTotal),16);
              g.endFill();
           }  
       }
    }
}



Flex4中应用这个自定义的DownloadProgressBar.as

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:ho="library://ns.adobe.com/flex/halo"
              xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
           preloader="com.sheldon.pro.utils.MyDownProBar">

</s:Application>

评论

1 楼 chensong215 2015-04-29  

无法获取到ProgressEvent中的bytesTotal