`
清水上人
  • 浏览: 7089 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
最近访客 更多访客>>
社区版块
存档分类
最新评论

flex加载进度条

    博客分类:
  • flex
阅读更多
package com.kanq.tool.loader
{
	import flash.display.GradientType;
	import flash.display.Graphics;
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.ProgressEvent;
	import flash.events.TimerEvent;
	import flash.filters.BitmapFilterQuality;
	import flash.filters.BlurFilter;
	import flash.geom.Matrix;
	import flash.text.TextField;
	import flash.utils.ByteArray;
	import flash.utils.Timer;
	
	import mx.controls.Image;
	import mx.events.FlexEvent;
	import mx.preloaders.IPreloaderDisplay;

	public class WelcomeProgressBar extends Sprite implements IPreloaderDisplay
	{
		[Embed(source="com/kanq/image/main/welcomeBackGroup.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 WelcomeProgressBar()
		{
			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);
		}

		public function initialize():void
		{
			//添加logo图 
			dpbImageControl=new Loader();
			dpbImageControl.contentLoaderInfo.addEventListener(Event.COMPLETE, loader_completeHandler);
			dpbImageControl.loadBytes(new _loadingLogo() as ByteArray);
		}

		private function loader_completeHandler(event:Event):void
		{
			addChild(dpbImageControl);
			dpbImageControl.width=403;
			dpbImageControl.height=186;
			dpbImageControl.x=this.stage.stageWidth / 2 - dpbImageControl.width / 2;
			dpbImageControl.y=this.stage.stageHeight / 2 - dpbImageControl.height / 2;

			if (ProgressBarSpritIsAdded == false)
			{
				ProgressBarSpritIsAdded=true;
				addProgressBarSprit();
			}
		}

		// 
		private function addProgressBarSprit():void
		{
			//绘制背景渐变  0x058BBD
			var matrix:Matrix=new Matrix();
			matrix.createGradientBox(this.stage.stageWidth, this.stage.stageHeight, Math.PI / 2);
			var colors:Array=[0xE2EBF5, 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.beginFill(0xc2d2dd);
			_Sprite2.graphics.drawRoundRect((this.stage.stageWidth / 2 - 152), (this.stage.stageHeight / 2 - 10), 304, 20,20,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=330;
			progressText.height=18;
			progressText.x=this.stage.stageWidth / 2 - 152;
			progressText.y=this.stage.stageHeight / 2 + 10;
		}

		//刷新进度条 
		private function drawProgressBar(bytesLoaded:Number, bytesTotal:Number):void
		{
			if (_barSprite != null && progressText != null)
			{
				var g:Graphics=_barSprite.graphics;
				g.clear();  

				var matrix:Matrix=new Matrix();
				matrix.createGradientBox(300 * (bytesLoaded / bytesTotal), 16, Math.PI / 2);
				var colors:Array=[0xfcfdfe, 0xf1b05c];
				var alphas:Array=[1, 1];
				var ratios:Array=[0, 255];
				g.lineStyle();
				g.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
				g.drawRoundRect(0,0,300 * (bytesLoaded / bytesTotal),16,20,20);
				g.endFill();


			}
		}

		//正在下载的进度 
		private function handleProgress(event:ProgressEvent):void
		{
			if (progressText != null)
			{
				var proc:uint=event.bytesLoaded / event.bytesTotal * 100;
				progressText.text="下载进度 : "+proc+"%"+"  已下载 " + 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));
		}

		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
		{
		}
	}
}

 

直接上代码。 别的也不说了,拿去看吧~

使用方法 :  preloader="com.kanq.tool.loader.WelcomeProgressBar" 

分享到:
评论

相关推荐

    Flex 4 进度条的皮肤

    进度条是用户界面中常见的组件,用于表示任务的完成程度或加载状态。本文将深入探讨如何在Flex 4中创建和定制进度条的皮肤。 首先,我们需要了解Flex 4中的皮肤架构。Flex 4引入了Spark组件模型,其中皮肤是组件...

    flex进度条

    对于基于Flex框架的应用而言,进度条同样扮演着重要的角色,尤其是在应用初始化或数据加载过程中提供用户反馈,提升用户体验方面。本文将详细探讨Flex进度条的实现方式,并通过一个具体示例来阐述其工作原理。 ####...

    Flex3自定义的加载进度条

    在Flex3中,有时候我们需要自定义加载进度条来满足特定的界面设计或用户体验需求。下面将详细讲解如何在Flex3中实现自定义的加载进度条。 1. **自定义组件基础** 在Flex3中,我们可以创建自定义组件来扩展或替换...

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

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

    Flex 进度条

    Flex进度条是一种用于显示操作进度的图形用户界面组件,尤其适用于那些需要花费一定时间的异步操作,比如文件下载、音乐或视频的加载以及登录过程等。通过进度条,用户可以直观地看到当前操作的完成情况,从而减少...

    Flex进度条小例子

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

    Flex 指定文件下载 带进度条

    在Flex编程中,指定文件下载并带有进度条功能是一项常见的需求,这主要涉及到网络I/O操作、事件处理以及用户界面的更新。以下是对这个主题的详细讲解。 首先,Flex是Adobe开发的一种开源富互联网应用程序(RIA)...

    用as3写的加载进度条

    在ActionScript 3(AS3)中,动态加载进度条是一种常见的用户界面元素,它能够显示数据或资源加载的进度,提升用户体验。本教程将详细解释如何使用AS3来创建一个自定义的加载进度条,并涉及到动态画图以及界面初始化...

    结合flash制作的flex进度条

    在Flex中,进度条组件通常用于显示应用程序执行的某个任务的进度,如数据加载、文件上传或计算过程。Flex标准库中包含了多种进度条组件,如HProgressBar(水平进度条)和VProgressBar(垂直进度条),这些组件可以...

    Flex 预加载动画demo

    这个"Flex 预加载动画demo"是Flex应用中的一个实例,它展示了如何自定义预加载进度条动画,使得用户在等待应用程序加载时能有一个更友好的交互体验。 预加载是任何富媒体应用程序的关键部分,因为它确保了所有必要...

    Flex进度条示例源码

    在Flex中,进度条(ProgressBar)组件是一种常用的用户界面元素,它能够显示任务或过程的进度,增强用户体验,让用户了解操作的进行状态。 在Flex中,进度条的实现主要依赖于ProgressBar类。这个类提供了两种模式:...

    flex 自定义加载进度框

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

    Flex自定义加载条(小起)

    在本文中,我们将深入探讨如何在Flex...总结来说,自定义Flex加载条是一项涉及组件样式、模板、动画和事件处理的综合工作。通过学习和实践这个示例,你可以掌握如何根据项目需求定制出独特的加载条组件,提升用户体验。

    flex 异步加载tree

    根据给定的信息,我们可以深入探讨Flex中的异步加载Tree组件的相关知识点。 ### 一、Flex与AsyncTree组件 #### 1. Flex简介 Flex是一种开源的框架,用于构建跨平台的桌面应用程序和移动应用程序。它提供了强大的...

    Flex actionscript3 as3加载文件资源进度条.rar

    "Flex actionscript3 as3加载文件资源进度条.rar"这个压缩包可能包含了一个示例项目,演示如何在Flex应用中实现文件加载的进度反馈。 首先,我们需要理解AS3中的Loader类。Loader类是AS3中负责加载不同类型的媒体...

    flex自定义加载器

    - **状态监控**:添加事件监听器来跟踪加载进度,如`ProgressEvent.PROGRESS`,以显示加载进度条。 - **错误处理**:捕获并处理加载过程中可能出现的错误,如` IOErrorEvent.IO_ERROR`或`SecurityErrorEvent....

    Flex 延迟加载 问题说明 处理 实现

    - 提供加载指示器或进度条,让用户清楚地知道正在加载的内容。 - 优化加载过程,尽可能减少加载所需的时间。 #### 六、实现示例 假设我们有一个包含多个面板的Flex应用,但并不希望在启动时就加载所有面板。可以...

    flash进度条

    响应式设计则需要考虑进度条在不同分辨率和设备上的适配,可能需要借助CSS3或Flex布局。 总的来说,创建“Flash进度条”涉及了Flash的基础动画原理、ActionScript编程技巧以及UI/UX设计原则。在CS4版本中,开发者...

    asp.net前台显示后台处理进度条

    display: flex; justify-content: center; align-items: center; } .loading-mask img { animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: ...

    flex文件上传下载,在线以pdf形式浏览文件

    当用户点击下载链接时,服务器返回一个包含文件内容的HTTP响应,Flex应用使用FileReference.load方法加载这个响应,然后调用save方法让用户保存到本地。 3. **在线浏览**:在线浏览文件涉及到多种技术。对于文本...

Global site tag (gtag.js) - Google Analytics