《flash8动画设计实例教程》第五章

1、机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程 目标技能目标技能理解遮罩动画的概念和原理学会遮罩动画的建立方法能够熟练运用遮罩技术制作遮罩动画第第5章章 遮罩动画实例遮罩动画实例机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程 本章目录本章目录5.1 5.1 遮罩动画实例遮罩动画实例1 15.2 5.2 遮罩动画实例遮罩动画实例2 25.3 5.3 遮罩动画实例遮罩动画实例3 3

2、机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程 本章重点：遮罩动画建立的方法 本章难点：运用遮罩技术制作遮罩动画。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程5.1 遮罩动画实例遮罩动画实例5.1.1 概念介绍概念介绍 遮罩动画遮罩动画遮罩动画是Flash中的一个很重要的动画类型，在Flash的作品中，很多生动的画面都是通过遮罩画实现的。例如：探照灯效果、水波、用放大镜将小物

3、体放大以及百叶窗式图片的切换等等。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程遮罩层及被遮罩层遮罩层及被遮罩层最简单的遮罩动画需要上、下两个图层，上面的图层称为遮罩层，下面的图层称为被遮罩层。 遮罩层对象遮罩层对象按钮、影片剪辑、图形、位图、文字、经过处理的线条可作为遮罩层对象。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程5.1.2 建立遮罩层建立遮罩层步骤：1）打开Fla

4、sh 8，新建一个Flash文档。2）双击图层名称，将文档中名称为图层1的普通图层重新命名为遮罩层。3）在遮罩层名称框上单击右键，从弹出的快捷菜单中选择【遮罩层】命令，这时命令的左边出现一个小勾，该普通图层就成为了遮罩层。4）此时，层图标就从普通图层图标变为“遮罩层”图标。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程5.1.3 添

5、加被遮罩层添加被遮罩层添加被遮罩层有多种方式。最常用的方式是：1）打开Flash 8，新建一个Flash文档。2）单击插入图层按钮，建立两个普通图层。3）将上面的图层重新命名为遮罩层，下面的图层重新命名为被遮罩层。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程4）在遮罩层名称框上单击右键，从弹出的快捷菜单中选择【遮罩层】命令，这时命令的左边出现一个小勾，该普通图层就成为遮罩层。5）在建立遮罩层后，系统会自动把遮罩层下面的一层关联为被遮罩层。机械工业出版社中等职业教育中等职业教育“十一五

6、十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程5.1.4 实现遮罩效果实现遮罩效果制作遮罩动画：探照灯效果。步骤：1）打开Flash 8，新建一个Flash文档，设置影片尺寸为“400px200px”,背景颜色为“黑色”，帧频为“12”。2）单击插入图层按钮，建立两个图层，分别命名为：遮罩层和被遮罩层，遮罩层在上，被遮罩层在下。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程3）选择工具箱中的文本工具，在文本工具的属性面板中

7、设置文本的属性：字体为“宋体”，字号为“96”，颜色为：“红色。4）单击被遮罩层的第1帧，用鼠标在场景中拖出一个文本框，在其中输入文字遮罩动画，适当调整文本的位置。5）单击遮罩层的第1帧，选择工具箱中的椭圆工具，设置填充色为绿色。按住Shift键，用椭圆工具在场景中画一个绿色的圆，调整圆的大小和文本一样高，调整圆的位置，将它放在文字的左边。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程6）单击被遮罩层的第50帧，单击鼠标右键，从弹出的快捷菜单选择【插入帧】命令。 7）单击遮罩层的第50

8、帧，单击鼠标右键，从弹出的快捷菜单选择【插入关键帧】命令，选择工具箱中的箭头工具，将圆拖到文字的右边。 8）选中遮罩层的第1帧，单击鼠标右键，从弹出的快捷菜单中选择【创建补间动画】命令，设置遮罩层中的圆的补间为动画补间。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程9）在遮罩层名称框上单击鼠标右键，从弹出的快捷菜单中选择【遮罩层】命令，这时将看不到场景中的对象，遮罩层和被遮罩层自动被锁定。10）按【Ctrl】+【Enter】键预览动画效果。机械工业出版社中等职业教育中等职业教育“十一五

