Flex + XML的图片轮显

最新推荐文章于 2024-11-11 23:34:09 发布

weixin_34242658

最新推荐文章于 2024-11-11 23:34:09 发布

阅读量102

点赞数

文章标签： ui javascript ViewUI

点击查看示例运行效果>>

有待优化的问题：

1、载入图片未做loading处理；

2、图片未使用延时加载处理，默认加载了全部的图片；

3、界面UI美化

逻辑部分与JavaScript有些类似，在解析XML时，单独写了一个as类来处理，btn的外观使用了CSS进行控制，资源全部放在名为assets文件夹目录下，工程目录

主文件的代码(PictureSwitch.mxml)：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
                width="800" height="600" 
                creationComplete="inited()" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
import mx.controls.Alert;
import mx.controls.Button;
import mx.controls.Image;
import mx.effects.Effect;
import mx.effects.Iris;
import mx.effects.WipeLeft;
import mx.effects.WipeRight;
import mx.managers.ToolTipManager;

import vo.AdVO;

private static const XML_URL:String = "assets/xml/ad.xml";
private var xmlDataArr:Array;
private var timer:Timer;
private var currentIdx:Number;
private var buttonArr:Array;
private var imagesArr:Array;

private function inited():void
            {
                var _loader:URLLoader = new URLLoader();
                var _req:URLRequest = new URLRequest(XML_URL);

                _req.method = URLRequestMethod.GET;

                _loader.dataFormat = URLLoaderDataFormat.TEXT;

                _loader.addEventListener(Event.COMPLETE, completeHandler);
                _loader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
                _loader.load(_req);
            }

private function progressHandler(evt:ProgressEvent):void
            {
                var str:String = "Loading "  + Math.floor((evt.bytesLoaded / evt.bytesTotal) * 100) + "%";

                setTxt(str);
            }

private function completeHandler(evt:Event):void
            {
                xmlDataArr = [];
                buttonArr = [];
                imagesArr = [];

                var _loader:URLLoader = evt.target as URLLoader;

                _loader.removeEventListener(Event.COMPLETE, completeHandler);
                _loader.removeEventListener(ProgressEvent.PROGRESS, progressHandler);

                var _xml:XML = XML(_loader.data);
                var _adVO:AdVO;
                var _idx:Number = 0;

for each (var x:XML in _xml.child("item"))
                {
                    _idx++;

                    _adVO = new AdVO(x);

                    createPictureItem(_adVO, _idx);

                    xmlDataArr.push(_adVO);
                }

                ToolTipManager.enabled = false;

                autoPlay();

                timer = new Timer(3000, 0);
                timer.addEventListener(TimerEvent.TIMER, autoPlay);
                timer.start();

                loadingTxt.visible = false;
            }

private function createPictureItem(adVO:AdVO, idx:Number):void
            {
                var _button:Button = new Button();
                _button.width = 30;
                _button.height = 15;
                _button.buttonMode = true;
                _button.label = idx.toString();
                _button.addEventListener(MouseEvent.CLICK, changeHandler);

                btnContainer.addChild(_button);

                buttonArr.push(_button);


                var _image:Image = new Image();
                _image.x = 0;
                _image.y = 0;
                _image.source = adVO.getImgUrl();
//                _image.visible = false;
                _image.setStyle("showEffect", getRandomEffect());
//                _image.setStyle("hideEffect", "fadeOut");
                _image.buttonMode = true;

                _image.addEventListener(MouseEvent.CLICK, clickHandler);

                imgContainer.addChild(_image);

                imagesArr.push(_image);
            }

private function autoPlay(evt:TimerEvent=null, idx:Number=NaN):void
            {
                var _btn:Button;
                var _img:Image;

if (!isNaN(currentIdx))
                {
                    _btn = Button(buttonArr[currentIdx]);
                    _btn.styleName = "";

//                    _img = Image(imagesArr[currentIdx]);
//                    _img.visible = false;
                }

if (isNaN(currentIdx))
                {
                    currentIdx = 0;
                } 
else {

if (!isNaN(idx))
                    {
                        currentIdx = idx;
                    }
else
                    {
                        currentIdx += 1;
                    }

if (currentIdx > buttonArr.length - 1)
                    {
                        currentIdx = 0;
                    }
                }

                _btn = Button(buttonArr[currentIdx]);
                _btn.styleName = "selected";

                _img = Image(imagesArr[currentIdx]);
                _img.parent.setChildIndex(_img, imagesArr.length - 1);
                _img.visible = false;
                _img.visible = true;
            }

private function getRandomEffect():String
            {
                var arr:Array = [
'fadeIn', 
'iris',
'wipeRight',
'wipeLeft',
'blur',
'dissolve'
                ];

                var idx:Number = Math.floor(Math.random() * arr.length);

return arr[idx].toString();
            }

private function changeHandler(evt:MouseEvent=null):void
            {
                timer.stop();
                timer.reset();
                timer.start();

                var _btn:Button = Button(evt.target);
                var _idx:Number = _btn.parent.getChildIndex(_btn);

if (_idx !== currentIdx)
                {
                    autoPlay(null, _idx);
                }
            }

private function clickHandler(evt:MouseEvent):void
            {
                var adVO:AdVO = xmlDataArr[currentIdx] as AdVO;

                Alert.show("点击了" + (currentIdx + 1).toString() + "--打开链接：" + adVO.url);
            }

private function setTxt(txt:String):void
            {
                loadingTxt.htmlText = txt;
            }

        ]]>
    </mx:Script>

    <mx:Style>
        Application {
            theme-color : #FFFFFF;
            font-size : 12;
            background-alpha : 0.0;
            border-color : #FFFFFF;
        }

        Button
        {
            font-weight:normal;
            corner-radius : 0;
            font-size : 9;
            color : #FFFFFF;
            background-color : #FF0000;
            fill-alphas:0.3, 0,3;
            fill-colors:"#FF0000", "#FF0000";
            background-color:#FF0000;
        }

        .selected {
            font-weight:bold;
            fill-alphas:1.0, 1.0;
        }
    </mx:Style>

    <mx:Iris id="iris" />
    <mx:Fade id="fadeIn" duration="1000" alphaTo="1.0" />
    <mx:Fade id="fadeOut" duration="800" alphaTo="0.0" alphaFrom="1.0" />
    <mx:WipeRight id="wipeRight" />
    <mx:WipeLeft id="wipeLeft" />
    <mx:Blur id="blur" duration="1000" blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0" />
    <mx:Dissolve duration="1000" alphaFrom="0.0" alphaTo="1.0" id="dissolve" />

    <mx:Canvas width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">

        <mx:Canvas id="mask" width="100%" height="100%" backgroundColor="#FFFFFF" alpha="0" />

        <mx:Canvas id="imgContainer" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" />

        <mx:HBox id="btnContainer" width="100%" verticalAlign="bottom" bottom="10" right="10" horizontalAlign="right" horizontalGap="2" />

        <mx:Text text="loading..." id="loadingTxt" horizontalCenter="0" verticalCenter="-10" />

    </mx:Canvas>


</mx:Application>