码迷,mamicode.com
首页 > 其他好文 > 详细

loading问题

时间:2014-11-19 12:10:05      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:style   io   ar   color   os   使用   sp   for   文件   

以前看到各式各样的Flash启动时的进度条和各式动态显示,就想自己定义一个可以完全自定义的Preloader。

Google了一下,好像很简单的样子,可实际一操作,还是遇到一些问题。
首先要完全自定义,只要实现mx.preloaders.IPreloaderDisplay, 然后自定义Listener监听下载
进度就可以了。道理很简单,但实际做来和自己的想像就不一样了。主要的监听有一下几个:
      value.addEventListener(FlexEvent.INIT_PROGRESS, initProgressHandler);
      value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteHandler);
      value.addEventListener(ProgressEvent.PROGRESS, progressHandler);
我以为把进度处理的代码放到progressHandler里面就可以了,因为ProgressEvent里面包含了bytesLoaded和
bytesTotal,这样就可以计算进度了。但我发现progressHandler每次只进入两次,而且bytesLoaded都是等于bytesTotal的,就是说没有进度了,一次就装入了。我以为是我的swf文件太小,我手工使用embbed font的方法
加大swf文件大小,加到了30M左右,仍然一次就装入了,哦,我的my god。
另外一方面,INIT_PROGRESS我以为只会执行一次的,反而执行了多次。而且,执行顺序是:
PROGRESS两次
INIT_PROGRESS十次
INIT_COMPLETE一次
So, 说明只能使用INIT_PROGRESS来定义进度,反而PROGRESS来进行初始化操作。
另外还有两个要点:
1. 要在initComplete里面 dispatchEvent(new Event(Event.COMPLETE)); 
    否则Preloader完了以后进入不了应用。
2. 我尝试在Sprite里面直接addChild ProgressBar,直接用Skin来定义ProgressBar,岂不是很简单。
    但没有成功。Preloader里面的进度条要自己用graphics直接画出来。
3. 用initProgress来定义进度,我用12来定义进度的总数。Google上的回答是建议用20左右的总数来定义,
   因为虽然实际只有10个左右,但最后会很快的闪过,所以没有关系。
 
