Flex 图片 幻灯片效果初探

Flex 图片 幻灯片效果初探

这一段时间工作太慢了, 都快半年没更新了,

最近一至在做一个Flex的项目, 用到了图片的幻灯片效果, 在网上搜了好久, 也没有找到一个有帮助的结果,

于是只好自己研究了 --!

经过两个多小时的试验,终于小有成就, 现将阶段性代码发表出来, 方便有同样需求的人借鉴（不要再像我一样，浪费N多时间用于搜索）

 

 

 

<? xml version="1.0" encoding="utf-8" ?>   
<!--  ************************************************************
* 版权：XingFuStudio
*
* 文件名：ImageEffect
* 文件功能描述：图片的幻灯片播放效果
*
* 作者：XingFuStar
* 网站：Http://XingFuStar.cnblogs.com
* 日期：2009年2月20日
*
* 当前版本：V1.0.0
* 
* 修改人：
* 修改日期：
* 修改内容：
*************************************************************  -->
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  
    creationComplete ="InitApp()" >
    
     < mx:Script >
         <![CDATA[
            import mx.controls.Alert;
            import mx.events.FlexEvent;
            import mx.effects.*;
            import mx.collections.ArrayCollection;
            
            //效果集合,用来绑定Image
            [Bindable]
            private var effects:ArrayCollection = new ArrayCollection();
            //应用效果的索引
            [Bindable]
            private var effectIndex:int = 0;
            //图片集合
            private var pictures:ArrayCollection = new ArrayCollection();
            //时间控件
            private var timer:Timer;
            //这个变量用来配合时间控件
            private var tempInt:int = 0;
            
            /**
             * 初始化
             */
            private function InitApp():void
            {
                //初始化效果集合
                this.effects.addItem(new WipeDown());
                this.effects.addItem(new WipeLeft());
                this.effects.addItem(new WipeRight());
                this.effects.addItem(new WipeUp());
                //this.Effects.addItem(new Blur()); //这个一般，效果不明显
                this.effects.addItem(new Dissolve());
                this.effects.addItem(new Fade());
                //this.Effects.addItem(new Glow()); //只默认的情况下，没有较果
                this.effects.addItem(new Iris());
                //this.Effects.addItem(new Move()); //只默认的情况下，没有较果
                //this.Effects.addItem(new Resize()); //只默认的情况下，没有较果
                //this.Effects.addItem(new Rotate()); //旋转的，效果不是很好
                this.effects.addItem(new Zoom());
                
                //初始化图片集合
                this.pictures.addItem("../images/1.jpg");
                this.pictures.addItem("../images/2.jpg");
                this.pictures.addItem("../images/3.jpg");
                this.pictures.addItem("../images/4.jpg");
                this.pictures.addItem("../images/5.jpg");
                this.pictures.addItem("../images/6.jpg");
                this.pictures.addItem("../images/7.jpg");
                this.pictures.addItem("../images/8.jpg");
                
                //初始化时间控件
                this.timer = new Timer(2 * 1000 , 0.0);
                //添加时间控件的计时事件
                this.timer.addEventListener(TimerEvent.TIMER, OnTimerTick);
                //启动时间控件
                this.timer.start();
                
                //this.imageUp.addEventListener(Event.COMPLETE
            }
            
            /**
             * 时间控件事件方法
             */
            private function OnTimerTick(event:TimerEvent):void
            {
                
                if(this.tempInt == 0)
                {
                    //当TempInt为0时
                    //随机生成一个图片索引, 更新上层的图片
                    var ramdomNumber:Number=GetRandNumber(0, this.pictures.length - 1);
                    this.imageUp.source = this.pictures.getItemAt(ramdomNumber);
                }
                else
                {
                    //计算下一张图应用的效果, 同时更新下层的图片与上层的图片相同
                    //这里为什么用两个Image原因是: 当用一个Image时,更新图片的过程中, 会出现闪烁
                    //两个Image,其中一个用来更新显示,另一个用来缓存上一次加载的图片
                    this.effectIndex = GetRandNumber(0, this.effects.length - 1);
                    this.imageDown.source = this.imageUp.source;
                }    
                
                //计算下次时间控件循环时,tempInt的值, tempInt值为 0 或 1
                this.tempInt = (this.tempInt + 1) % 2;            
            }
            
            /**
             * 获取指定范围内的随机数（包括最大值最小值）
             * 
             * @param min 最小值
             * @param max 最大值
             */
            private function GetRandNumber(min:Number, max:Number):Number 
            {
                var randNumber:Number = Math.floor(Math.random() * (max - min + 1)) + min;
                
                return randNumber;
            }
         ]]>
     </ mx:Script >
    
    
    
     < mx:Image  id ="imageDown"  width ="640"  height ="480"  source ="../images/1.jpg" />
     < mx:Image  id ="imageUp"  width ="640"  height ="480"  source ="../images/1.jpg"
        completeEffect ="{this.effects.getItemAt(effectIndex)}" />
</ mx:Application >
        

 

版权：htpp://xingfustar.cnblogs.com 

 

这里使用了两个Image， 其中ImageUp用来显示带效果的图片， IamgeDown作用是用来缓存上一张图片， 目的是防止用单一Image时图片更换时闪烁一下