preloader 美化

loader  主体:

package  com.dihtech.regionalhealth.healthrecord.personalhealthrecord.compoments

{

import flash.display.Sprite;   

import flash.events.Event;   

import flash.events.ProgressEvent;   

import flash.events.TimerEvent;   

import flash.text.TextField;   

import flash.utils.Timer;   

import mx.events.FlexEvent;   

import mx.preloaders.DownloadProgressBar;   

public class Preloader extends DownloadProgressBar   

{   

//显示进度的文字   

private var progressText:TextField;   

//进度条   

public var img:WelcomeScreen;   

//logo页面   

public var logo:WelcomeLogo;   

private var _timer:Timer;   

public function Preloader()   

{   

super();   

//加入logo   

logo = new WelcomeLogo();   

logo.x=100;

this.addChild(logo);   

//加入进度条   

img = new WelcomeScreen();   

this.addChild(img);   

//加入进度文字   

progressText = new TextField();   

progressText.x = 40;   

progressText.y = 90;   

this.addChild(progressText);   

//进度条计时器初始化,我们实现进度条的原理就是不停的刷新进图条图片   

//因为每次进度条的长度不同,所以就有进度条在走的效果   

_timer = new Timer(1);   

_timer.addEventListener(TimerEvent.TIMER, drawTimerHandler);   

_timer.start();   

}   

/**  

* override这个函数,来实现自己Preloader的设置,而不是用其默认的设置  

*/  

override public function set preloader(value:Sprite):void  

{   

value.addEventListener(ProgressEvent.PROGRESS, progHandler);   

value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteHandler1);   

//在这里设置预载界面居中   

//如果在初始化函数中设置,会有stageWidth和最终界面大小不一致的错误,而导致不能居中   

x = (stageWidth/2) - (300/2);   

y = (stageHeight/2) - (180/2);   

}   

private function progHandler(e:ProgressEvent):void  

{   

//计算进度,并且设置文字进度和进度条的进度。   

var prog:Number = e.bytesLoaded/e.bytesTotal*100;   

progressText.text = "已下载 " + String(int(prog)) + "%";   

if(img)   

{   

img.progress = prog;   

}   

}   

private function compHandler(e:Event):void  

{   

}   

public   function initCompleteHandler1(e:FlexEvent):void  

{   

//如果载入完毕,则停止刷新   

img.ready = true;   

_timer.stop();   

//测试专用。下载完毕后,不马上跳到程序的默认界面。而是停顿10秒后再跳入。   

// var timer:Timer = new Timer(10000, 1);   

// timer.addEventListener(TimerEvent.TIMER, dispatchComplete);   

// timer.start();   

this.dispatchEvent(new Event(Event.COMPLETE));  

}   

private function initProgHandler(e:FlexEvent):void  

{   

}   

/**  

* 一定要分发这个事件,来通知程序已经完全下载,可以进入程序的默认界面了  

*/  

private function dispatchComplete(event:TimerEvent):void  

{   

this.dispatchEvent(new Event(Event.COMPLETE));   

}   

/**  

* 每个时钟周期都刷新进度条图片  

*/  

private function drawTimerHandler(event:TimerEvent):void  

{   

img.refresh();   

}   

}   

 

}

 

 

picture  logo:

package com.dihtech.regionalhealth.healthrecord.personalhealthrecord.compoments

{

import flash.display.Loader;   

import flash.utils.ByteArray;   

public class WelcomeLogo extends Loader   

{   

[Embed(source="com/dihtech/regionalhealth/healthrecord/personalhealthrecord/assets/images/preloader.jpg", mimeType="application/octet-stream")]   

public var WelcomeScreenGraphic:Class;   

public function WelcomeLogo()   

{   

this.loadBytes(new WelcomeScreenGraphic() as ByteArray);   

}   

}   

 

}

 

loader 主体:

 

 

package com.dihtech.regionalhealth.healthrecord.personalhealthrecord.compoments

{

import flash.display.BitmapData;   

import flash.display.Graphics;   

import flash.display.Loader;   

import flash.display.Sprite;   

import flash.utils.ByteArray;   

import mx.graphics.codec.PNGEncoder;   

public class WelcomeScreen extends Loader   

{   

//辅助属性,帮助进行进度条的定位   

private static var _LogoWidth:int = 300;   

private static var _LogoHeight:int = 180;   

private static var _LeftMargin:int = 5;   

private static var _RightMargin:int = 5;   

private static var _TopMargin:int = 1;   

private static var _BottomMargin:int = 1;   

private static var _Padding:int = -60;   

//Progress bar settings   

//进度条的设定,比如显色边框等   

private static var _BarWidth:int = 200;   

private static var _BarHeight:int = 12;   

private static var _BarBackground:uint  = 0xFFFFFF;   

private static var _BarOuterBorder:uint = 0x737373;   

private static var _BarColor:uint = 0x6F9FD5;   

private static var _BarInnerColor:uint = 0xFFFFFF;   

private var isReady:Boolean = false;   

public  var progress:Number;   

private var _logoData : BitmapData;   

public function WelcomeScreen()   

{   

//this.loadBytes(new WelcomeScreenGraphic() as ByteArray);   

}   

override public function get width() : Number   

{   

return Math.max(_BarWidth, _LogoWidth) + _LeftMargin + _RightMargin;   

}   

override public function get height() : Number   

{   

return _LogoHeight + _BarHeight + _Padding + _TopMargin + _BottomMargin;   

}   

/**  

* 进度载入完毕后,隐藏进度条  

*/  

public function set ready(value : Boolean) : void  

{   

this.isReady = value;   

this.visible = !this.isReady;   

}   

public function get ready() : Boolean { return this.isReady; }   

/**  

* 刷新函数,每个时钟周期都被调用的函数  

*/  

public function refresh():void  

{   

_logoData = this.drawProgressBar();   

var encoder:PNGEncoder = new PNGEncoder();   

this.loadBytes(encoder.encode(_logoData));   

}   

/**  

* 进度条生成函数  

*/  

private function drawProgressBar():BitmapData   

{   

// create bitmap data to create the data   

var data : BitmapData = new BitmapData(this.width, this.height, true, 0);   

// draw the progress bar   

var s:Sprite = new Sprite();   

var g:Graphics = s.graphics;   

// draw the bar background   

g.beginFill(_BarBackground);   

g.lineStyle(2, _BarOuterBorder, 1, true);   

var px : int = (this.width - _BarWidth) / 2;   

var py : int = _TopMargin + _LogoHeight + _Padding;   

g.drawRoundRect(px, py, _BarWidth, _BarHeight, 2);   

var containerWidth : Number = _BarWidth - 4;   

var progWidth:Number = containerWidth * this.progress / 100;   

g.beginFill(_BarColor);   

g.lineStyle(1, _BarInnerColor, 1, true);   

//根据progress进度,来画出进度条的长度   

g.drawRect(px + 1, py + 1, progWidth, _BarHeight - 3);   

data.draw(s);   

return data;   

}   

}   

 

}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值