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