鸿 网 互 联 www.68idc.cn

当前位置 : 服务器租用 > 网站制作教程 > flash > >

FlashAS入门教程第七课:影片剪辑第7节实现过渡

来源:互联网 作者:佚名 时间:2016-03-14 10:14
效果演示: 通过 TransitionManager 类,您可以快速将令人印象深刻的过渡动画效果运用于影片剪辑。TransitionManager为我们提供了10种过渡效果。下面来看看怎样运用TransitionManager类来实现过渡效果。 要实现过渡效果,为编写代码更为方便首先须要导入所有

  效果演示:
  
  通过 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用这个值,就是不用缓动效果。
  各种过渡效果所需的参数:除了上面的的参数外,每一种过渡效果可能还有自已的参数,那么就跟在后面就行了。
编缉推选 阅读以下文章
Flash AS入门教程 第七课:影片剪辑第12节运用 颜色
Flash AS入门教程 第七课:影片剪辑第11节三角函数
Flash AS入门教程 第七课:影片剪辑第10节用AS绘图
Flash AS入门教程 第七课:影片剪辑第9节运用 滤镜
Flash AS入门教程 第七课:影片剪辑第8节实现补间动画
Flash AS入门教程 第七课:影片剪辑第6节运用 遮罩
Flash AS入门教程 第七课:影片剪辑第五节_拖动与碰撞检测
Flash AS入门教程 第七课:影片剪辑第四节深度
Flash AS入门教程 第七课:影片剪辑第三节控制时间轴
Flash AS入门教程 第七课:影片剪辑第二节加载swf文件
有了上面的介绍,我们已经对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
  效果:

  打造 要领 跟前面一样,只是把代码改为:
编缉推选 阅读以下文章
Flash AS入门教程 第七课:影片剪辑第12节运用 颜色
Flash AS入门教程 第七课:影片剪辑第11节三角函数
Flash AS入门教程 第七课:影片剪辑第10节用AS绘图
Flash AS入门教程 第七课:影片剪辑第9节运用 滤镜
Flash AS入门教程 第七课:影片剪辑第8节实现补间动画
Flash AS入门教程 第七课:影片剪辑第6节运用 遮罩
Flash AS入门教程 第七课:影片剪辑第五节_拖动与碰撞检测
Flash AS入门教程 第七课:影片剪辑第四节深度
Flash AS入门教程 第七课:影片剪辑第三节控制时间轴
Flash AS入门教程 第七课:影片剪辑第二节加载swf文件
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
  效果:

编缉推选 阅读以下文章
Flash AS入门教程 第七课:影片剪辑第12节运用 颜色
Flash AS入门教程 第七课:影片剪辑第11节三角函数
Flash AS入门教程 第七课:影片剪辑第10节用AS绘图
Flash AS入门教程 第七课:影片剪辑第9节运用 滤镜
Flash AS入门教程 第七课:影片剪辑第8节实现补间动画
Flash AS入门教程 第七课:影片剪辑第6节运用 遮罩
Flash AS入门教程 第七课:影片剪辑第五节_拖动与碰撞检测
Flash AS入门教程 第七课:影片剪辑第四节深度
Flash AS入门教程 第七课:影片剪辑第三节控制时间轴
Flash AS入门教程 第七课:影片剪辑第二节加载swf文件
参数: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});

编缉推选 阅读以下文章
Flash AS入门教程 第七课:影片剪辑第12节运用 颜色
Flash AS入门教程 第七课:影片剪辑第11节三角函数
Flash AS入门教程 第七课:影片剪辑第10节用AS绘图
Flash AS入门教程 第七课:影片剪辑第9节运用 滤镜
Flash AS入门教程 第七课:影片剪辑第8节实现补间动画
Flash AS入门教程 第七课:影片剪辑第6节运用 遮罩
Flash AS入门教程 第七课:影片剪辑第五节_拖动与碰撞检测
Flash AS入门教程 第七课:影片剪辑第四节深度
Flash AS入门教程 第七课:影片剪辑第三节控制时间轴
Flash AS入门教程 第七课:影片剪辑第二节加载swf文件
  旋转过渡: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
  效果:

编缉推选 阅读以下文章
Flash AS入门教程 第七课:影片剪辑第12节运用 颜色
Flash AS入门教程 第七课:影片剪辑第11节三角函数
Flash AS入门教程 第七课:影片剪辑第10节用AS绘图
Flash AS入门教程 第七课:影片剪辑第9节运用 滤镜
Flash AS入门教程 第七课:影片剪辑第8节实现补间动画
Flash AS入门教程 第七课:影片剪辑第6节运用 遮罩
Flash AS入门教程 第七课:影片剪辑第五节_拖动与碰撞检测
Flash AS入门教程 第七课:影片剪辑第四节深度
Flash AS入门教程 第七课:影片剪辑第三节控制时间轴
Flash AS入门教程 第七课:影片剪辑第二节加载swf文件
  参数: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 缓动类可用于指示未运用 缓动。
编缉推选 阅读以下文章
Flash AS入门教程 第七课:影片剪辑第12节运用 颜色
Flash AS入门教程 第七课:影片剪辑第11节三角函数
Flash AS入门教程 第七课:影片剪辑第10节用AS绘图
Flash AS入门教程 第七课:影片剪辑第9节运用 滤镜
Flash AS入门教程 第七课:影片剪辑第8节实现补间动画
Flash AS入门教程 第七课:影片剪辑第6节运用 遮罩
Flash AS入门教程 第七课:影片剪辑第五节_拖动与碰撞检测
Flash AS入门教程 第七课:影片剪辑第四节深度
Flash AS入门教程 第七课:影片剪辑第三节控制时间轴
Flash AS入门教程 第七课:影片剪辑第二节加载swf文件
下表描述了这 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帧插入帧,以此类推。
编缉推选 阅读以下文章
Flash AS入门教程 第七课:影片剪辑第12节运用 颜色
Flash AS入门教程 第七课:影片剪辑第11节三角函数
Flash AS入门教程 第七课:影片剪辑第10节用AS绘图
Flash AS入门教程 第七课:影片剪辑第9节运用 滤镜
Flash AS入门教程 第七课:影片剪辑第8节实现补间动画
Flash AS入门教程 第七课:影片剪辑第6节运用 遮罩
Flash AS入门教程 第七课:影片剪辑第五节_拖动与碰撞检测
Flash AS入门教程 第七课:影片剪辑第四节深度
Flash AS入门教程 第七课:影片剪辑第三节控制时间轴
Flash AS入门教程 第七课:影片剪辑第二节加载swf文件

  

网友评论
<