9、十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程5.2 遮罩动画实例遮罩动画实例25.2.1 制作遮罩动画：水波制作遮罩动画：水波步骤： 1）打开Flash 8，新建一个Flash文档，影片尺寸为“500px400px”,背景颜色为“黑色”，帧频为“12”。2）选择图层1第1帧，选择菜单栏“文件”“导入”命令，导入一幅图片（此图片就是光盘中的水波.jpg）到舞台，设置图片的宽和高分别为500 px400 px，与舞台大小相同。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版

10、社Flash8 动画设计实例教程动画设计实例教程3）选择菜单栏“插入”“新建元件”命令，创建一个名称为水波的影片剪辑。4）在水波元件的编辑模式下，导入水波.jpg图片到图层1的第1帧，将该图片作为水波元件的背景，设置图片的大小为500px400px，调整图片的位置至中心。5）在水波元件的编辑模式下，更改图层1名称为被遮罩层，在该图层的上面新建一个图层，命名为遮罩层。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程6）选择被遮罩层的第23帧，单击鼠标右键，从弹出的快捷菜单选择【插入帧】命令

11、。7）选择遮罩层的第1帧，选择工具箱中的椭圆工具，设置笔触颜色为白色，轮廓线粗细为1，去掉填充色。8）拖动鼠标，绘制一个小圆形，调整小圆形到适当的位置。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程9）选中此圆，选择菜单栏“修改”“形状”“将线条转换为填充”命令，对线条进行转换填充处理。这是因为此圆将作为遮罩层中的对象，而在遮罩层中的图形对象不能使用线条，如果一定要用线条，需要将线条转化为“填充”。10）选择遮罩层第23帧，单击鼠标右键，从弹出的快捷菜单选择【插入关键帧】命令。11）选

12、择工具箱“任意变形工具”，在第23帧放大该圆。 机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程12）选择遮罩层第1帧，设置属性面板中的【补间】选项为形状，将该层中对象的第1至 23帧设为形状渐变。13）在遮罩层上单击右键，从弹出的快捷菜单中选择【遮罩层】命令。14）单击返回按钮，回到场景1。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程15）选择图层1的第27帧，单击鼠标右键，

13、从弹出的快捷菜单选择【插入帧】命令。16）单击插入图层按钮，建立图层2，选中该图层的第1帧，选择菜单栏“窗口”库”命令，打开“库”面板，拖动“水波”影片剪辑到场景1中合适的位置。17）单击插入图层按钮，新建图层3，选中图层3的第8帧，单击鼠标右键，从弹出的快捷菜单选择【插入关键帧】命令。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程18）单击【插入图层】按钮，新建图层4，选中图层4的第14帧，单击鼠标右键，从弹出的快捷菜单选择【插入关键帧】命令。选中图层2的第1帧，选择菜单栏“编辑”“

14、复制”命令，再选中图层4的第14帧，选择菜单栏“编辑”“粘帖到当前位置”命令，将图层2中水波影片剪辑实例复制并原地粘贴过来 。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程19）单击【插入图层】按钮，新建图层5，选中图层5的第21帧，单击鼠标右键，从弹出的快捷菜单选择【插入关键帧】命令。用上面的方法，将图层2中水波影片剪辑实例复制并原地粘贴到图层5的第21帧。20）按【Ctrl】+【Enter】键预览动画效果。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子

15、商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程21）选择菜单栏“文件”“保存”命令，将该文件保存为“水波.fla”。22）选择菜单栏“文件”“发布”命令，生成“水波.swf”。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程5.3 遮罩动画实例遮罩动画实例35.3.1 制作遮罩动画：红星闪闪制作遮罩动画：红星闪闪步骤：1）打开Flash 8，新建一个Flash文档，影片尺寸为“400px400px”,背景颜色为“黑色”，帧频为“12”。2）选择工具箱中的

16、矩形工具按钮，设置笔触颜色为无，填充颜色为“放射状”渐变色，在场景中绘制出一个“400px400px”的无边正方形，调整它的位置与场景重叠。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程3）选择菜单栏“插入”“新建元件”命令，新建一个图形元件，命名为线条。4）在线条元件编辑模式下，选择工具箱中的线条工具按钮，在线条元件的“属性”面板中，设置笔触颜色为黄色，笔触高度为3，设置线条宽为：200，线条高为：0，设置线条的位置：X为-200，Y为20。拖动鼠标在场景中画一条直线。机械工业出版社

