X

Flex自定义loading

这是一个Flex的自定义Loading效果,如果你看不到这个flash,请到文章页面查看!

Flex里自定义Loading必须继承mx.preloaders.DownloadProgressBar,并定义主程序Applicationpreloader属性为自定义的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>

完整测试包下载

This post was last modified on 2019 年 03 月 04 日 01:31

View Comments (2)

This website uses cookies.