这一段时间工作太慢了, 都快半年没更新了,
最近一至在做一个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时图片更换时闪烁一下
posted @ 2009-02-21 21:10 幸福★星 阅读(2356) 评论(3)
编辑