结合flash制作的flex进度条

结合flash制作的flex进度条
文章分类:Web前端
结合flash制作的flex进度条

实例：http://www.princeshow.com/wish/



如果光用flex去重写这个DownloadProgressBar类可以实现修改进度条，但在这个类去绘制图形界面恐怕有点难，所以结合flash去开发进度条更加简单。至于在flash里导出的swc文件我就不多说了，我只简单出下说一下从flash里导出的swc文件进度条如何在flex中应用，我想这是关键之处。

1、导出的ProBar.swc文件引入flex Project中

2、新建一个类MyDownProBar继承DownloadProgressBar类，然后重新设置一下preloader属性

Java代码
override public function set preloader(s:Sprite):void{  
            s.addEventListener(ProgressEvent.PROGRESS,inProgress);  
            s.addEventListener(Event.COMPLETE,complete);  
            s.addEventListener(FlexEvent.INIT_COMPLETE,initComplete);  
            s.addEventListener(FlexEvent.INIT_PROGRESS,initProgress);  
        } 

override public function set preloader(s:Sprite):void{
s.addEventListener(ProgressEvent.PROGRESS,inProgress);
s.addEventListener(Event.COMPLETE,complete);
s.addEventListener(FlexEvent.INIT_COMPLETE,initComplete);
s.addEventListener(FlexEvent.INIT_PROGRESS,initProgress);
} 3、inProgress方法是关键之处，在这个方法里将会绘制进度条图形

Java代码
private function inProgress(e:ProgressEvent):void{//进度条显示的百分数方法  
            var barWidth:Number = e.bytesLoaded/e.bytesTotal*100;          
            if(proBar==null){  
                proBar=new ProBar();  
                proBar.x=(this.stageWidth-this.width)/2-40;  
                proBar.y=(this.stageHeight-this.height)/2-18;  
                this.addChild(proBar);  
                  
                myLabel=new TextField();  
                myLabel.x=(this.stageWidth-this.width)/2+40;  
                myLabel.y=(this.stageHeight-this.height)/2;  
                myLabel.textColor=0x8579E9;  
                this.addChild(myLabel);  
                  
            }  
            proBar.setProBar(int(barWidth));  
            myLabel.text="已经加载："+int(barWidth)+" %";  
        } 

private function inProgress(e:ProgressEvent):void{//进度条显示的百分数方法
var barWidth:Number = e.bytesLoaded/e.bytesTotal*100;       
if(proBar==null){
proBar=new ProBar();
proBar.x=(this.stageWidth-this.width)/2-40;
proBar.y=(this.stageHeight-this.height)/2-18;
this.addChild(proBar);

myLabel=new TextField();
myLabel.x=(this.stageWidth-this.width)/2+40;
myLabel.y=(this.stageHeight-this.height)/2;
myLabel.textColor=0x8579E9;
this.addChild(myLabel);

}
proBar.setProBar(int(barWidth));
myLabel.text="已经加载："+int(barWidth)+" %";
} proBar.setProBar(int(barWidth))是重要环节，实际上在这里这个方法是调用在flash里写好的一个方法，方法很简单

Java代码
public function setProBar(frame:int):void{  
            gotoAndStop(frame);  
        } 

public function setProBar(frame:int):void{
gotoAndStop(frame);
}

意思就是跳到下一帧停止，这就是这个进度条的核心之后在呀。我这样可以根据百分比去一帧一帧显示进度条，这样就实现了动画效果，所以说时间轴和帧在flash里是命脉。



不多说，直接贴出我测试的小例子，自己可以看下，本人刚学flex没多久，代码可能写的有些烂，还望多多包涵！