本例继续讲解AS的基础知识，今天我们来学习Flash AS入门系列教程第七课_影片剪辑第七节：用AS代码实现过渡，教程讲解了遮帘过渡、淡化过渡、飞行过渡、光圈过渡、照片过渡、像素溶解过渡、旋转过渡、挤压过渡、划入/划出过渡、缩放过渡的制作，对Flash的AS编程有兴趣的朋友可以到论坛与作者交流。

用AS实现过渡效果

效果演示：

 

 

通过 TransitionManager 类，您可以迅速将令人印象深刻的过渡动画效果应用于影片剪辑。TransitionManager为我们提供了10种过渡效果。下面来看看怎样使用TransitionManager类来实现过渡效果。

要实现过渡效果，为编写代码更为方便首先需要导入所有 mx.transitions 类和所有 mx.transitions.easing 类：
import mx.transitions.*;
import mx.transitions.easing.*;
在导入上面两个类以后，就可以使用TransitionManager类的start()方法将过渡效果应用于影片剪辑上。
格式：TransitionManager.start(影片剪辑名称，{ type:过渡类型，direction:方向，duration:过渡所所需的时间，easing:缓动效果，各种过渡效果所需的参数})；

start()方法参数的说明：
影片剪辑名称：就是要应用过渡效果的MC的实例名称。
过渡类型：上面已提到共有10种过渡效果，这里填上要用的过渡效果名称。下面将分别介绍这十种效果。

direction:方向：即过渡是进入还是退出。可以用两个值：Transition.IN和Transition.OUT

duration:过渡所所需的时间：一般一个过渡几秒就够了吧，常用3-5。

easing:缓动效果：在过渡效果中可以为过渡效果添加缓动效果，有关缓动效果后面将专门介绍，这里先介绍一个值，我们才好测试过渡效果。None.easeNone用这个值，就是不用缓动效果。

各种过渡效果所需的参数：除了上面的的参数外，每一种过渡效果可能还有自已的参数，那么就跟在后面就行了。
有了上面的介绍，我们已经对TransitionManager类有了一个大概的认识，下面我们来介绍这十种过渡效果，并用练习来实现它，这样我们便能掌握TransitionManager的应用了。

遮帘过渡：Blinds

这个是什么效果呢？文字说不清楚，自已看吧，就这个效果：

参数

numStrips，"遮帘"效果中的遮罩条纹数。建议的范围是 1 到 50。
dimension，一个整数，指示遮帘条纹是垂直的 (0) 还是水平的 (1)。
下面我们来制作这个效果：
1． 新建flash文档，导入一张图片到舞台，打开对齐面板，宽高匹配，居中对齐。
2． 点中图片：将其转换为MC，实例名称为：img1_mc.，在第50帧插入帧。
3． 点第1帧，右键打开动作面板，输入如下代码：
import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc,{type:Blinds, irection:Transition.IN, duration:2, easing:None.easeNone, numStrips:10, dimension:0});

测试影片，怎么样？看到效果了吧。

这些代码不用解释了吧。

淡化过渡：Fade

效果：

制作方法跟前面一样，只是把代码改为：
import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc, {type:Fade, direction:Transition.IN, duration:3, easing:None.easeNone});
这个过渡跟上面的过渡比较起代码不同的是，上面的过渡自已有两个参数，而这个过渡则没有自已的参数。
现在你可能已经感觉到用代码实现的过渡效果比自已在计设环境中去设透明度，做遮罩要简单得多。废话，要不我在这废这么多口舌干啥呢？继续往下看吧，好东西还多呢。

飞行过渡：Fly

效果：

参数：startPoint，一个指示起始位置的整数；范围是 1 到 9：
左上，1；上中，2；右上，3；左中，4；中心，5；右中，6；左下，7；下中，8；右下，9。
代码：import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc,{type:Fly, direction:Transition.IN, duration:3, easing:None.easeNone, startPoint:9});
这里最后又跟了一个自带的参数，你可以改变一下这个参数，让图片从不同的方向飞入。

光圈过渡：Iris

效果：

参数：startPoint，一个指示起始位置的整数；范围是 1 到 9：
左上，1；上中，2；右上，3；左中，4；中心，5；右中，6；左下，7；下中，8；右下，9。
shape，值为Iris.SQUARE（方形）或Iris.CIRCLE（圆形）的遮罩形状
代码：import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc, {type:Iris, direction:Transition.IN, duration:2, easing: None.easeNone, startPoint:5, shape:Iris.CIRCLE});

照片过渡：Photo

效果：

代码：import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start (img1_mc, {type:Photo, direction:Transition.IN, duration:1, easing:None.easeNone});

像素溶解过渡：PixelDissolve

效果：

