`
hje
  • 浏览: 288246 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

flex 自定义进度条

阅读更多
转载地址:http://a168.blogbus.com/logs/28718649.html


使用方法:
设置Application标签的preloader为 MyComponent.MyDownloadProgressBar
<mx:Application preloader="MyComponent.MyDownloadProgressBar" >

下面是MyDownloadProgressBar.as的代码:

package MyComponent
{
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.utils.*;
import flash.system.Capabilities;

import mx.events.*;
import mx.preloaders.*;
   
    public class MyDownloadProgressBar extends Sprite implements IPreloaderDisplay
    {       
        [Embed(source="logo.png", mimeType="application/octet-stream")]
  public var _loadingLogo:Class;
 
        private var dpbImageControl:Loader;
        private var _barSprite:Sprite;
        private var progressText:TextField;       
        private var ProgressBarSpritIsAdded:Boolean = false;
   
        public function MyDownloadProgressBar() {  
            super();                           
        }
       
        // Specify the event listeners.
        public function set preloader(preloader:Sprite):void {
            //Listen for 正在下载
            preloader.addEventListener(ProgressEvent.PROGRESS, handleProgress);
            //Listen for 下载完成
            preloader.addEventListener(Event.COMPLETE, handleComplete);
      //Listen for 正在初始化
            preloader.addEventListener(FlexEvent.INIT_PROGRESS, handleInitProgress);
            //Listen for 初始化完成
            preloader.addEventListener(FlexEvent.INIT_COMPLETE, handleInitComplete);
        }
       
        // Initialize the Loader control in the override
        // of IPreloaderDisplay.initialize().
        public function initialize():void {
         //添加logo图
            dpbImageControl = new Loader();      
            dpbImageControl.contentLoaderInfo.addEventListener(Event.COMPLETE, loader_completeHandler);
            dpbImageControl.loadBytes(new _loadingLogo() as ByteArray);
            //dpbImageControl.load(new URLRequest("loadinglogo.swf"));
        }


        // After the SWF file loads, set the size of the Loader control.
        private function loader_completeHandler(event:Event):void
        {        
         addChild(dpbImageControl);
         dpbImageControl.width = 230;
            dpbImageControl.height= 80;
            dpbImageControl.x = this.stage.stageWidth/2 - dpbImageControl.width/2;
            dpbImageControl.y = this.stage.stageHeight/2 - dpbImageControl.height/2 - 80;
        }  
       
        //
        private function addProgressBarSprit():void{
         //绘制背景渐变
   var matrix:Matrix=new Matrix();
         matrix.createGradientBox(this.stage.stageWidth,this.stage.stageHeight,Math.PI/2);
         var colors:Array=[0x058BBD,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-130, this.stage.stageHeight/2-90, 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 - 152), (this.stage.stageHeight/2 - 10), 304, 20);  
   _Sprite2.graphics.endFill();
  
   //-------------------------------------------------
  
   //加载进度条Sprite
   _barSprite = new Sprite();
   addChild(_barSprite);
   _barSprite.x = this.stage.stageWidth/2 - 150;
   _barSprite.y = this.stage.stageHeight/2 - 8;
  
   //-------------------------------------------------
  
   //加载进度条文字
   progressText = new TextField();
   addChild(progressText);
   progressText.textColor = 0x333333;
            progressText.width = 300;
            progressText.height = 18;
            progressText.x = this.stage.stageWidth/2 - 152;
            progressText.y = this.stage.stageHeight/2 + 20;
        }
       
        //刷新进度条
        private function drawProgressBar(bytesLoaded:Number, bytesTotal:Number):void
  {  
   if (_barSprite != null && progressText != null){
    var g:Graphics = _barSprite.graphics;
    g.clear();
//    g.beginFill(0xCCCCCC);
//    g.drawRect(0, 0, 300*(bytesLoaded/bytesTotal),16);  
//    g.endFill();   
   
    var matrix:Matrix=new Matrix();
          matrix.createGradientBox(300*(bytesLoaded/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*(bytesLoaded/bytesTotal),16);
          g.endFill(); 
   
   
   }
  }
       
        //正在下载的进度
        private function handleProgress(event:ProgressEvent):void {
         //第一次处理时绘制进度条Sprit
         if (ProgressBarSpritIsAdded == false){
          ProgressBarSpritIsAdded = true;
          addProgressBarSprit();
         }
        
         if (progressText != null){
          progressText.text = "下载进度:已下载 " + event.bytesLoaded + " byte,总大小 " + event.bytesTotal + " byte.";
         }        
         drawProgressBar(event.bytesLoaded, event.bytesTotal);
        }
       
        private function handleComplete(event:Event):void {
         if (progressText != null){
          progressText.text = "下载完成.";
         }
         drawProgressBar(1,1);       
        }
       
        private function handleInitProgress(event:Event):void {
         if (progressText != null){
          progressText.text = "正在初始化...";
         }
         drawProgressBar(1,1);
        }
       
        private function handleInitComplete(event:Event):void {
         if (progressText != null){
          progressText.text = "初始化完成.";
         }
         drawProgressBar(1,1);        
        
         //0.03秒后抛出完成事件
            var timer:Timer = new Timer(300,1);
            timer.addEventListener(TimerEvent.TIMER, dispatchComplete);
            timer.start();     
        }
   
        private function dispatchComplete(event:TimerEvent):void {
            dispatchEvent(new Event(Event.COMPLETE));
        }
       

        // Implement IPreloaderDisplay interface
   
        public function get backgroundColor():uint {
            return 0;
        }
       
        public function set backgroundColor(value:uint):void {
        }
       
        public function get backgroundAlpha():Number {
            return 0;
        }
       
        public function set backgroundAlpha(value:Number):void {
        }
       
        public function get backgroundImage():Object {
            return undefined;
        }
       
        public function set backgroundImage(value:Object):void {
        }
       
        public function get backgroundSize():String {
            return "";
        }
       
        public function set backgroundSize(value:String):void {
        }
   
        public function get stageWidth():Number {
            return 500;
        }
       
        public function set stageWidth(value:Number):void {
        }
       
        public function get stageHeight():Number {
            return 375;
        }
       
        public function set stageHeight(value:Number):void {
        }
    }

}


分享到:
评论
1 楼 寒冰炫 2011-03-17  
谢谢兄弟,我下了,试了下,非常爽

相关推荐

    Flex 4 进度条的皮肤

    - 在主应用MXML文件中,导入自定义进度条皮肤类。 - 创建一个`ProgressBar`实例,并将其`skinClass`属性设置为自定义皮肤类的全限定名。 例如: ```xml import custom.skins.CustomProgressBarSkin; ``` 4...

    flex可自定义圆形加载进度条例子代码下载

    在这个特定的案例中,我们关注的是使用Flex实现的自定义圆形加载进度条。 在Web应用中,进度条是用户界面中常见的一种元素,用于指示某个任务或数据加载的进度。圆形进度条与传统的水平进度条不同,它以圆形图案...

    Flex3自定义的加载进度条

    创建完自定义进度条后,你可以像使用任何其他Flex组件一样在应用程序中导入并使用它。将其添加到主容器中,设置相关属性,如初始值、最大值等,然后在加载数据时启动进度条。 7. **优化和调试** 为了确保自定义...

    Flex自定义加载条(小起)

    在本文中,我们将深入探讨如何在Flex环境中自定义加载条,即进度条组件。Flex是一种基于ActionScript 3.0的开源框架,用于构建富互联网应用程序(RIA)。它提供了丰富的UI组件库,其中包括标准的进度条组件,但有时...

    结合flash制作的flex进度条

    4. **在Flex项目中引入SWC**:将SWC文件放入Flex项目的库目录,然后在Flex的.mxml文件中通过`&lt;mx:Component&gt;`标签引入并实例化自定义进度条。 5. **使用和控制进度条**:在Flex代码中,可以通过设置`...

    Flex进度条小例子

    在Flex中,我们可以创建自定义的用户界面组件,其中包括进度条,用于显示任务的完成进度或数据加载状态。 描述部分虽然为空,但根据标签“源码”和“工具”,我们可以推测这篇博文可能提供了关于如何使用Flex来创建...

    flex 自定义加载进度框

    在“flex自定义加载进度条”的场景中,开发者可能想要替换Flex默认的Application预加载器,以提供更个性化的用户体验。自定义预加载器可以让开发者自由设计加载界面的外观和交互,例如改变颜色、形状或动画效果,...

    flex自定义截取图片上传

    本项目“flex自定义截取图片上传”就是这样一个解决方案,它采用Adobe Flex技术实现,结合C#后端处理,为用户提供了一套完整的截图上传系统。以下是关于这个项目的详细知识点: 1. **Flex技术**:Flex是Adobe公司...

    flex自定义加载器

    本文将深入探讨Flex自定义加载器的相关知识点,帮助你理解和掌握如何在Flex项目中实现这一功能。 1. **Loader类** Loader类是AS3中的核心类,位于`flash.display`包下,用于加载和显示各种类型的媒体资源。通过...

    Flex进度条示例源码

    Flex允许自定义组件样式,包括进度条的颜色、宽度、高度等。这可以通过CSS或直接在MXML中设置属性完成。例如: ```xml ``` 这里的`trackColor`和`barColor`分别设置了轨道和填充条的颜色。 **5. 使用压缩包中的...

    flex3自定义DownloadProgressBar

    本文将围绕“flex3自定义DownloadProgressBar”这一主题展开,讲解如何在Flex3中创建一个定制化的下载进度条组件,并探讨相关的编程技术和实践。 一、自定义组件基础 在Flex中,自定义组件是通过继承已有的...

    Flex4_ProgressBar_Combobox_NumericStepper

    数据源可以是数组、XML列表或其他数据结构,用户可以通过选择项模板自定义列表中每个项目的外观。此外,ComboBox还支持事件监听,如change事件,当用户选择新项时触发。 三、NumericStepper组件 NumericStepper组件...

    as 3.0 进度条(附带源码)

    在本文中,我们将深入探讨如何在ActionScript 3.0中创建一个自定义的进度条组件,这与提供的"as 3.0 进度条(附带源码)"资源紧密相关。ActionScript 3.0是Adobe Flash Professional中的编程语言,用于创建交互式富...

    flex 面试题flex

    - 对于处理速度慢,可以优化异步通信,提升用户体验,例如通过进度条显示或异步加载。 8. Flash与Flex的协同开发: 若需利用Flex SDK,可以建立Flex工程,将Flash作为UI皮肤。若仅需要编码便利,可创建AS工程,...

    Flex multiple file uploader (Flex多文件上传范例)

    最后,为了实现文件上传进度的显示,Flex提供了进度条组件(ProgressBar),可以绑定到FileReference的upload事件,根据上传进度更新进度条的状态。在PHP端,可以通过调整响应信息来反馈文件上传的状态,以便Flex...

    flex+php上传文件可自定义上传格式,上传文件限制大小

    标题中的“flex+php上传文件可自定义上传格式”意味着我们可以使用`Flex`作为前端,通过其灵活的编程模型来定制用户界面,包括选择文件对话框、预览、进度条等元素,并且可以根据需求设置允许上传的文件类型,如图片...

    Flex 扇形Loading

    Flex扇形Loading是一种在Flex应用中实现的自定义加载指示器,它提供了更加美观和动态的用户体验,替代了默认的加载动画。这种加载效果通常采用扇形或环形的进度条设计,使得用户能够直观地看到加载过程的进度。本文...

    用as3写的加载进度条

    本教程将详细解释如何使用AS3来创建一个自定义的加载进度条,并涉及到动态画图以及界面初始化的相关知识。 1. **AS3基础** AS3是Flash Professional、Flex Builder等开发工具中的编程语言,广泛用于创建富互联网...

Global site tag (gtag.js) - Google Analytics