17、中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程5）选择菜单栏“插入”“新建元件”命令，新建一个图形元件，命名为线条组合。6）选择菜单栏“窗口”“库”命令，打开“库”面板，将线条元件拖到线条组合元件场景中。7）选中场景中的线条元件，在“属性”面板中,设置X为-200，Y为20。单击工具箱中的任意变形工具，此时该元件实例的中心会出现一个小白点，它就是对象的“变形点。用鼠标左键按住它，拖到场景的中心“+”处松手。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专

18、业机械工业出版社Flash8 动画设计实例教程动画设计实例教程8）选择菜单栏“窗口”“变形”命令，打开“变形”面板，选择旋转单选按钮，每次旋转角度设为15度。9）连续单击复制并应用变形按钮，在场景中复制出的效果。10）在时间轴的第1帧上单击一下，选中全部图形，执行菜单栏“修改”“分离”命令，把线条打散。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程11）执行菜单栏“修改” “形状” “将线条转化为填充”命令，将线条转变为填充。这是因为这些线条将被用作为遮罩层的对象，而遮罩层中的对象可以

19、是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，要将线条转化为填充。12）选择菜单栏“插入”“新建元件”命令，新建一个影片剪辑，命名为闪光。 机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程13）在闪光元件编辑场景中，选择“窗口” “库”命令，打开“库”面板，将库中线条组合元件拖到闪光元件场景中，并使线条组合元件实例的中心点与闪光元件场景中心点“+”符号对齐。14）在闪光元件编辑模式下，选择图层1第30帧，单击鼠标右键，从弹出的菜单中选择【插入关键帧】命令，再用鼠

20、标右键单击图层1第1帧，在弹出的菜单中选择【创建补间动画】命令。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程15）选择图层1第1帧，在“属性”面板，设置【旋转】为【顺时针】，旋转1次。16）选择图层1的第1帧，选择菜单栏“编辑”“复制”命令。17）单击插入图层按钮，新建图层2，选择图层2第1帧，选择菜单栏“编辑” “粘贴到当前位置”命令，使两图层中的“闪光线条组合”实例完全重合。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出

21、版社Flash8 动画设计实例教程动画设计实例教程18）选择图层2第1帧，执行菜单栏“修改” “变形” “水平翻转”命令，让复制过来的线条和图层1中的线条方向相反，在场景中形成交叉的图形。 19）选择图层2的第30帧，按F6键，插入关键帧，用鼠标右键单击第1帧，选择【创建补间动画】命令，建立图层2补间动画。20）选择图层2第1帧，在“属性”面板中，设置【旋转】为逆时针，旋转1周。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程21）用鼠标右键单击图层2名称框，在弹出的快捷菜单中选择【遮罩

22、层】命令，建立遮罩。22）选择菜单栏“插入”“新建元件”命令，新建一个图形元件，命名为“红星”。23）在红星元件编辑场景中，选择工具箱中的线条工具按钮，按住Shift键，从场景中心向上画一根黄色的线条。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程24）选择工具箱中的任意变形工具,在画好的线条上单击一下，线条的中心出现一个白色的小圆点，即“变形点” 。用鼠标左键按住变形点，拖到线条的最下端，这是因为我们要让线条以下端为中心旋转复制。25）执行菜单栏“窗口”“设计面板”“变形”，打开【变

23、形】面板。单击4次复制并应用变形按钮，就会在场景中每隔72度复制出一条线条，五条线条的顶端构成五角星的五个顶点。机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程26）用绿色线条分别连接五条线条的顶端，用白色线条分别连接五角星中心和上一步连线的交叉点所示。27）选择工具箱中的橡皮擦工具，选择工具箱中“选项”下的水龙头工具，在多余的线段上单击一下，删除线段，修整好的五角星。28）选择工具箱中的填充色工具按钮下方的小黑三角形，打开“调色器”面板，用拾色器拾取由红到黑的放射状渐变色。 机械工业出版社中等职业教育中等职业教育“十一五十一五”规划教材规划教材?电子商务专业电子商务专业机械工业出版社Flash8 动画设计实例教程动画设计实例教程29）选择工具箱中颜料桶工具按钮，给五角星填充颜色，再用“填充变形工具”按钮，调整每个角的颜色范围，使之略有区别，增加立体感。 30）选择工具箱中的橡皮擦工具按钮，单击选项下的按钮，从下拉列表中选择“擦除线条”项，选择后，会在