xiangpei02
Flash/Flex构架师 / 广东
积分 8

flex自定义进度条


2011-06-24 点击:


其实flex自定义进度条就是扩展preloader这个类,新建一个preloader引用的的类继承DownloadProgressBar在里面加上自己喜欢的样式就OK了,下面我们开始做一个demo
1,创建一个flex工程
2,创建过一个首页(其实新建工程的时候就elipse就会根据你的工程名称创建一个首页)
我们创建一个叫myDownloadPro.mxml 里面的写法很简单

  1. <?xml version="1.0"?> 
  2. <!-- Simple example to demonstrate the Repeater class. --> 
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" preloader="aa.myDownProBar2">//就是在这里引用你自定义的进度条的类 
  4.  <mx:Text text="程序进度条测试" x="37" y="71"/> 
  5. </mx:Application> 
3,创建一个自定义的进度条类  myDownProBar.as
源码如下:

 

  1. package aa 
  2. import mx.preloaders.DownloadProgressBar; 
  3. import flash.display.Sprite; 
  4. import flash.events.ProgressEvent 
  5. import flash.events.* 
  6.  
  7. import flash.text.TextField; 
  8. import  mx.events.*; 
  9. public class myDownProBar extends DownloadProgressBar 
  10.   public var msg:TextField 
  11.   public function myDownProBar() 
  12.   { 
  13.    super();  
  14.    msg=new TextField() 
  15.    msg.x=200 
  16.    msg.y=200 
  17.   addChild(msg) 
  18.   } 
  19.   override public function set preloader(s:Sprite):void{ 
  20.   s.addEventListener(ProgressEvent.PROGRESS,prog) 
  21.   s.addEventListener(Event.COMPLETE,ecom) 
  22.   s.addEventListener(FlexEvent.INIT_COMPLETE,flInC) 
  23. s.addEventListener(FlexEvent.INIT_PROGRESS,flIn) 
  24.   } 
  25. private function prog(e:ProgressEvent):void{//进度条显示的百分数方法 
  26. msg.text=String(int(e.bytesLoaded/e.bytesTotal*100))+" %"; 
  27. private function ecom(e:Event):void{//进度条加载完成的方法 
  28. msg.text="完成了!!!!" 
  29.  
  30. //进度条加载完成后的方法在这里要注意将把事件派遣给加载的文件的Complete(初始化呈现) 事件 
  31. private function flInC(e:FlexEvent):void{msg.text="初始化完毕!"
  32. //初始完后要派遣 Complete 事件,不然会停在这里,不会进入程序画面的 
  33. dispatchEvent(new Event(Event.COMPLETE)) 
  34. private function flIn(e:FlexEvent):void{//进度条开始加载的方法 
  35. msg.text="开始初始化程序" 

其实一个自定义的进度条就是这么简单

很轻而易举的就搞定了  不过预览的时候 可能效果不是很明显 因为在我们本地速度比较快  要是放到外网上的话 它就会发挥出效果来


    xiangpei02  版权所有
    禁止任何用途(禁止转载、商用和个人使用)


所属分类:技术经验分享

本文标签:进度条 flex 自定义

各位正在潜水的同学请注意,有0位无聊人士 在EBIBI附近出没!







    点击我更换图片 看不清
    评论内容 (*必填):

    (Ctrl + Enter 快速提交)