带来一篇Flash AS3.0教程:Tweener类完成堆放的照片殊效-Flash actionscript
不是MX版本升级到MX2004时的那么简单，而是实现了新的飞跃。poluoluo中心提醒：本例先容使用FlashAS3.0代码中的Tweener类使用完成堆放的照片动画效果，在教程中我们将进修到Tweener这个开源的补间效果的使用，经由过程本例的进修，应当能把握Tweener的基础用法，但愿伴侣们喜好.
本例先容使用FlashAS3.0代码中的Tweener类使用完成堆放的照片动画效果，在教程中我们将进修到Tweener这个开源的补间效果的使用，经由过程本例的进修，应当能把握Tweener的基础用法，但愿伴侣们喜好~~
这是一个堆放的照片的交互式的效果，它模似了在手中翻看照片的效果。对照合适用于较多照片的相册。效果以下：
http://www.webjx.com/files/media/1_100314202826.swf
在这个效果中，接纳了Tweener，这是一个开源的补间效果，它比Adobe的Tweener类要好用很多。经由过程本例的进修，应当能把握Tweener的基础用法了。要利用这个类，必要下载源码：
下载地点：http://code.google.com/p/tweener/downloads/list
这里有几个版本，我用的是AS3,以是下了：tweener_1_33_74_as3.zip
下载后，解压会发生一个叫：caurina的文件夹。
记着，将你的fla文件放在与caurina文件夹不异的目次中。
好了，如今我们已具有了Tweener了，接上去我们来做这个相册。
起首，建一个flashas3.0文档。
假如你想要一张图片做背景的话，你能够导进一张图片，放到舞台上，作为背景层，然后将这一层上锁。
新拔出一图层，在这一层我们将把我们的照片放出去。照片要调剂巨细，宽度为舞台的一半摆布，将照片放到舞台的右边。我们来对比片举行一些润色。点中照片，将它转换为影片剪辑，注册点调到中央地位。双击它，进进编纂窗口，在照片层一上面新建一层，用红色添补的矩形画一个对比片年夜一点的矩形，这实践上就是为照片加上了一个红色的边。回到主场景，点中照片元件，翻开属性>滤镜面板，为它增加一个发光滤镜，色彩为玄色，值为10.如许就给照片加上了一个暗影了。接上去，在属性面板中为照片元件取一个实例称号：photo1.
上面的事变是，第二张照片，一样的做法，实例称号为：photo2
接上去，第3张，第4张…….,实例称号：photo3,photo4…….
好了，入手下手写代码了，新建一层，按习气，这层的称号应当是：action,你也能够把它叫做张三，李四，王二麻子。也许你把它叫做西瓜大概很有创意。
翻开帧举措面板，写代码：(前面会有完全代码)
起首，必要导进Tweener类：
importcaurina.transitions.*;
接上去声明一些变量，前面要用：
varphotoOriginX:Number=photo1.x;//照片的原始地位，将它设为第1张照片的地位。照片被点击后，会移到右侧，然后会回到这个地位上。
varphotoDestX:Number=photoOriginX+200;//这是照片移到右侧的地位，它在原始地位的基本上，向右移了200像素。
varspeed:Number=.5;//这是挪动必要的工夫，被设为了0.5秒。
varrotationRange:Number=10;//这是照片扭转角度的限定
varphotoCount:Number=3;//照片的数目，我只用了3张照片，以是设为3,你有几张照片，这里就设为几。
vareaseType:String="ea搜索引擎优化utquad";//这是缓动的范例，Tweener有良多缓动范例。以下图：
从下面的图中我们能够看到，我们用的是：ea搜索引擎优化utquad
从图中能够看出，这个效果是，入手下手是较快，在要停止时，挪动最慢。
接上去是一个函数，在点击时，图片向右侧挪动：
functionphotoSlideOut(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:});
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函数：
functionphotoSlideIn(p:MovieClip)
{
p.parent.setChildIndex(p,1);
Tweener.addTween(p,{x:photoOriginX,time:speed,transition:easeType});
}
这个函数，起首将照片的索引号设为1,放到了最上面一层，然后用Tweener将照片移回到原始地位。
接上去的两句对照复杂：
for(vari=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角度的扭转。
代码就这么多，快尝尝吧。
完全代码：
importcaurina.transitions.*;
varphotoOriginX:Number=photo1.x;
varphotoDestX:Number=photoOriginX+200;
varspeed:Number=.5;
varrotationRange:Number=10;
varphotoCount:Number=3;
vareaseType:String="ea搜索引擎优化utquad";
functionphotoSlideOut(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:});
Tweener.addTween(e.target,{rotation:Math.floor(Math.random()*(rotationRange*2))-rotationRange,time:speed*2,transition:easeType});
}
functionphotoSlideIn(p:MovieClip)
{
p.parent.setChildIndex(p,1);
Tweener.addTween(p,{x:photoOriginX,time:speed,transition:easeType});
}
for(vari=1;i<=photoCount;i++)
{
this["photo"+i].addEventListener(MouseEvent.MOUSE_DOWN,photoSlideOut);
this["photo"+i].rotation=Math.floor(Math.random()*(rotationRange*2))-rotationRange;
}
此外，还支持α透明功能，能够设计人员在Flash视频中对诸如文本、矢量图像以及其它Flash元素等进行整合。 在Web上只好把动画做得很小。即使最简单的动画也需要较长的下载时间。Flash的流技术和矢量图形对这种情况做了改变。 富媒体可应用于各种网络服务中，如网站设计、电子邮件、BANNER、BUTTON、弹出式广告、插播式广告等。 各类广告形式，相信大部分网民基本都关注过，而毋庸置疑，一个画面精美，生动活泼的互动Flash动画广告，比其他广告形式更加吸引你我的眼球。这就是Flash动画的优势。 Flash也支持alpha通道，这会使设计者高兴。没有太多的技术性，alpha通道是附加在图像上的信息 - 允许图像以不同的方式渲染。 flash 有这么多的优势,那么它的优缺点和设计方面的关系是什么？ 作为奖赏，你可以使用关键祯动画支持和tweening- 两个最主要的节省时间的方式。本质上，关键祯是动画中显著事件发生的位置。 对插件的批评之一是他们一般出现在称为Box的网页的一个预定的区域。虽然在某种情况下表现不错，但Box经常以罪魁祸首的面目出现。
页:
[1]