这是个堆放照片交互式效果它模似了在手中翻看照片效果比较适合用于较多照片相册效果如下:



　　在这个效果中采用了Tweener这是个开源补间效果它比AdobeTweener类要好用得多通过本例学习应该能掌握Tweener基本使用方法了要使用这个类需要下载源码:

　　下载地址:http://code.google.com/p/tweener/downloads/list

　　这里有几个版本我用是AS3,所以下了:tweener_1_33_74_as3.zip

　　下载后解压会产生个叫:caurina文件夹

　　记住将你fla文件放在和caurina文件夹相同目录中

　　好了现在我们已经拥有了Tweener了接下来我们来做这个相册

　　首先建个flash as3.0文档

　　如果你想要张图片做背景话你可以导入张图片放到舞台上作为背景层然后将这层上锁

　　新插入图层在这层我们将把我们照片放进来照片要调整大小宽度为舞台半左右将照片放到舞台左边我们来对照片进行些修饰点中照片将它转换为影片剪辑注册点调到中心位置双击它进入编辑窗口在照片层下面新建层用白色填充矩形画个比照片大点矩形这实际上就是为照片加上了个白色边回到主场景点中照片元件打开属性>滤镜面板为它添加个发光滤镜颜色为黑色值为10.这样就给照片加上了个阴影了接下来在属性面板中为照片元件取个例子名称:photo1.

　　下面事情是第 2张照片样做法例子名称为:photo2

　　接下来第3张第4张…….,例子名称:photo3,photo4…….

　　好了开始写代码了新建层按习惯这层名称应该是:action,你也可以把它叫做张 3李 4王 2麻子或许你把它叫做西瓜也许很有创意

　　打开帧动作面板写代码:(后面会有完整代码)

　　首先需要导入Tweener类:

　　import caurina.transitions.*;

　　接下来声明些变量后面要用:

　　var photoOriginX:Number = photo1.x; //照片原始位置将它设为第1张照片位置照片被点击后会移到右边然后会回到这个位置上

　　var photoDestX:Number = photoOriginX + 200; //这是照片移到右边位置它在原始位置基础上向右移了200像素

　　var speed:Number = .5; //这是移动需要时间被设为了0.5秒

　　var rotationRange:Number = 10; //这是照片旋转角度限制

　　var photoCount:Number = 3; //照片数量我只用了3张照片所以设为3,你有几张照片这里就设为几

　　var easeType:String = "easeoutquad";//这是缓动类型Tweener有很多缓动类型如下图:



　　　　查看原图(大图)

　　从上面图中我们可以看到我们用是:easeoutquad



　　从图中可以看出这个效果是开始是较快 在要结束时移动最慢

　　接下来是个在点击时图片向右边移动:

function　photoSlideOut(e:Event):void　
{　
e.target.parent.ChildIndex(e.target,　e.target.parent.numChildren　-　1);　
Tweener.addTween(e.target,　{x:　photoDestX,　time:　speed,　transition:　easeType,　onComplete:photoSlideIn,　onCompleteParams:[e.target]});　
Tweener.addTween(e.target,　{rotation:　Math.floor(Math.random*(rotationRange*2))-rotationRange,　time:　speed*2,　transition:　easeType});　
}　

　　上面中第1句是将被点击照片移到最上层

　　第2句是移动图片

　　TweeneraddTween思路方法产生个补间效果

　　addTween思路方法:

　　第1个参数:e.target是要应用补间对象这里是被点击图片

　　第2个参数:x是对象属性这里是对象x属性你可以改变对象其它任何值

　　第3个参数:photoDestX是这个属性值被改变后值这里是x被改变为photoDestX即被点击照片x属性被改为向右移了200像素

　　第4个参数:time是改变这个值需要时间

　　第5个参数:transition是缓动类型

　　第6个参数:onComplete是在这次补间完成时要执行这里在向移完成后photoSlideIn使照片移回原处

　　第7个参数:onCompleteParams是传递给onComplete参数这里将被点击图片传给photoSlideIn

　　整理总结下:Tweener基本使用方法:

　　Tweener.addTween(要被应用补间对象{属性:变化后值time:所需时间})；

　　上面第3句再次应用Tweener这次是产生个从10到-10旋转补间动作

　　接下来是photoSlideIn:

function　photoSlideIn(p:MovieClip)　
{　
p.parent.ChildIndex(p,　1);　
Tweener.addTween(p,　{x:　photoOriginX,　time:　speed,　transition:　easeType});　
}　

　　这个首先将照片索引号设为1,放到了最下面层然后用Tweener将照片移回到原始位置

　　接下来两句比较简单:

for(var　i=1;　i<=photoCount;　i)　
{　
this["photo"+i].addEventListener(MouseEvent.MOUSE_DOWN,　photoSlideOut);　
this["photo"+i].rotation　=　Math.floor(Math.random*(rotationRange*2))-rotationRange;　
}　

　　让所有图片侦听点击事件photoSlideOut

　　使所有图片产生个从10到-10角度旋转

　　代码就这么多快试试吧

　　完整代码:

import　caurina.transitions.*;　
var　photoOriginX:Number　=　photo1.x;　
var　photoDestX:Number　=　photoOriginX　+　200;　
var　speed:Number　=　.5;　
var　rotationRange:Number　=　10;　
var　photoCount:Number　=　3;　
var　easeType:String　=　"easeoutquad";　
function　photoSlideOut(e:Event):void　
{　
e.target.parent.ChildIndex(e.target,　e.target.parent.numChildren　-　1);　
Tweener.addTween(e.target,　{x:　photoDestX,　time:　speed,　transition:　easeType,　onComplete:photoSlideIn,　onCompleteParams:[e.target]});　
Tweener.addTween(e.target,　{rotation:　Math.floor(Math.random*(rotationRange*2))-rotationRange,　time:　speed*2,　transition:　easeType});　
}　
function　photoSlideIn(p:MovieClip)　
{　
p.parent.ChildIndex(p,　1);　
Tweener.addTween(p,　{x:　photoOriginX,　time:　speed,　transition:　easeType});　
}　
for(var　i=1;　i<=photoCount;　i)　
{　
this["photo"+i].addEventListener(MouseEvent.MOUSE_DOWN,　photoSlideOut);　
this["photo"+i].rotation　=　Math.floor(Math.random*(rotationRange*2))-rotationRange;　
}