Flash ActionScript (13)Tweener应用实现堆放的照片效果

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

 

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

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

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

　　注：下面附：tweener_1_33_74_as3.zip 文件下载

　　下载后，解压会产生一个叫：caurina的文件夹。

　　记住，将你的fla文件放在与caurina文件夹相同的目录中。

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

　　首先，建一个flash as3.0文档。

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

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

　　下面的事情是，第二张照片，一样的做法，实例名称为：photo2

　　接下来，第3张，第4张…….,实例名称：photo3,photo4…….

　　好了，开始写代码了，新建一层，按习惯，这层的名称应该是：action,你也可以把它叫做张三，李四，王二麻子。或许你把它叫做西瓜也许很有创意。

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

　　首先，需要导入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.setChildIndex(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句是移动图片。

　　Tweener的addTween方法产生一个补间效果。

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.setChildIndex(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.setChildIndex(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.setChildIndex(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;　
}