参数：xSections，一个整数，指示沿水平轴的遮罩矩形部分的数目。建议的范围是 1 到 50。
ySections，一个整数，指示沿垂直轴的遮罩矩形部分的数目。建议的范围是 1 到 50。
代码：import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc, {type:PixelDissolve, direction:Transition.IN, duration:2, easing:None.easeNone, xSections:10, ySections:10});

旋转过渡：Rotate

效果：

参数：ccw 一个布尔值：对于顺时针旋转为 false；对于逆时针旋转为 true。
degrees，一个整数，指示对象要旋转的度数。建议是范围是 1 到 9999。例如，degrees 设置为 1080 时，会将对象完全旋转三次。
代码：import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc, {type:Rotate, direction:Transition.IN, duration:3, easing:None.easeNone, ccw:false, degrees:720});

挤压过渡：Squeeze

效果：

参数：dimension，一个整数，指示"挤压"效果应是水平的 (0) 还是垂直的 (1)。
代码：import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc, {type:Squeeze, direction:Transition.IN, duration:2, easing:None.easeNone, dimension:1});

划入/划出过渡：Wipe

效果：

参数：startPoint，一个整数，指示开始位置。范围是 1 到 4 和 6 到 9：
左上，1；上中，2；右上，3；左中，4；右中，6；左下，7；下中，8；右下，9。
代码：import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc, {type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:1});

 

缩放过渡：Zoom

效果：

代码：import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc, {type:Zoom, direction:Transition.IN, duration:2, easing:None.easeNone});

以上是十种过渡效果，你可以更改其中的参数，以实现不同的效果，同时你也可以调整图片MC的注册点，也可能出现不同的效果。

上面的easing参数我们全用的是None.easeNone，即不使用缓动效果，在这里你可以更改这个参数将缓动效果应用于过渡效果中。不过我经测试，加上缓动效果后，很多过渡效果失去原味，不是很理想，我不提昌在过渡中使用缓动效果，但这必竟是我个人的意见，因此缓动效果还得介绍，何况下节课还要用到它的，下面再说说缓动效果。

关于缓动类和方法：

Flash 提供了五个缓动类，每个缓动类都有三个方法，这些方法指示过渡动画的以下哪一部分应用缓动效果：在动画的开始、结尾或开始和结尾。此外，带有 easeNone 方法的 None 缓动类可用于指示未使用缓动。

下表描述了这 6 个缓动计算类。

缓动类 描述

Back 在过渡范围外的一端或两端扩展动画一次，以产生从其范围外回拉的效果。

Bounce 在过渡范围的一端或两端内添加弹跳效果。弹跳数与持续时间相关，持续时间越长，弹跳数越多。

Elastic 添加一端或两端超出过渡范围的弹性效果。弹性量不受持续时间影响。

Regular 在一端或两端添加较慢的运动。此功能使您能够添加加速效果、减速效果或这两种效果。

Strong 在一端或两端添加较慢的运动。此效果类似于 Regular 缓动类，但它更明显。

None 添加从开始到结尾无任何减速或加速效果的相同的运动。此过渡也称为线性过渡。

这 6 种缓动计算类的每一种都有三个缓动方法，它们指明缓动效果应用于动画的哪个部分。此外，None 缓动类还有第四个缓动方法：easeNone。

下表中描述了这些缓动方法：

方法 描述

easeIn 在过渡的开始提供缓动效果。
easeOut 在过渡的结尾提供缓动效果。
easeInOut 在过渡的开始和结尾提供缓动效果。
easeNone 指明不使用缓动计算。只在 None 缓动类中提供。

下面我们来看看使用方法。

用法：在过渡效果中：

TransitionManager.start（）方法的easing:参数用这个值：缓动类名.缓动方法
比如在上面的过渡效果中我们使用了：easing:None.easeNone表示没有用缓动。看上面两个表，可以看出，None是缓动类名，easeNone是类的方法。

下面将上面的缩放过渡的easeing参数改一下用Bounce类的easeOut方法让图片放大后产生一个弹跳的动作：

代码为：
import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start(img1_mc, {type:Zoom, direction:Transition.IN, duration:2, easing:Bounce.easeOut});
你可以将这个代码与上面的缩放过渡代码比较一下。
其它的过渡效果，就由你自已去试验了。

本课作业：完成本节开头的图片转场效果。

制作建议：将十种过渡效果按上面介绍的方法分别做成MC，并在第50帧上输入：stop();。在主场景第1层放一张背景图片，从第2层开始每隔50帧放一个做好的MC并延长100帧，每层只放1个MC。如第2层第1帧放1个，第100帧插入帧，第3层第51帧放1个，第150帧插入帧，以此类推。

评论 (0) All

登陆 还没注册？