flashCS6基础教程-15-动画篇3(遮罩动画)

 时间:2024-10-27 07:26:44

本节课详解遮罩动画的原理,并附有简单实用的例子遮罩的原理:通过上面图层内对象所占的区域来看下面图层内的对象什么,看不懂?不要紧,本文会详解具体原理,并有具体例子进行辅助讲解。

工具/原料

flashCS6

一、遮罩动画的理论说明

1、遮罩动画的要求:遮罩动画需要同时满足下面3个要求,缺一不可:<1>至少要有两个图层。一个充当遮罩层,其余的充当被遮罩层。<2>遮罩层只能有一个,被遮罩的图层至少有一个。<3>遮罩层必须位于所有的被遮罩层的上方如下图所示,遮罩层有且只有一个,且必须位于最上面的图层;被遮罩层有三个,都位于遮罩层的下面注意:这是一个遮罩动画。在复杂的作品中,往往需要很多遮罩动画,那么,其实就是下图的复制与粘贴(每一个遮罩动画都按照下图的格式)

flashCS6基础教程-15-动画篇3(遮罩动画)

2、遮瓞傲玉氯罩动画的原理通过上面图层内对象所占的区域来看下面图层内的对象太抽象了,我来打个比方:假设我们手中有一张完全不透明的大纸,在这张纸的中央有一个圆吾疣璨普形【参考下图】,我们拿着这张纸,从中央的圆形区域往外看,那么,我们看到的景象都只局限于这个圆形区域。现在以这个比方来做类比:纸张中央的圆形--------flash内的遮罩层被观看的景物----------flash内的被遮罩层由这个比方,我们很容易发现下面的事实:遮罩层只有形状有效,其颜色是无效的。故此,我们只关注遮罩层的外观即可,对于其填充色,可以任意设置。但要特别注意:必须有填充色!如果遮罩层只有边框色,则你看到的效果就是一个边框的了(除非你的本意就是只在边框的范围内观看被遮罩层)

flashCS6基础教程-15-动画篇3(遮罩动画)

二、简单的遮罩动画举例

1、例子1:图片渐入效果本效侈砉齿垃果是一个小圆慢慢变大的效果,最后呈现的是完整的图片。下面是具体步骤:<1>新建一个flash文档(AS2或AS3均可)媪青怍牙<2>导入一张图片:将flashIDE窗口化,打开系统的资源管理器,定位到图片的目录,将图片直接拖放到flashIDE的舞台上,如下图1所示<3>用选择工具单击选中舞台上的图片,Ctrl+K打开对齐面板,按照前面章节的方法设置其宽高为舞台的宽高<4>新建一个图层,使用椭圆工具【去掉边框色,填充色任意(我这里设为黑色)】在舞台中央绘制一个很小的正圆,然后在本层的25帧处F6(就可以插入关键帧),再在图层1的25帧处F5(就可以插入普通帧)。处理完毕后,效果如下图2<5>修改图层2的25帧内的对象(直接用选择工具单击25帧处舞台上的小圆)用工具箱内的任意变形工具(快捷键Q)单击舞台上的小圆,参考下图3,将鼠标移动到小圆的右上角处,出现图示的双向箭头时,按住Alt键,拖动鼠标,可以将小圆以圆心为基点进行变形【因为小圆比较小,为了方便操作,事先将舞台放大显示了】,变形为很大,直至覆盖整个舞台【一次性搞不定,可以将图片先稍微变大,然后将舞台缩小为50%,重复操作即可变大到覆盖整个舞台】<6>在图层2上某一帧上点右键,选择创建补间形状<7>右键单击图层2,选择遮罩层【见下图4】,我们发现:图层1和图层2都被自动锁定,而且动画效果也出来了本例是对遮罩层做补间动画。

flashCS6基础教程-15-动画篇3(遮罩动画)

flashCS6基础教程-15-动画篇3(遮罩动画)

flashCS6基础教程-15-动画篇3(遮罩动画)

flashCS6基础教程-15-动画篇3(遮罩动画)

2、其实,还可以对被遮罩层做补间动画,见本例:例子2:制作一个文字变色的动画<1>新建一个flash文档(AS2或AS3均可)<2>绘制一个由长方形,去掉边框,填充色设置为红色,然后30帧F6,用选择工具单击舞台上的长方形,在属性面板内设置填充色为蓝色。然后设置为创建补间形状动画<3>新建一个图层,用文本工具(传统文本--静态文本)写一个字,比如说忍,将字号设置的大一些【见下图】<4>将图层2设置为遮罩层

flashCS6基础教程-15-动画篇3(遮罩动画)

3、遮罩层和被遮罩层可以同时都做补间动画,但不多见。由于暂时想不到具体的实例,故而就不介绍了。大家可以自己尝试着做一下看看哈。

三、总结说明

1、无论是AS2的文档,还是AS3的文档,都可以使用遮罩动画遮罩动画是和其它形式的动画配合使用的,遮罩动画要求至少有两个图层。只有一个图层将无法使用遮罩动画限于篇幅,本节课只介绍了两个图层的遮罩动画,但其实,被遮罩层可以有多个,比如说,你制作了一个画面,是由多个图层复合而成的(以人物为例,我们一般情况下,会将人的身体的各部分分散在不同的图层内),此时对人物做遮罩动画的话,就需要将下面的图层都给遮罩。

2、但是,设置遮罩时,默认只能遮罩一个图层,那么如何实现遮罩多个图层呢?假如说,现在有四个图层我在最上面的图层上点右键,选择遮罩后,如下图1所示,只能遮罩图层3.而图层2和图层1没有被遮罩。如果需要将2和1也遮罩,仅需单击图层2后,向图层2和图层3中央的那条间隔线方向(右上角方向)拖动,当出现下图2所示的模样时,松开鼠标后变成下图3所示。同理操作图层1,就可以实现下图4的效果,此时就将下面的三个图层同时遮蔽了

flashCS6基础教程-15-动画篇3(遮罩动画)

flashCS6基础教程-15-动画篇3(遮罩动画)

flashCS6基础教程-15-动画篇3(遮罩动画)

flashCS6基础教程-15-动画篇3(遮罩动画)

3、本节课讲解的是用绘图的方式来制作遮罩动画,其实:遮罩动画还可以用AS代码实现,我会在后续教程中讲解

flash如何绘制星空的教程 fl怎么做变形动画 如何用flash制作画卷展开、合拢效果 fl怎么新建元件 在flash中怎么样利用钢笔工具画出三角形?
热门搜索
美女全光图片 刘谦图片 卡通蜗牛图片 图片在线制作 可爱动漫女孩