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

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,机械工业出版社,中等职业教育“十一五”规划教材,电子商务专业,机械工业出版社,Flash8,动画设计实例教程,目标技能,理解遮罩动画的概念和原理,学会遮罩动画的建立方法,能够熟练运用遮罩技术制作遮罩动画,第,5,章,遮罩动画实例,本章目录,5.1,遮罩动画实例,1,5.,2,遮罩动画实例,2,5.3,遮罩动画实例,3,本章重点：,遮罩动画建立的方法,本章难点：,运用遮罩技术制作遮罩动画。,5.1,遮罩动画实例,5.1.1,概念介绍,遮罩动画,遮罩动画是,Flash,中的一个很重要的动画类型，在,Flash,的作品中，很多生动的画面都是通过遮罩画实现的。例如：探照灯效果、水波、用放大镜将小物体放大以及百叶窗式图片的切换等等。,遮罩层及被遮罩层,最简单的遮罩动画需要上、下两个图层，上面的图层称为遮罩层，下面的图层称为被,遮罩层。,遮罩层对象,按钮、影片剪辑、图形、位图、文字、经过处理的线条可作为遮罩层对象。,5.1.2,建立遮罩层,步骤：,1,）打开,Flash 8,，新建一个,Flash,文档。,2,）双击图层名称，将文档中名称为图层,1,的普通图层重新命名为遮罩层。,3,）在遮罩层名称框上单击右键，从弹出的快捷菜单中选择,【,遮罩层,】,命令，这时命令的左边出现一个小勾，该普通图层就成为了遮罩层。,4,）此时，层图标就从普通图层图标变为“遮罩层”图标。,5.1.3,添加被遮罩层,添加被遮罩层有多种方式。,最常用的方式是：,1,）打开,Flash 8,，新建一个,Flash,文档。,2,）单击插入图层按钮，建立两个普通图层。,3,）将上面的图层重新命名为遮罩层，下面的图层重新命名为被遮罩层。,4,）在遮罩层名称框上单击右键，从弹出的快捷菜单中选择,【,遮罩层,】,命令，这时命令的左边出现一个小勾，该普通图层就成为遮罩层。,5,）在建立遮罩层后，系统会自动把遮罩层下面的一层关联为被遮罩层。,5.1.4,实现遮罩效果,制作遮罩动画：探照灯效果。,步骤：,1,）打开,Flash 8,，新建一个,Flash,文档，设置影片尺寸为“,400px200px”,背景颜色为“黑色”，帧频为“,12”,。,2,）单击插入图层按钮，建立两个图层，分别命名为：遮罩层和被遮罩层，遮罩层在上，被遮罩层在下。,3,）选择工具箱中的文本工具，在文本工具的属性面板中设置文本的属性：字体为“宋体”，字号为“,96”,，颜色为：“红色。,4,）单击被遮罩层的第,1,帧，用鼠标在场景中拖出一个文本框，在其中输入文字,遮罩动画，适当调整文本的位置。,5,）单击遮罩层的第,1,帧，选择工具箱中的椭圆工具，设置填充色为绿色。按住,Shift,键，用椭圆工具在场景中画一个绿色的圆，调整圆的大小和文本一样高，调整圆的位置，将它放在文字的左边。,6,）单击被遮罩层的第,50,帧，单击鼠标右键，从弹出的快捷菜单选择,【,插入帧,】,命令。,7,）单击遮罩层的第,50,帧，单击鼠标右键，从弹出的快捷菜单选择,【,插入关键帧,】,命令，选择工具箱中的箭头工具，将圆拖到文字的右边。,8,）选中遮罩层的第,1,帧，单击鼠标右键，从弹出的快捷菜单中选择,【,创建补间动画,】,命令，设置遮罩层中的圆的补间为动画补间。,9,）在遮罩层名称框上单击鼠标右键，从弹出的快捷菜单中选择,【,遮罩层,】,命令，这时将看不到场景中的对象，遮罩层和被遮罩层自动被锁定。,10,）按,【,Ctrl】+【Enter,】,键预览动画效果。,5.2,遮罩动画实例,2,5.2.1,制作遮罩动画：水波,步骤：,1,）打开,Flash 8,，新建一个,Flash,文档，影片尺寸为“,500px400px”,背景颜色为“黑色”，帧频为“,12”,。,2,）选择图层,1,第,1,帧，选择菜单栏“文件”,“导入”命令，导入一幅图片（此图片就是光盘中的水波,.jpg,）到舞台，设置图片的宽和高分别为,500 px400,px,，与舞台大小相同。,3,）选择菜单栏“插入”,“新建元件”命令，创建一个名称为水波的影片剪辑。,4,）在水波元件的编辑模式下，导入水波,.jpg,图片到图层,1,的第,1,帧，将该图片作为水波元件的背景，设置图片的大小为,500px400px,，调整图片的位置至中心。,5,）在水波元件的编辑模式下，更改图层,1,名称为被遮罩层，在该图层的上面新建一个图层，命名为遮罩层。,6,）选择被遮罩层的第,23,帧，单击鼠标右键，从弹出的快捷菜单选择,【,插入帧,】,命令。,7,）选择遮罩层的第,1,帧，选择工具箱中的椭圆工具，设置笔触颜色为白色，轮廓线粗细为,1,，去掉填充色。,8,）拖动鼠标，绘制一个小圆形，调整小圆形到适当的位置。,9,）选中此圆，选择菜单栏“修改”,“形状”,“将线条转换为填充”命令，对线条进行转换填充处理。这是因为此圆将作为遮罩层中的对象，而在遮罩层中的图形对象不能使用线条，如果一定要用线条，需要将线条转化为填充”。,10,）选择遮罩层第,23,帧，单击鼠标右键，从弹出的快捷菜单选择,【,插入关键帧,】,命令。,11,）选择工具箱“任意变形工具”，在第,23,帧放大该圆。,12,）选择遮罩层第,1,帧，设置属性面板中的,【,补间,】,选项为形状，将该层中对象的第,1,至,23,帧设为形状渐变。,13,）在遮罩层上单击右键，从弹出的快捷菜单中选择,【,遮罩层,】,命令。,14,）单击返回按钮，回到场景,1,。,15,）选择图层,1,的第,27,帧，单击鼠标右键，从弹出的快捷菜单选择,【,插入帧,】,命令。,16,）单击插入图层按钮，建立图层,2,，选中该图层的第,1,帧，选择菜单栏“窗口”,库”命令，打开“库”面板，拖动“水波”影片剪辑到场景,1,中合适的位置。,17,）单击插入图层按钮，新建图层,3,，选中图层,3,的第,8,帧，单击鼠标右键，从弹出的快捷菜单选择,【,插入关键帧,】,命令。,18,）单击,【,插入图层,】,按钮，新建图层,4,，选中图层,4,的第,14,帧，单击鼠标右键，从弹出的快捷菜单选择,【,插入关键帧,】,命令。选中图层,2,的第,1,帧，选择菜单栏“编辑”,“复制”命令，再选中图层,4,的第,14,帧，选择菜单栏“编辑”,“粘帖到当前位置”命令，将图层,2,中水波影片剪辑实例复制并原地粘贴过来。,19,）单击,【,插入图层,】,按钮，新建图层,5,，选中图层5,的第,21,帧，单击鼠标右键，从弹出的快捷菜单选择,【,插入关键帧,】,命令。用上面的方法，将图层,2,中水波影片剪辑实例复制并原地粘贴到图层,5,的第,21,帧。,20,）按,【,Ctrl】+【Enter,】,键预览动画效果。,21,）选择菜单栏“文件”“,保存”命令，将该文件保存为“水波,.,fla,”,。,22,）选择菜单栏“文件”,“发布”命令，生成“水波,.,swf,”,。,5.3,遮罩动画实例,3,5.3.1,制作遮罩动画：红星闪闪,步骤：,1,）打开,Flash 8,，新建一个,Flash,文档，影片尺寸为“,400px400px”,背景颜色为“黑色”，帧频为“,12”,。2,）选择工具箱中的矩形工具按钮，设置笔触颜色为无，填充颜色为“放射状”渐变色，在场景中绘制出一个“,400px400px”,的无边正方形，调整它的位置与场景重叠。,3,）选择菜单栏“插入”,“新建元件”命令，新建一个图形元件，命名为线条。,4,）在线条元件编辑模式下，选择工具箱中的线条工具按钮，在线条元件的“属性”面板中，设置笔触颜色为黄色，笔触高度为,3,，设置线条宽为：,200,，线条高为：,0,，设置线条的位置：,X,为,-200,，,Y,为,20,。拖动鼠标在场景中画一条直线。,5,）选择菜单栏“插入”,“新建元件”命令，新建一个图形元件，命名为线条组合。,6,）选择菜单栏“窗口”库”命令，打开“库”面板，将线条元件拖到线条组合元件场景中。,7,）选中场景中的线条元件，在“属性”面板中,设置,X,为,-200,，,Y,为,20,。单击工具箱中的任意变形工具，此时该元件实例的中心会出现一个小白点，它就是对象的“变形点。用鼠标左键按住它，拖到场景的中心“,+”,处松手。,8,）选择菜单栏“窗口”,“变形”命令，打开“变形”面板，选择旋转单选按钮，每次旋转角度设为,15,度。,9,）连续单击复制并应用变形按钮，在场景中复制出的效果。,10,）在时间轴的第,1,帧上单击一下，选中全部图形，执行菜单栏“修改”,“分离”命令，把线条打散。,11,）执行菜单栏“修改”,“形状”,将线条转化为填充”命令，将线条转变为填充。这是因为这些线条将被用作为遮罩层的对象，而遮罩层中的对象可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，要将线条转化为填充。,12,）选择菜单栏“插入”,“新建元件”命令，新建一个影片剪辑，命名为闪光。,13,）在闪光元件编辑场景中，选择“窗口”,“库”命令，打开“库”面板，将库中线条组合元件拖到闪光元件场景中，并使线条组合元件实例的中心点与闪光元件场景中心点“,+”,符号对齐。,14,）在闪光元件编辑模式下，选择图层,1,第,30,帧，单击鼠标右键，从弹出的菜单中选择,【,插入关键帧,】,命令，再用鼠标右键单击图层,1,第,1,帧，在弹出的菜单中选择,【,创建补间动画,】,命令。,15,）选择图层,1,第,1,帧，在“属性”面板，设置,【,旋转,】,为,【,顺时针,】,，旋转,1,次。,16,）选择图层,1,的第,1,帧，选择菜单栏“编辑”,“复制”命令。,17,）单击插入图层按钮，新建图层,2,，选择图层,2,第,1,帧，选择菜单栏“编辑”,“粘贴到当前位置”命令，使两图层中的“闪光线条组合”实例完全重合。,18,）选择图层,2,第,1,帧，执行菜单栏“修改”,“变形”,“水平翻转”命令，让复制过来的线条和图层,1,中的线条方向相反，在场景中形成交叉的图形。,19,）选择图层,2,的第,30,帧，按,F6,键，插入关键帧，用鼠标右键单击第,1,帧，选择,【,创建补间动画,】,命令，建立图层,2,补间动画。,20,）选择图层,2,第,1,帧，在“属性”面板中，设置,【,旋转,】,为逆时针，旋转,1,周。,21,）用鼠标右键单击图层,2,名称框，在弹出的快捷菜单中选择,【,遮罩层,】,命令，建立遮罩。,22,）选择菜单栏“插入”,“新建元件”命令，新建一个图形元件，命名为“红星”。,23,）在红星元件编辑场景中，选择工具箱中的线条工具按钮，按住,Shift,键，从场景中心向上画一根黄色的线条。,24,）选择工具箱中的任意变形工具,在画好的线条上单击一下，线条的中心出现一个白色的小圆点，即“变形点”。用鼠标左键按住变形点，拖到线条的最下端，这是因为我们要让线条以下端为中心旋转复制。,25,）执行菜单栏“窗口”,“设计面板”,“变形”，打开,【,变形,】,面板。单击,4,次复制并应用变形按钮，就会在场景中每隔,72,度复制出一条线条，五条线条的顶端构成五角星的五个顶点。,26,）用绿色线条分别连接五条线条的顶端，用白色线条分别连接五角星中心和上一步连线的交叉点所示。,27,）选择工具箱中的橡皮擦工具，选择工具箱中“选项”下的水龙头工具，在多余的线段上单击一下，删除线段，修整好的五角星。,28,）选择工具箱中的填充色工具按钮下方的小黑三角形，打开“调色器”面板，用拾色器拾取由红到黑的放射状渐变色。,29,）选择工具箱中颜料桶工具按钮，给五角星填充颜色，再用“填充变形工具”按钮，调整每个角的颜色范围，使之略有区别，增加立体感。,30,）选择工具箱中的橡皮擦工具按钮，单击选项下的按钮，从下拉列表中选择“擦除线条”项，选择后，会在“擦除线条”的左边出现一个小勾。,31,）用橡皮擦工具擦去红星上的线条，一颗漂亮的红星就绘制出来了。,32,）在属性面板中，设置笔触颜色为红色，填充色为红色。在场景中拖动鼠标，从中心点起笔，绘制出一颗红色的五角星。,33,）执行菜单栏“文件”,“导入”,“导入到库”命令，导入一个音乐文件（此文件就是光盘中的“虫儿飞,.mp3”,）到库中。,34,）单击返回按钮，回到场景,1,。,35,）在场景,1,中，单击插入图层按钮，新建三个图层。,36,）选择菜单栏“窗口”,“库”命令，打开“库”面板。将“库”面板中的闪光元件拖入到图层,2,的第,1,帧上；将“红星”元件拖入到图层,3,的第,1,帧上；将“音乐”拖入到图层,4,的第,1,帧上。,37,）选择工具箱中的文本工具，在红星的下面输入红色的文字,红星闪闪，完成后的时间轴与场景。,38,）选中第四层的第一帧，在“属性”面板中，设置,【,同步,】,为,【,事件,】,。,39,）按快捷键,【,Ctrl】+【Enter,】,快捷键，测试动画。,40,）选择菜单栏“文件”,“保存”命令，将该文件保存为“红星闪闪,.,fla,”,。,41,）选择菜单栏“文件”,“发布”命令，生成“红星闪闪,.,swf,”,。,本章到此结束，谢谢！,