`

自定义Flex 进度条(loading)

    博客分类:
  • Flex
阅读更多

package
{
 import flash.display.*;
 import flash.events.*;
 import flash.net.*;
 import flash.text.TextField;
 import flash.text.TextFormat;
 
 import mx.events.FlexEvent;
 import mx.preloaders.DownloadProgressBar;

 public class LoadingExampleProgressBar extends DownloadProgressBar
 {
  private var logo:Loader;
  private var txt:TextField;
  private var _preloader:Sprite;
  public function LoadingExampleProgressBar()
  {
   logo = new Loader();
   logo.load(new URLRequest("l4cd.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;
   txt.x = (stage.stageWidth - 200)/2;
   txt.y = logo.y + 40+5;
   
   graphics.clear();
   graphics.beginFill(0x333333);
   graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
   graphics.endFill();
  }
  private function load_progress(e:ProgressEvent):void{
   txt.text = "正在加载..."+int(e.bytesLoaded/e.bytesTotal*100)+"%";
  }
  private function load_complete(e:Event):void{
   txt.text = "加载完毕!"
  }
  private function init_progress(e:FlexEvent):void{
   txt.text = "正在初始化..."
  }
  private function init_complete(e:FlexEvent):void{
   txt.text = "初始化完毕!"
   remove()
   //最后这个地方需要dpe一个Event.COMPLETE事件..表示加载完毕让swf继续操作~
   dispatchEvent(new Event(Event.COMPLETE))
  }
 }
}


自定义了加载类后..我们新建一个app测试一下..

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
 preloader="LoadingExampleProgressBar" 
 backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#333333, #333333]"
</mx:Application>

不需要写任何代码..
只需要在Application 标签下设置preloader为你刚刚自定义的类(我这是命令叫LoadingExampleProgressBar)
保存后即可看到效果~

分享到:
评论

相关推荐

    Flex 扇形Loading

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

    flex3自定义DownloadProgressBar

    综上所述,自定义Flex 3的DownloadProgressBar是一个结合了组件扩展、样式定制、事件处理和业务逻辑的过程。具体实现细节通常会根据实际项目需求而变化,而提供的SWF文件则可能用于增强进度条的视觉反馈。如果要了解...

    FLex loading源码

    4. **组件自定义**:`com`文件夹中的类可能包含了自定义的加载组件,比如自定义的进度条或加载动画。这些类可能会扩展Flex的基础组件,如`mx.controls.ProgressBar`,并添加特定的功能或样式。 5. **FLA与SWF**:未...

    页面加载的Loading效果

    通过CSS,我们可以创建自定义的动画效果,如旋转的loading图标。以下是一个简单的例子: ```html &lt;div class="spinner"&gt;&lt;/div&gt; .loader { display: flex; justify-content: center; align-items: center; ...

    阿玉写loading.rar

    5. 布局与定位:为了使loading动画在页面中居中或按需位置显示,我们需要运用CSS的布局和定位技术,如`position`(静态、相对、绝对、固定)、`top`、`bottom`、`left`、`right`以及`display`(如`flex`或`grid`)等...

    swf格式loading动画多种

    本文将深入探讨SWF格式的Loading动画,包括其原理、制作方法以及如何在FLEX中调用。 一、SWF格式介绍 SWF(ShockWave Flash)是由Adobe公司开发的文件格式,主要用于在网络上传输多媒体内容,如动画、游戏和交互式...

    vue实现自定义H5视频播放器的方法步骤

    文中提到使用了Flex布局和vw单位进行适配,以实现响应式设计,确保在不同设备和屏幕尺寸上都能正常显示。此外,开发者还标记了几个主要功能,如播放、暂停、缓冲、加载失败等。 2. **功能实现**: - **事件监听**...

    十三种html的loading样式

    6. **环形进度条**:通过CSS3的border-radius和animation创建环形填充动画,展示加载进度。 7. **点状加载**:点点滴滴的动画效果,常表现为“.”、“..”、“...”,使用CSS的animation延迟属性实现。 8. **彩色...

    actionscript例子源码

    LoadingScreen.fla可能演示了如何使用ActionScript来显示进度条并监控加载资源的进度,同时向用户展示加载状态,提高用户体验。 4. 播放声音(PlayingSounds.fla) 在ActionScript中,可以使用Sound和SoundChannel...

Global site tag (gtag.js) - Google Analytics