前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flex + XML的图片轮显

Flex + XML的图片轮显

作者头像
meteoric
发布2018-11-16 15:28:14
3580
发布2018-11-16 15:28:14
举报
文章被收录于专栏:游戏杂谈游戏杂谈

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

image
image

有待优化的问题:

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

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

3、界面UI美化

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

image
image

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

代码语言:javascript
复制
<?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>

参考网站:

1、【原创】使用Flex实现图片(广告)切换控件

2、图片的showEffect

提供示例的完全源码下载,点此立即下载>>

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2011-09-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档