下面是全部的代码,希望有人可以用到:
package assets.preloader {
  import mx.preloaders.*; 
  import flash.events.*;
  import mx.events.*;
  import mx.core.BitmapAsset;
  import flash.display.*;
  import flash.utils.*;
  import flash.net.URLRequest;
  import spark.components.Label;
  import flash.text.TextField;
  import flash.text.TextFormat;
  import flash.geom.Matrix;
  import spark.effects.Fade;
  import spark.effects.Wipe;
 
  public class MyPreloader extends Sprite implements IPreloaderDisplay {
    private var progressCount:int;
 
    private static var progressTotal:int = 11;
 
    public function MyPreloader() {   
      super();
 
      progressCount = 0;
    }
 
    private var _backgroundAlpha:Number = 1;
 
    public function get backgroundAlpha():Number {
      if ( !isNaN(_backgroundAlpha) )
        return _backgroundAlpha;
      else
        return 1;
    }
    
    public function set backgroundAlpha(value:Number):void {
      _backgroundAlpha = value;
    }
 
    private var _backgroundColor:uint;
 
    public function get backgroundColor():uint {
      return _backgroundColor;
    }
 
    public function set backgroundColor(value:uint):void {
      _backgroundColor = value;
    }
 
    private var _backgroundImage:Object;
 
    public function get backgroundImage():Object {
      return _backgroundImage;
    }
    
    public function set backgroundImage(value:Object):void {
      _backgroundImage = value;
    }
 
    private var _backgroundSize:String = "";
 
    public function get backgroundSize():String {
      return _backgroundSize;
    }
    
    public function set backgroundSize(value:String):void {
      _backgroundSize = value;
    }
 
    private var _stageHeight:Number = 375;
 
    public function get stageHeight():Number {
      return _stageHeight;
    }
 
    public function set stageHeight(value:Number):void {
      _stageHeight = value;
    }
 
    private var _stageWidth:Number = 500;
 
    public function get stageWidth():Number {
      return _stageWidth;
    }
    
    public function set stageWidth(value:Number):void {
      _stageWidth = value;
    }
 
    public function initialize():void {
    }
    
    private function showDisplayForInit(elapsedTime:int, count:int):Boolean {
      return true;        
    }
 
    private function showDisplayForDownloading(elapsedTime:int, event:ProgressEvent):Boolean {
      return true;
    }
 
    private var _preloader:Sprite; 
 
    public function get preloader():Sprite {
      return _preloader;
    }
     
    public function set preloader(value:Sprite):void {
      _preloader = value;
        
      value.addEventListener(FlexEvent.INIT_PROGRESS, initProgressHandler);
      value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteHandler);
    
      value.addEventListener(ProgressEvent.PROGRESS, progressHandler);
     }
 
    private function initCompleteHandler(event:Event):void {
      progressText.text = "";
 
      var coverX:uint = 0;
      var coverY:uint = startY;
 
      graphics.lineStyle(0, 0, 0);
      graphics.beginFill(0x393b3e, backgroundAlpha);
      graphics.drawRect(coverX, coverY, event.target.loaderInfo.width, event.target.loaderInfo.height);
 
      var fadeToApp:Fade = new Fade();
 
      fadeToApp.target = image;
      fadeToApp.alphaFrom = 1.0;
      fadeToApp.alphaTo = 0.0;
      fadeToApp.duration = 1000;
      fadeToApp.play();
 
      setTimeout(endPreloader, 1000);
    }
 
    private function endPreloader():void {
      dispatchEvent(new Event(Event.COMPLETE)); 
    }
 
    private function initProgressHandler(event:Event):void {
      progressCount++;
 
      var percent:int = Math.min(Math.round(100*progressCount/progressTotal), 100);
 
      progressText.text = percent.toString() + "%";
 
      drawTrack(percent);
    }
 
    protected function get labelFormat():TextFormat {
      var tf:TextFormat = new TextFormat();
      tf.color = 0xffffff;
        
      tf.font = "Arial";
      tf.size = 20;
      tf.bold = true;
 
      return tf;
    }
 
    [Embed(source="/assets/images/logo.png")] 
    public var logoImage:Class;
    private var image:BitmapAsset = BitmapAsset(new logoImage());
 
    private var progressText:TextField = new TextField();
 
    private var startX:uint;
    private var startY:uint;
 
    private function progressHandler(event:ProgressEvent):void {
      if( progressCount == 0 ) {
        graphics.beginFill(0x393b3e, backgroundAlpha);
        graphics.drawRect(0, 0, event.target.loaderInfo.width, event.target.loaderInfo.height);
 
        startX = (event.target.loaderInfo.width/2) - (barWidth/2);
        startY = (event.target.loaderInfo.height/2) + 30;
 
        drawBar();
 
        addChild(image);
 
        image.x = (event.target.loaderInfo.width/2)-(image.width/2);
        image.y = (event.target.loaderInfo.height/2)-(image.height/2) - 80;
 
        progressText.defaultTextFormat = labelFormat;
 
        addChild(progressText);
 
        progressText.x = (event.target.loaderInfo.width/2) - (progressText.width/2) + 30;
        progressText.y = (event.target.loaderInfo.height/2)-(progressText.height/2) + 50;
 
        ++progressCount;
      }
    }
 
    private const barWidth:int = 300;
    private const barHeight:int = 15;
 
    private function drawBar():void {
      graphics.drawRect(startX, startY, barWidth, barHeight);
    }
 
    private function drawTrack(percent:int):void {
      const outerHighlightColors:Array = [0xFFFFFF, 0xFFFFFF];
      const outerHighlightAlphas:Array = [0.12, 0.80];
      const fillColors:Array = [0xA9A9A9, 0xBDBDBD];
      const fillAlphas:Array = [1, 1];
      const ratios:Array = [0, 255];
        
      var trackWidth:Number = Math.round(barWidth*percent/100);
 
      var m:Matrix = new Matrix();
      m.createGradientBox(trackWidth, barHeight, 90);
        
      graphics.lineStyle(1);
      graphics.lineGradientStyle("linear", outerHighlightColors, outerHighlightAlphas, ratios, m);
      graphics.drawRect(startX, startY, trackWidth, barHeight);
        
      graphics.lineStyle(1, 0x636363);
      graphics.beginGradientFill("linear", fillColors, fillAlphas, ratios, m);
      graphics.drawRect(startX+1, startY+1, trackWidth - 2, barHeight - 2);
      graphics.endFill();
    }
  }
}

loading问题

标签:style   io   ar   color   os   使用   sp   for   文件   

原文地址:http://www.cnblogs.com/regalys168/p/4107607.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!