文档章节

FLEX 加载进度条自定义

Yuan_shry
 Yuan_shry
发布于 2013/11/12 11:13
字数 679
阅读 164
收藏 0
<!-- lang: as3 -->
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.net.URLLoader;
import flash.net.URLRequest;
import flash.text.TextField;
import flash.utils.ByteArray;
import flash.utils.Timer;

import mx.events.FlexEvent;
import mx.preloaders.IPreloaderDisplay;


public class LoadingProgressBar extends Sprite implements IPreloaderDisplay{
	public var _loadingLogo:Class;
	
	private var dpbImageControl:Loader;
	private var _barSprite:Sprite;
	private var progressText:TextField;       
	private var ProgressBarSpritIsAdded:Boolean = false; 
	
	public function LoadingProgressBar(){
		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);
		
		//得到登陆用户的信息
		new UserHandler().getLoginUser(preloader, handleInitComplete);
		
		//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=[0x2f486b,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 = "正在加载地图:已加载 " + Math.round(event.bytesLoaded/1024) + " KB,总大小 " + Math.round(event.bytesTotal/1024) + " KB.";
		}        
		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] [1]: http://static.oschina.net/uploads/space/2013/1112/114453_vztP_1398195.jpg

© 著作权归作者所有

共有 人打赏支持
Yuan_shry
粉丝 0
博文 4
码字总数 1268
作品 0
成都
私信 提问
进一步了解flex布局—来实现这些常见布局吧

  flex布局具有便捷、灵活的特点,熟练的运用flex布局能解决大部分布局问题,这里对一些常用布局场景做一些总结。 web页面布局(topbar + main + footbar) 示例代码   要实现的效果如下:...

LT_bear
2018/05/29
0
0
使Emacs支持词法分析器 flex

最近在学习 flex & bison, EmacsWiki 上的 flex-mode 写的太烂了, 语法高亮支持的很差, 所以顺手写了一个新的插件 flex flex 支持 flex 的模式代码区域的语法高亮, 提供了更完备的 hook 支持...

ManateeLazyCat
2018/10/04
0
0
网游公司招聘java/flex精英

公司名:北京博为远景信息技术有限公司 联系方式:请将简历发送至zhaopin@djyou.cn并标明应聘职位及来源,谢谢合作。 网址:http://www.djyou.cn/ 工作地点:二号线朝阳门地铁站旁联合大厦 ...

boweihr
2011/05/05
753
4
从reactjs看flex的设计哲学

前两天收到了《react引领未来的用户界面开发框架》,因为一直在从事flex的开发,自然比较,自然发现其中80%的雷同之处。深度怀疑react的开发者是曾经的flex开发者一员,或者是仿冒,但是做到了...

fir01
2016/02/21
782
2
flex和box、flexbox高度自适应常见坑

display:box; 是老语法,display:flex;是新语法。flexbox是只有ie10才有的语法,ie11可以用flex。 box支持的浏览器更多,flex旧版本浏览器不支持。 综合写法 仅仅只有5条,注意:没有box也没...

linsk1998
2018/05/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

关于360插件化Replugin 2.3.1版本的AS配置解决方案

编译错误:No signature of method: com.android.build.gradle.internal.scope.VariantScopeImpl.getMergeAssetsTask() is applicable for argument types: () values: [] 解决方案:加入热心......

Gemini-Lin
36分钟前
1
0
大数据全系技术概览

什么是大数据? 大数据(big data),指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增...

董黎明
55分钟前
12
0
阿里巴巴微服务开源项目盘点(持续更新)

大前端、微服务、数据库、更多精彩,尽在开发者分会场 【Apache Dubbo】 Apache Dubbo 是一款高性能、轻量级的开源Java RPC框架,是国内影响力最大、使用最广泛的开源服务框架之一,它提供了...

阿里云官方博客
55分钟前
1
0
轻松掌握!一文教你用CloudBoot批量安装RancherOS

RancherOS是Rancher Labs设计的小巧、专用的容器操作系统。本文详细介绍了如何使用CloudBoot简单批量安装RancherOS。 作者简介 赵安家,山东顺能网络全栈研发工程师。前端后端通吃,DevOps、...

RancherLabs
今天
2
0
springmvc源码解析MvcNamespaceHandler之视图配置器和跨域配置

说在前面 本次主要介绍springmvc配置解析<mvc:freemarker-configurer/>、<mvc:velocity-configurer/>、 <mvc:cors>。关注“天河聊技术”更多中间件源码解析。 springmvc配置解析 本次介绍Mvc......

天河2018
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部