免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享

第十七课:影片剪辑Part7炫目过渡

本文来自:★flash之路-flash技术交流★ 转帖请注明出处! 作者:网雨霏霏 您是第4132个浏览者

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
flashroad友情提示:
“点评”不是“回帖”!

本节我们介绍视觉效果颇炫的过渡效果

只需通过TransitionManager 类,就可以迅速的将令人印象深刻的过渡动画效果应用于影片剪辑。




一、使用前提:
      TransitionManager
为我们提供了10种过渡效果。为编写代码更为方便,首先需要导入所有mx.transitions 类和所有 mx.transitions.easing 类:
import mx.transitions.*;
import mx.transitions.easing.*;




二、使用格式:
      在导入上面两个类以后,就可以使用TransitionManager类的start()方法将过渡效果应用于影片剪辑上。

格式:
TransitionManager.start(影片剪辑名称,{type:过渡类型,direction:方向,duration:过渡所所需的时间,easing:缓动效果,各种过渡效果所需的参数});





三、start()方法参数的说明:
1、影片剪辑名称:就是要应用过渡效果的MC的实例名称。
2、过渡类型:上面已提到共有10种过渡效果,这里填上要用的过渡效果名称。下面将分别介绍这十种效果。
3、direction:方向:即过渡是进入还是退出。可以用两个值:Transition.IN和
Transition.OUT
4、duration:过渡所所需的时间:一般一个过渡几秒就够了吧,常用3-5。
5、easing:缓动效果:在过渡效果中可以为过渡效果添加缓动效果,有关缓动效果后面将专门介绍,这里先介绍一个值,我们才好测试过渡效果。None.easeNone用这个值,就是不用缓动效果。
6、各种过渡效果所需的参数:除了上面的的参数外,每一种过渡效果可能还有自已的参数,那么就跟在后面就行了。



您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.

友情提示:单击下列任意一个表情,即可瞬间自动回复本帖!

好贴......
郁闷......
开心......
擦汗......
鄙视......
狂怒
谢谢
爱你呦
拜托了
嗯嗯
OMG
求关注
伤心......
无奈.....
无奈.....
无奈.....
无奈.....
无奈.....
哈哈哈
NO
OK
what
我来了

最近访问本帖者列表:

flashroad
访问时间:2018-09-03 20:00

打赏

取消

感谢您的支持,我会继续努力的!

扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by 爱秀代码,分享从这里开始,精彩与您同在

点评
B Color Smilies

您还可以输入:个字符
X

X

四、10种过渡效果逐一介绍:
        有了上面的介绍,我们已经对TransitionManager类有了一个大概的认识,下面我们来介绍这十种过渡效果,并用练习来实现它,这样我们便能掌握TransitionManager的应用了。

1、遮帘过渡:Blinds

参数:
numStrips,"遮帘"效果中的遮罩条纹数。建议的范围是 1 到 50。
dimension,一个整数,指示遮帘条纹是垂直的 (0) 还是水平的 (1)。
下面我们来制作这个效果:
1、新建flash文档,导入一张图片到舞台,打开对齐面板,宽高匹配,居中对齐。
2、点中图片:将其转换为MC,实例名称为img1_mc,在第50帧插入帧。
3、点第1帧,右键打开动作面板,输入如下代码:
本帖隐藏的内容需要回复才可以浏览

2、淡化过渡:Fade

制作方法跟前面一样,只是把代码改为:
本帖隐藏的内容需要回复才可以浏览


这个过渡跟上面的过渡相比较,代码不同的是,上面的过渡自已有两个参数,而这个过渡则没有自已的参数。
现在你可能已经感觉到用代码实现的过渡效果比自已在计设环境中去设透明度,做遮罩要简单得多。嘿嘿,继续往下看吧,好东西还多着呢。


3、飞行过渡:Fly

参数:
startPoint,一个指示起始位置的整数;范围是1 到 9:
左上,1;上中,2;右上,3;左中,4;中心,5;右中,6;左下,7;下中,8;右下,9。
代码:
本帖隐藏的内容需要回复才可以浏览

更改最后面那个自带的参数,可以让图片从不同的方向飞入。

4、光圈过渡:Iris

参数:
startPoint,一个指示起始位置的整数;范围是 1 到 9:
左上,1;上中,2;右上,3;左中,4;中心,5;右中,6;左下,7;下中,8;右下,9。
shape,值为Iris.SQUARE(方形)或Iris.CIRCLE(圆形)的遮罩形状
代码:

本帖隐藏的内容需要回复才可以浏览

5、照片过渡:Photo

代码:
本帖隐藏的内容需要回复才可以浏览


6、像素溶解过渡:PixelDissolve

参数:xSections,一个整数,指示沿水平轴的遮罩矩形部分的数目。建议的范围是 1 到 50。
ySections,一个整数,指示沿垂直轴的遮罩矩形部分的数目。建议的范围是 1 到 50。
代码:
本帖隐藏的内容需要回复才可以浏览


7、旋转过渡:Rotate

参数:ccw 一个布尔值:对于顺时针旋转为 false;对于逆时针旋转为 true。
degrees,一个整数,指示对象要旋转的度数。建议是范围是 1 到 9999。例如,degrees 设置为 1080 时,会将对象完全旋转三次。
代码:
本帖隐藏的内容需要回复才可以浏览


8、挤压过渡:Squeeze
参数:dimension,一个整数,指示"挤压"效果应是水平的 (0) 还是垂直的 (1)。
代码:
本帖隐藏的内容需要回复才可以浏览


9、划入/划出过渡:Wipe
参数:startPoint,一个整数,指示开始位置。范围是 1 到 4 和 6 到 9:
左上,1;上中,2;右上,3;左中,4;右中,6;左下,7;下中,8;右下,9。
代码:
本帖隐藏的内容需要回复才可以浏览


10、缩放过渡:Zoom
代码:
本帖隐藏的内容需要回复才可以浏览




以上是十种过渡效果,你可以更改其中的参数,以实现不同的效果,同时你也可以调整图片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方法让图片放大后产生一个弹跳的动作:
代码为:

本帖隐藏的内容需要回复才可以浏览


你可以将这个代码与上面的缩放过渡代码比较一下。
其它的过渡效果,就由你自已去试验了。




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

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


您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.
点评
B Color Smilies

您还可以输入:个字符
X

X

TOP

 

B Color Image Link Quote Code Smilies
高级模式 | 发新话题

您需要登录后才可以回帖 登录|立即注册

快速
返回顶部
返回首页