这是一个Flex的自定义Loading效果,如果你看不到这个flash,请到文章页面查看!
Flex里自定义Loading必须继承mx.preloaders.DownloadProgressBar,并定义主程序Application的preloader属性为自定义的loading类。
一般可以定义downloadingLabel属性来更改进度条显示的文字。
不过可以完成自定义loading。
MyLoading:
package com.litefeel.preloader
{
import flash.display.Loader;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.net.URLRequest;
import flash.text.TextField;
import flash.text.TextFormat;
import mx.events.FlexEvent;
import mx.preloaders.DownloadProgressBar;
/**
* www.litefeel.com
* lite3@qq.com
* @author lite3
*/ public class MyLoading extends DownloadProgressBar
{
private var _preloader:Sprite;
private var logo:Loader = new Loader();
private var loadingBar:Shape = new Shape();
private var txt:TextField = new TextField();
public function MyLoading()
{
// logo
logo.load(new URLRequest("http://www.litefeel.com/logo/logo.jpg"));
addChild(logo);
// loading bar
addChild(loadingBar);
// txt
var style:TextFormat = new TextFormat(null, null, 0xFFFFFF, null, null, null, null, null, "center");
txt.defaultTextFormat = style;
txt.selectable = false;
txt.width = 200;
txt.height = 50;
addChild(txt);
super();
}
override public function set preloader(value:Sprite):void
{
_preloader = value;
_preloader.contextMenu = MyContextMenu.getMyContextNenu();
//四个侦听~分别是 加载进度 / 加载完毕 / 初始化进度 / 初始化完毕
_preloader.addEventListener(ProgressEvent.PROGRESS, loadProgressHandler);
_preloader.addEventListener(Event.COMPLETE, loadCompleteHandler);
_preloader.addEventListener(FlexEvent.INIT_PROGRESS, loadInitProgressHandler);
_preloader.addEventListener(FlexEvent.INIT_COMPLETE, loadInitCompleteHandler);
stage.addEventListener(Event.RESIZE, resizeHandler);
resizeHandler(null);
}
private function loadProgressHandler(event:ProgressEvent):void
{
var ratio:Number = event.bytesLoaded/event.bytesTotal;
// loading bar
loadingBar.graphics.clear();
loadingBar.graphics.beginFill(Math.random() * 0xFFFFFF);
loadingBar.graphics.drawRect(0,0, ratio*128, 5);
loadingBar.graphics.endFill();
// txt
txt.text = "Lite3.cn loading " + ((ratio*100)>>0) + "%";
}
private function loadCompleteHandler(event:Event):void
{
txt.text = "Lite3.cn loading ok!";
}
private function loadInitProgressHandler(event:FlexEvent):void
{
txt.text = "Lite3.cn initialization!";
}
private function loadInitCompleteHandler(event:FlexEvent):void
{
txt.text = "Lite3.cn initialization ok!";
_preloader.removeEventListener(ProgressEvent.PROGRESS, loadProgressHandler);
_preloader.removeEventListener(Event.COMPLETE, loadCompleteHandler);
_preloader.removeEventListener(FlexEvent.INIT_PROGRESS, loadInitProgressHandler);
_preloader.removeEventListener(FlexEvent.INIT_COMPLETE, loadInitCompleteHandler);
stage.removeEventListener(Event.RESIZE, resizeHandler);
//最后这个地方需要dpepatch一个Event.COMPLETE事件..表示加载完毕让swf继续操作~
dispatchEvent(new Event(Event.COMPLETE));
}
private function resizeHandler(event:Event):void
{
logo.x = (stage.stageWidth-128) * .5;
logo.y = (stage.stageHeight-185) *.5;
loadingBar.x = (stage.stageWidth-128) * .5;
loadingBar.y = (stage.stageHeight-185) *.5 + 128;
txt.x = (stage.stageWidth-200) * .5;
txt.y = (stage.stageHeight-185) *.5 + 135;
graphics.clear();
graphics.beginFill(0x333333);
graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
graphics.endFill();
}
}
}
MXML:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
preloader="cn.lite3.preloader.MyLoading">
<mx:DateField x="25" y="24"/>
<mx:DateChooser x="10" y="54"/>
<mx:TextArea x="333" y="139" text="加载完毕!" color="#F8082A"/>
</mx:Application>
» 转载请注明来源:www.litefeel.com » 《Flex自定义loading》
» 本文链接地址:https://www.litefeel.com/flex-customize-loading/
» 订阅本站:www.litefeel.com/feed/
» Host on Linode VPS
» 本文链接地址:https://www.litefeel.com/flex-customize-loading/
» 订阅本站:www.litefeel.com/feed/
» Host on Linode VPS
This post was last modified on 2019 年 03 月 04 日 01:31
View Comments (2)
@textnext
:grin: 好的,留下你QQ我们互相学习
目前在学习flex制作网页游戏,有兴趣合作的可以聊聊。