1、第5课 遮罩动画,教师：杨利飞 QQ：1069757197 Email：,5.1 什么是遮罩动画及含义和原理 5.2 遮罩层和被遮罩层的关系 5.3 遮罩动画在现实生活中的再现,内容概况,5 遮罩动画,同运动引导层相同，在Flash中遮罩动画的创建也至少需要两个图层才能完成，分别是遮罩层和被遮罩层。位于上方的是遮罩层，位于下方的则是被遮罩层。 定义：遮罩动画是Flash中的一个很重要的动画类型，在Flash的作品中，很多生动的画面都是通过遮罩画实现的。例如：探照灯效果、水波、用放大镜将小物体放大以及百叶窗式图片的切换等等。,什么是遮罩动画,5.1 遮罩动画的基本概念,遮罩层及被遮罩层最简单的遮
2、罩动画需要上、下两个图层，上面的图层称为遮罩层，下面的图层称为被遮罩层。 遮罩层及被遮罩层对象按钮、影片剪辑、图形、位图、文字、线条、但遮罩层中的线条必须经过处理，在被遮罩层中不能放置动态文本。,遮罩层和被遮罩层的关系,5.1 遮罩动画的基本概念,遮罩中可以使用的动画形式,可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动画等动画手段，从而使遮罩动画变成一个可以施展无限想象力的创作空间。, 遮罩层本身是不会被看见的，不管画出什么图形，简单或复杂，只要它被用做遮罩层，在播放时就不会显示出来。 遮罩层中对象覆盖的部分，就是建立遮罩关系后显示出来的部分。另外，线条不可以被用来
3、制作遮罩层，要应用线条，必须将它转换为填充色。,遮罩层原理,5.1 遮罩动画的基本概念,遮罩层其实是由普通层转化而来的，Flash会忽略遮罩层中的位图、渐变色、透明、颜色和线条样式。其中任何填充区域都是完全透明的，任何非填充区域都是不透明的。效果就是，被遮罩层的对象可以在遮罩层的填充区域显露出来。类似于用一个有洞的布把画面遮挡起来，有洞的地方画面可见、没洞的地方画面被遮挡。,遮罩的效果,5.1 遮罩动画的基本概念,遮罩层,被遮罩层,制作遮罩动画的条件,5.1 遮罩动画的基本概念,1、至少要创建两个图层，一个是遮罩层，另一个是被遮罩层层 2、一个遮罩层下可以包括多个被遮罩层 3、按钮内部不能有遮
4、罩层 4、不能将一个遮罩应用于另一个遮罩,【制作条件】,【遮罩层的图标】,遮罩层的标识,5.1 遮罩动画的基本概念,创建遮罩层和被遮罩层,5.2 遮罩动画的制作,可以通过菜单，也可以通过【图层属性】对话框创建。 1.通过菜单创建遮罩 在【时间轴】面板中选择需要设为遮罩层的图层，单击鼠标右键，在弹出的菜单中选择【遮罩层】命令。 2.通过【图层属性】对话框创建遮罩层 在【时间轴】面板中需要设置为遮罩层的图层，单击【修改】|【时间轴】|【图层属性】 选择【类型】下的“遮罩层”选项 同样的方法设置“被遮罩”层（选择“被遮罩层”选项）,5.3 遮罩动画实例,制作探照灯效果,5.3 遮罩动画实例,制作探照
5、灯效果,1）在属性面板中，选择背景色图标将背景色设为黑色 2）选择椭圆工具，在属性面板中将画笔填充色设为无，区域填充色设为渐变红色，在工作区左边绘制一椭圆 3）在第40帧处按,创建关键帧，并将椭圆移动到右边 4）选中第1帧，单击右键，在菜单中选择“创建传统补间” 5）新建图层2，用文字工具输入Adobe Flash CS4 Professional，并设置字体颜色、字号等属性 6）在图层2的图标上单击右键，选择“遮罩层”命令即可 9）按浏览动画效果,【步骤】,5.3 遮罩动画实例,制作放射效果,分别在遮罩层和被遮罩的普通图层中设置动画。就如同我们即移动带孔的画布又移动画布下面的丰富画面所产生出
6、的效果一样。,5.3 遮罩动画实例,制作放射效果,(1)【属性】面板中选择背景色图标，将工作区的背景设置为黑色。 (2)在工具箱中选择矩形工具，在【属性】面板中将当前的画笔笔触色设置为无，将区域填充设置为红色(可根据自己的喜好进行颜色设置)，然后在工作区中绘制一个较细的长方形。 (3)在工具箱中选择任意变形工具，单击长方形，这时，长方形将被八个调整手柄和一个中心圆点所包围，利用鼠标拖拽中心圆点至长方形的左侧下方 (4)选择菜单栏中“窗口”“变形”，打开变形面板，选择“旋转”，输入角度为10,然后通过鼠标多次点击变形面板右下角的拷贝并应用变形快捷图标，选中工具箱中的箭头工具将此图形移至工作区的中
7、心位置。,【步骤】,5.3 遮罩动画实例,制作放射效果,(5)利用工具箱中的箭头工具选中图形，直接按快捷键，将图形转换为图形元件。 (6)在第50帧处按，在【属性】面板中设置旋转为顺时针1次 (9)新建图层2，再选择矩形工具，在属性面板中将当前的画笔笔触色设置为无，将区域填充设置为蓝色然后在图层2的工作区中再绘制一个较细的长方形。,【步骤】,5.3 遮罩动画实例,制作放射效果,(8)选择任意变形工具，单击长方形，调整中心点至长方形右侧下方 (9)重复步骤(4)和步骤(5)的操作，使得第二层中的图形和第一层中的图图形中心位置重合 (10)重复步骤(6)的操作，将“旋转”选项设为“逆时针” (11
8、)在图层2的图标上单击右键，在右键菜单中选择“遮罩层”，为下面的图层1做遮罩 (12)按浏览动画效果,【步骤】,制作写字动画,5.3 遮罩动画实例,制作写字动画,【步骤提示】 制作文字图层 制作毛笔元件和毛笔图层 制作引导毛笔图层的运动引导层，并在其中绘制文字轮廓样的引导线 将毛笔定位到引导线 绘制遮罩文字图层的遮罩层，并做遮罩文字的逐帧动画,5.3 遮罩动画实例,制作写字动画,【步骤】 新建一个空白Flash文档，背景为白色 在图层1中，写入“马”字，然后选中右击分散到图层，那么图层1转为空而又多了一个名为“马”的图层并且锁定它 新建图层“笔”，在其内部制作一个毛笔，并使其转化为名字为”毛笔“的图形元件。并使所有图层都延长至10帧,5.3 遮罩动画实例,制作写字动画,【步骤】 在图层“笔”中，在第1帧处按Q键将其中心移至笔尖处，在第10帧处插入关键帧。 点击引导层，用铅笔沿着“马”笔势写字，必须是一笔写完。 然后图层“笔”第1帧将笔的笔尖放置引导线的左端，第10帧将笔的笔尖放置引导线的右端，补间动画，即可完成写字效果。 将图层1托至文字图层上方，然后在图层1做逐帧动画来完成字的遮住效果。点击右键选遮罩层。,5.3 遮罩动画实例,
