计算机软件.ppt

《计算机软件.ppt》由会员分享，可在线阅读，更多相关《计算机软件.ppt（81页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计与制作网页设计与制作（Dreamweaver）课程目标网页设计与制作（网页设计与制作（Dreamweaver）第三章 Flash平面动画制作教学目标教学目标 通过这章的学习，学生可以熟练的掌握逐帧动通过这章的学习，学生可以熟练的掌握逐帧动画、运动补间动画、形状补间动画、遮罩层动画和画、运动补间动画、形状补间动画、遮罩层动画和引导动画这引导动画这5 5种动画的制作方法和技巧。种动画的制作方法和技巧。第三章 Flash平面动画制作教学重点与难点教学重点与难点 逐帧动画、运动补间动画、形状补间逐帧动画、运动补间动画、形状补间动画、遮罩层动画和引导动画的制作方法动画、遮罩层动画和引导动画的制作

2、方法和设计技巧。和设计技巧。第三章 Flash 平面动画制作本章计划授课本章计划授课14学时学时教学内容教学内容 3.1 Flash 3.1 Flash平面动画制作概述平面动画制作概述 3.2 “ 3.2 “新年快乐新年快乐”案例案例 3.3 “ 3.3 “世界杯集锦世界杯集锦”案例案例 3.4 “ 3.4 “闪闪的红星闪闪的红星”遮罩动画案例遮罩动画案例 3.5 “ 3.5 “蝴蝶飞蝴蝶飞”引导动画案例引导动画案例 3.6 “ 3.6 “走路的小青蛙走路的小青蛙”逐帧动画案例逐帧动画案例 3.7 “ 3.7 “贺卡贺卡”综合动画案例综合动画案例3.1 Flash平面动画制作概述本节内容本节内

3、容 1. 1. Flash平面动画的基本概念平面动画的基本概念 2. Flash 平面动画的基本制作方法平面动画的基本制作方法 3. 3.平面动画的设计技巧平面动画的设计技巧3.1 Flash平面动画制作概述一、一、 Flash平面动画的基本概念平面动画的基本概念动画动画任何随着时间而发生的位置或者形态上的改变。任何随着时间而发生的位置或者形态上的改变。 FlashFlash动画是由一个个动画是由一个个“帧帧”上的图片连接而成的，帧是上的图片连接而成的，帧是动画最基本的单位。动画最基本的单位。舞台舞台是制作动画的地方，在播放器中播放动画时，只有是制作动画的地方，在播放器中播放动画时，只有舞台中

4、的对象被显示。舞台中的对象被显示。工作区域工作区域舞台和周围的灰度区域舞台和周围的灰度区域场景场景是动画的另一个组成部分是是动画的另一个组成部分是“场景场景”的变换，就像的变换，就像一部电影不可能只在一个地方拍摄一样，制作一部电影不可能只在一个地方拍摄一样，制作FlashFlash动画也需动画也需要有不同的场景。要有不同的场景。 3.1 Flash平面动画制作概述二、二、 Flash 平面动画的基本制作方法平面动画的基本制作方法1 1、逐帧动画、逐帧动画 将动画的每一帧均设置为关键帧，通将动画的每一帧均设置为关键帧，通过改变每一个关键帧中的图像而产生动画效果。过改变每一个关键帧中的图像而产生动

5、画效果。 逐帧动画是逐帧动画是FlashFlash所提供的最基本的动画形式。所提供的最基本的动画形式。2 2、补间动画、补间动画 补间动画是补间动画是FlashFlash提供的一种最有效的提供的一种最有效的动画形式。无论是创建角色动画或者动作动画，甚至最动画形式。无论是创建角色动画或者动作动画，甚至最基本的按钮效果，补间都是必不可少的。基本的按钮效果，补间都是必不可少的。 CS5CS5中中补间动画可以分为补间动画、形状补间动画补间动画可以分为补间动画、形状补间动画和传统补间动画。和传统补间动画。3.1 Flash平面动画制作概述二、二、 Flash 平面动画的基本制作方法平面动画的基本制作方法

6、3 3、遮罩动画、遮罩动画遮罩动画是将一个图层设置为遮罩遮罩动画是将一个图层设置为遮罩层，此图层中的对象将相应地转换为遮罩对象。其层，此图层中的对象将相应地转换为遮罩对象。其它图层则为被遮罩层，这些图层的对象被遮罩对象它图层则为被遮罩层，这些图层的对象被遮罩对象所屏蔽的那部分才可显示。所屏蔽的那部分才可显示。 4 4、引导动画、引导动画引导动画实际上是在运动补间动画引导动画实际上是在运动补间动画的基础上添加一个引导图层，该图层有一条可以引的基础上添加一个引导图层，该图层有一条可以引导运动方向的引导线，使另一个图层中的对象依据导运动方向的引导线，使另一个图层中的对象依据此引导线进行运动的动画。此

7、引导线进行运动的动画。3.1 Flash平面动画制作概述三、三、 Flash 平面动画的设计技巧平面动画的设计技巧注意以下几个要点：注意以下几个要点： 1 1要想吸引观众，最重要的是让动作具有一定的含义。要想吸引观众，最重要的是让动作具有一定的含义。 2 2动作应该支持动画的内容和主题。动作应该支持动画的内容和主题。 3 3动作可以像文章和颜色一样传达情绪、感情和个性。动作可以像文章和颜色一样传达情绪、感情和个性。 4 4在日常生活中仔细观察动作并记录下来，建立一个创在日常生活中仔细观察动作并记录下来，建立一个创建动画时的建动画时的“资源库资源库”。 5 5动作的设计要符合自然规律。动作的设计

8、要符合自然规律。3.2 “新年快乐” 案例本节内容本节内容1. 1.案例效果案例效果2. 2.操作步骤操作步骤3. 3.技术要点技术要点4. 4.练习练习3.2 “新年快乐新年快乐” 案例一、案例效果一、案例效果 重点与难点：形状补间动画的特点、创建方法，及如重点与难点：形状补间动画的特点、创建方法，及如何设置形状提示点来控制形状补间动画的中间过程。何设置形状提示点来控制形状补间动画的中间过程。3.2 “新年快乐” 案例二、操作步骤二、操作步骤1. 1.新建文档并命名新建文档并命名 启动启动AdobeAdobeFlashFlashCS5CS5后，新建一个文档，对背后，新建一个文档，对背景颜色和

9、舞台大小进行相应的设置，保存文档，命名景颜色和舞台大小进行相应的设置，保存文档，命名为为“新年快乐新年快乐 ”。2. 2.设置背景图片设置背景图片 将将“图层图层1”1”改名为改名为“背景背景” ” ，把素材中的背景图，把素材中的背景图片文件片文件“烟花烟花”导入到舞台，并设置宽为导入到舞台，并设置宽为400400、高为、高为300300 ，居中对齐，扩展到居中对齐，扩展到100100帧。锁定图层。帧。锁定图层。3.2 “新年快乐” 案例二、操作步骤二、操作步骤3 3绘制灯笼绘制灯笼 第一步：第一步：插入插入4 4个新图层个新图层 ，分别命名为，分别命名为“新新”、“年年”、“快快”、“乐乐”

10、。将。将“贺贺”、“新新”、“禧禧”三个图层锁定。单击三个图层锁定。单击“新新”图层的第图层的第2020帧，按帧，按F6F6键增加一个关键帧。利用键增加一个关键帧。利用“矩形工具矩形工具”和和“椭圆工具椭圆工具”绘制如下左绘制如下左“灯笼灯笼”图形：图形：3.2 “新年快乐” 案例二、操作步骤二、操作步骤第二步：第二步：分别在分别在“年年”、“快快”、“乐乐”图层中第图层中第20帧单击帧单击F6键添键添加加关键帧，将灯笼粘贴到屏幕上并调整到适当的位置。如下图。关键帧，将灯笼粘贴到屏幕上并调整到适当的位置。如下图。3.2 “新年快乐” 案例二、操作步骤二、操作步骤4 4绘制绘制“新年快乐新年快乐

11、”四个文字四个文字 在对应的图层在对应的图层4040帧位置，帧位置，文字位置与灯笼位置对应。文字位置与灯笼位置对应。3.2 “新年快乐” 案例二、操作步骤二、操作步骤5 5给此四个图层均在第给此四个图层均在第6060帧和第帧和第8080帧添加一个关键帧。帧添加一个关键帧。选中选中“新新”、“年年”、“快快”和和“乐乐”4 4个图层的第个图层的第2020帧复制到帧复制到4 4个图层的第个图层的第8080帧位置帧位置 。6. 6.同时选中同时选中“新新”、“年年”、“快快”和和“乐乐”4 4个图层中个图层中的的20204040帧之间的任意帧右击选择帧之间的任意帧右击选择“创建补间形状创建补间形状”

12、 ” ，再用同样的方法在第，再用同样的方法在第60608080帧之间也创建形状补间帧之间也创建形状补间动画。动画。7 7、测试影片，保存文件，并导出影片。、测试影片，保存文件，并导出影片。 3.2 “新年快乐” 案例三、技术要点三、技术要点1 1、制作形状补间动画、制作形状补间动画 形状补间动画的方法有如下三种：形状补间动画的方法有如下三种： （1 1）选择开始关键帧和结束关键帧间的任何一帧，在）选择开始关键帧和结束关键帧间的任何一帧，在“属性属性”面板中设置面板中设置。 （2 2）右击开始关键帧和结束关键帧间的任何一帧右击开始关键帧和结束关键帧间的任何一帧，在快，在快捷菜单中选择捷菜单中选择

13、“创建补间形状创建补间形状”。 （3 3）单击开始关键帧和结束关键帧间的任何一帧，选择）单击开始关键帧和结束关键帧间的任何一帧，选择【插入插入】 【时间轴时间轴】 【创建补间形状创建补间形状】菜单项菜单项。注意：注意： FLASHFLASH只能对一些简单的形状进行形状补间只能对一些简单的形状进行形状补间, ,不能对不能对一个组、元件或者可编辑的文字运用形状补间。一个组、元件或者可编辑的文字运用形状补间。3.2 “新年快乐” 案例三、技术要点三、技术要点2. 2. 设置形状提示点设置形状提示点 在已经创建了一个基本的形状补间动画后，可以在已经创建了一个基本的形状补间动画后，可以按照以下步骤添加形

14、状提示点：按照以下步骤添加形状提示点： （1 1）开始关键帧中选择一个形状，然后单击）开始关键帧中选择一个形状，然后单击【修改修改】 【形状形状】 【添加形状提示添加形状提示】菜单项菜单项 （2 2）在开始关键帧的形状上确定一个点在开始关键帧的形状上确定一个点，用用【箭头工箭头工具具】进行选择并移动第一个形状提示点进行选择并移动第一个形状提示点，把它放在形，把它放在形状上一个用户想要其与最终形状中的一块区域进行匹状上一个用户想要其与最终形状中的一块区域进行匹配的区域上。配的区域上。3.2 “新年快乐” 案例三、技术要点三、技术要点（3 3）当把播放头移动到形状补间动画的结束帧上时，会）当把播放

15、头移动到形状补间动画的结束帧上时，会看到一个与放在开始帧上的标了字母的形状提示点相看到一个与放在开始帧上的标了字母的形状提示点相匹配的另一个标了相同字母的形状提示点。当结束关匹配的另一个标了相同字母的形状提示点。当结束关键帧中的形状提示点的颜色由红色变成了绿色，而在键帧中的形状提示点的颜色由红色变成了绿色，而在开始关键帧中的形状提示点由红色变成了黄色，则表开始关键帧中的形状提示点由红色变成了黄色，则表示形状提示点已经与作品建立了正确的连接。示形状提示点已经与作品建立了正确的连接。 （4 4）将播放头在时间轴上移动预览新的形变过程。不停）将播放头在时间轴上移动预览新的形变过程。不停地加入形状提示

16、点，或对它们进行重新定位，直到动地加入形状提示点，或对它们进行重新定位，直到动画产生出了理想的形变过程。画产生出了理想的形变过程。3.2 “新年快乐” 案例四、练习四、练习1 1、制作一个笑脸到哭脸的变脸形变动画，效果如下图、制作一个笑脸到哭脸的变脸形变动画，效果如下图所示。所示。 （提示：笑脸系列形状可采用（提示：笑脸系列形状可采用【文本工具文本工具】输入，字体采用输入，字体采用“Windings”Windings”，输入大写字母，输入大写字母“L”L”则可输入一个笑脸，其它两张则可输入一个笑脸，其它两张脸对应着大写字母脸对应着大写字母“K”K”和和“L”L”。）。） 3.2 “新年快乐”

17、案例四、练习四、练习2 2、 制作一个变手的形变动画，并通过设置形状提示点来控制手指之制作一个变手的形变动画，并通过设置形状提示点来控制手指之间的对应变换位置。动画中手的姿势如下图所示。间的对应变换位置。动画中手的姿势如下图所示。 （提示：手的系列形状可采用（提示：手的系列形状可采用“文本工具文本工具”输入，字体采用输入，字体采用“Windings”Windings”，输入大写字母，输入大写字母“A”A”“G”G”实现）实现）3.3 “世界杯集锦” 案例本节内容本节内容1. 1.案例效果案例效果2. 2.操作步骤操作步骤3. 3.技术要点技术要点4. 4.练习练习3.3 “世界杯集锦” 案例一

18、、案例效果一、案例效果 重点与难点：重点与难点：传统补间动画的制作方法和技巧，及如传统补间动画的制作方法和技巧，及如何设置旋转、运动的快慢和逐渐消失的效果。何设置旋转、运动的快慢和逐渐消失的效果。3.3 “世界杯集锦” 案例二、操作步骤二、操作步骤1. 1.新建文档并命名新建文档并命名 启动启动AdobeAdobeFlashFlashCS5CS5后，新建一个文档，对背景颜后，新建一个文档，对背景颜色和舞台大小进行相应的设置，保存文档，命名为色和舞台大小进行相应的设置，保存文档，命名为“世界杯集锦世界杯集锦”。2 2创建世界杯图形符号创建世界杯图形符号 导入文件名为导入文件名为“世界杯图世界杯图

19、1”1”“世界杯图世界杯图6”6”的图片的图片文件，分别对应生成名为文件，分别对应生成名为“图图1”1”“图图6”6”的图形元的图形元件件3.3 “世界杯集锦” 案例二、操作步骤二、操作步骤3. 3.创建创建“Loading”Loading”文本的拉伸效果文本的拉伸效果 第一步：第一步：新建一个名称为新建一个名称为“Loading”Loading”的影片剪辑元件。的影片剪辑元件。 第二步：第二步：选用选用【文本工具文本工具】输入文字输入文字“Loading”Loading”，在在“属性属性”面板中设置此文字的字体为面板中设置此文字的字体为“黑体黑体”，字，字号为号为2525，字体颜色为白色。用

20、，字体颜色为白色。用Ctrl+BCtrl+B将文字打散。将第将文字打散。将第1 1帧复制到第帧复制到第2 2帧至第帧至第1313帧。鼠标单击第帧。鼠标单击第1 1帧，只保留帧，只保留“L”L”字母，删除其它字符图形。从第字母，删除其它字符图形。从第2 2帧开始逐步增帧开始逐步增加字符图形直至第加字符图形直至第1313帧。鼠标单击第帧。鼠标单击第1818帧，按帧，按F5F5键增键增加一个扩展帧。加一个扩展帧。3.3 “世界杯集锦” 案例二、操作步骤二、操作步骤4. 4.创建创建“光线光线”图形符号图形符号第一步：第一步：新建名称为新建名称为“光线光线”的图形元件。的图形元件。第二步：第二步：利用

21、利用“椭圆工具椭圆工具”绘制如下图的光线效果：绘制如下图的光线效果：3.3 “世界杯集锦” 案例二、操作步骤二、操作步骤5 5创建创建“光束光束”影片剪辑影片剪辑3.3 “世界杯集锦” 案例二、操作步骤二、操作步骤6 6设置背景图片设置背景图片 导入背景图片到场景导入背景图片到场景1 1中，选择本案例对应的素材文件中，选择本案例对应的素材文件夹中的背景图片文件夹中的背景图片文件“背景背景”。设置此图片的宽为。设置此图片的宽为400400、高为、高为300300。通过设置。通过设置“对齐对齐”面板选项，使背景图片面板选项，使背景图片位于舞台中央位于舞台中央 。7 7创建创建“光光”图层图层 创建

22、新图层命名为创建新图层命名为“光光”，将影片剪辑，将影片剪辑“光束光束”拖至舞拖至舞台中央，并扩展制台中央，并扩展制120120帧。帧。3.3 “世界杯集锦” 案例二、操作步骤二、操作步骤8 8创建创建“Loading”Loading”图层图层 创建新图层命名为创建新图层命名为“Loading”Loading”，将影片剪辑，将影片剪辑“Loading”Loading”拖至舞台左下角。并扩展制拖至舞台左下角。并扩展制120120帧。帧。9 9创建宇宙图片动画创建宇宙图片动画 第一步：第一步：创建新图层命名为创建新图层命名为“图片图片1”1”，将图形符号，将图形符号“图图1”1”拖到舞台左端，并将

23、图形符号缩小。单击第拖到舞台左端，并将图形符号缩小。单击第1010帧帧按按F6F6插入关键帧，水平移动图形符号插入关键帧，水平移动图形符号“图图1”1”的位置至的位置至屏幕中央，并放大。单击第屏幕中央，并放大。单击第2020帧按帧按F6F6插入关键帧，在插入关键帧，在“属性属性”面板中设置面板中设置“颜色颜色”选项为选项为“Alpha”Alpha”，值为，值为“0%” 0%” 。鼠标右击第。鼠标右击第1 1帧至第帧至第1010帧之间，在弹出的快帧之间，在弹出的快捷菜单中选择捷菜单中选择“创建传统补间动画创建传统补间动画” ” 。3.3 “世界杯集锦” 案例二、操作步骤二、操作步骤第二步：第二步

24、：按照以上方法，可设计按照以上方法，可设计“图片图片2”2”至至“图片图片6”6”从舞台边缘的不同位置沿着不同的角度由小变大，或从舞台边缘的不同位置沿着不同的角度由小变大，或直接或旋转地进入舞台中央，然后再慢慢淡出消失直接或旋转地进入舞台中央，然后再慢慢淡出消失掉。掉。 1010测试影片，保存文件，并导出影片测试影片，保存文件，并导出影片 3.3 “世界杯集锦” 案例三、技术要点三、技术要点1 1、制作传统补间动画、制作传统补间动画创建传统补间动画的方法有如下创建传统补间动画的方法有如下2 2种。种。(1)(1)右击开始关键帧和结束关键帧间的任何一帧，在弹出的快右击开始关键帧和结束关键帧间的任

25、何一帧，在弹出的快捷菜单中单击捷菜单中单击“创建传统补间创建传统补间”菜单项。菜单项。(2)(2)单击开始关键帧和结束关键帧间的任何一帧，单击单击开始关键帧和结束关键帧间的任何一帧，单击“插入插入” “ “传统补间传统补间”菜单项。菜单项。注意：注意：如果要对一个图像制作传统补间动画，要先把它变成如果要对一个图像制作传统补间动画，要先把它变成组件组件( (按按Ctrl+GCtrl+G组合键组合键) )或者元件。或者元件。 3.3 “世界杯集锦” 案例三、技术要点三、技术要点2. 2. 创建补间动画创建补间动画 在在cs4cs4之前的之前的FLASHFLASH版本在制作动画的时候基本版本在制作动

26、画的时候基本都是定头、定尾、做动画都是定头、定尾、做动画( (开始帧、结束帧、创开始帧、结束帧、创建动画动作建动画动作) )。而从。而从flash cs4flash cs4开始，就演变为只要开始，就演变为只要定头，然后鼠标在哪一帧操作场景中的对象时定头，然后鼠标在哪一帧操作场景中的对象时，时间轴自动添加关键帧。所以制作补间动画，时间轴自动添加关键帧。所以制作补间动画演变为：定头、做动画演变为：定头、做动画( (开始帧、选中对应帧、开始帧、选中对应帧、改变对象位置改变对象位置) )。 3.3 “世界杯集锦” 案例三、技术要点三、技术要点3. 3. 设置旋转的运动效果设置旋转的运动效果 旋转的运动

27、效果是使实例在运动的同时旋转。设置方旋转的运动效果是使实例在运动的同时旋转。设置方法是在起始关键帧和结束关键帧之间已经设置好了运法是在起始关键帧和结束关键帧之间已经设置好了运动补间动画后，再通过动补间动画后，再通过“属性属性”面板中的来设置。其面板中的来设置。其中中“旋转旋转”项用于设置旋转的方式，有项用于设置旋转的方式，有“无无”、“自自动动”、“顺时针顺时针”、“逆时针逆时针”4 4个选项；后面的个选项；后面的“x”x”项用于设置从运动补间动画开始到结束元件旋转项用于设置从运动补间动画开始到结束元件旋转的次数。的次数。 3.3 “世界杯集锦” 案例三、技术要点三、技术要点4. 4. 设置运

28、动的快慢效果设置运动的快慢效果 时快时慢的运动效果也是在起始关键帧和结束关键帧时快时慢的运动效果也是在起始关键帧和结束关键帧之间已经设置好了运动补间动画后，再通过之间已经设置好了运动补间动画后，再通过“属性属性”面板中的来设置的。其中面板中的来设置的。其中“缓动缓动”项用于调节对象运项用于调节对象运动过程中的速度比例关系，正数表示先快后慢，负数动过程中的速度比例关系，正数表示先快后慢，负数表示先慢后快，零值表示动作匀速变化；后面的表示先慢后快，零值表示动作匀速变化；后面的“铅铅笔笔”用于打开用于打开“自定义缓入自定义缓入/ /缓出缓出”面板面板 。3.3 “世界杯集锦” 案例三、技术要点三、技

29、术要点5. 5. 设置物体逐步消失的效果设置物体逐步消失的效果 逐步消失的运动效果主要是通过设置运动补间动画的逐步消失的运动效果主要是通过设置运动补间动画的结束关键帧中物体的结束关键帧中物体的“Alpha”Alpha”值为值为“0%”0%”来实现的，来实现的，此设置可通过此设置可通过“属性属性”面板中的色彩效果样式中的面板中的色彩效果样式中的“Alpha”Alpha”值项来完成值项来完成 。3.3 “世界杯集锦” 案例四、练习四、练习(1) (1) 制作一个红色小球旋转运动的动画。要求小球先从舞制作一个红色小球旋转运动的动画。要求小球先从舞台的左上角顺时针旋转两周到达舞台底端中央，旋转台的左上

30、角顺时针旋转两周到达舞台底端中央，旋转的速度是先慢后快，形状是由小变大；再从底端中央的速度是先慢后快，形状是由小变大；再从底端中央逆时针旋转两周到达舞台右上角，要求旋转的速度是逆时针旋转两周到达舞台右上角，要求旋转的速度是先快后慢，形状是由大变小直至消失。先快后慢，形状是由大变小直至消失。(2) (2) 自行制作一个人走路的影片剪辑制作一个人从舞台左自行制作一个人走路的影片剪辑制作一个人从舞台左边走到舞台右边的运动动画。边走到舞台右边的运动动画。3.4 “闪闪的红星” 遮罩动画案例本节内容本节内容1. 1.案例效果案例效果2. 2.操作步骤操作步骤3. 3.技术要点技术要点4. 4.练习练习3

31、.4 “闪闪的红星” 遮罩动画案例一、案例效果一、案例效果重点与难点：重点与难点：遮罩动画的制作方法与技巧。遮罩动画的制作方法与技巧。3.4 “闪闪的红星” 遮罩动画案例二、操作步骤二、操作步骤1 1新建文档并命名新建文档并命名 启动启动AdobeAdobeFlashFlashCS5CS5后，新建一个文档，背景颜色后，新建一个文档，背景颜色和舞台大小都使用默认，保存文档，命名为和舞台大小都使用默认，保存文档，命名为“闪闪的闪闪的红星红星”。2. 2.绘制绘制“放射圆放射圆”元件元件 第一步：第一步：使用使用“工具箱工具箱”中的椭圆工具中的椭圆工具 和线条工具和线条工具 绘制绘制 一个粗细为一个

32、粗细为4 4的椭圆和直线。并用变形工具把直线的椭圆和直线。并用变形工具把直线的中心点调整至圆的中心点的中心点调整至圆的中心点. .如下图：如下图：3.4 “闪闪的红星” 遮罩动画案例二、操作步骤二、操作步骤第二步：第二步：打开打开“窗口窗口”菜单中的菜单中的“变形变形”面板面板. .设置旋转设置旋转角度为角度为”1010度度“单击单击”应用复制应用复制”按钮按钮3535次次. .选中所有选中所有线条，单击线条，单击“修改修改”“形状形状”“将线条转化为填将线条转化为填充充”，得到下面的左边的放射圆，得到下面的左边的放射圆1 1图形元件图形元件: :第三步：第三步：新建一个新建一个“放射圆放射圆

33、2”2”的图形元件。把的图形元件。把“放射圆放射圆1”1”拉入舞台中，并水平翻转。得到上面的右图。拉入舞台中，并水平翻转。得到上面的右图。3.4 “闪闪的红星” 遮罩动画案例二、操作步骤二、操作步骤3 3、制作、制作“光芒闪闪光芒闪闪”影片剪辑元件影片剪辑元件 第一步：第一步：新建一个新建一个“光芒闪闪光芒闪闪”的影片剪辑元件。的影片剪辑元件。 把把“放射圆放射圆1”1”拉入舞台中，改变色调为拉入舞台中，改变色调为“黄色调黄色调”，并设置一个，并设置一个100100帧的动作补间动画，使它帧的动作补间动画，使它“逆时针逆时针”旋转一周。旋转一周。 第二步：第二步：再新建一个图层，把再新建一个图层

34、，把“放射圆放射圆2”2”拉入舞台中，设置该图拉入舞台中，设置该图层为层为“遮罩层遮罩层”。得到效果如图：得到效果如图：3.4 “闪闪的红星” 遮罩动画案例二、操作步骤二、操作步骤4 4、制作、制作“五角星五角星”图形元件图形元件 第一步：第一步：新建一个新建一个“五角星五角星”的图形元件。的图形元件。 第二步：第二步：利用工具栏中的利用工具栏中的“多边形工具多边形工具”和和“线条工具线条工具”绘制一个五角星如下图：绘制一个五角星如下图：3.4 “闪闪的红星” 遮罩动画案例二、操作步骤二、操作步骤5 5、整合图形、整合图形 第一步：第一步：在场景在场景1 1里分别新建里分别新建“背景背景”、“

35、光芒光芒”和和“五角星五角星”3 3个图层。个图层。 第二步：第二步：在在“背景背景”图层里绘制一个浅蓝色的矩形背景图层里绘制一个浅蓝色的矩形背景。 第三步：第三步：把做好的把做好的“光芒闪闪光芒闪闪”元件和元件和“五角星五角星”元件元件分别拉入对应的图层里。分别拉入对应的图层里。6 6、测试影片，保存文件，并导出影片。、测试影片，保存文件，并导出影片。3.4 “闪闪的红星” 遮罩动画案例三、技术要点三、技术要点1. 1. 制作遮罩动画制作遮罩动画 在制作遮罩动画的时候用到两个图层：在制作遮罩动画的时候用到两个图层：遮罩层遮罩层和和被遮罩层被遮罩层。被遮罩层上的图形通过遮罩层显示出来。播放动画

36、的时。被遮罩层上的图形通过遮罩层显示出来。播放动画的时候，遮罩层上的内容不会被显示出来，被遮罩层上位于遮候，遮罩层上的内容不会被显示出来，被遮罩层上位于遮罩层之外的内容也不被显示。罩层之外的内容也不被显示。2. 2. 设置一个图层遮罩多个图层设置一个图层遮罩多个图层 在在FlashFlash中一个遮罩图层可以同时遮罩多个被遮罩图层。当中一个遮罩图层可以同时遮罩多个被遮罩图层。当把某个图层设置为遮罩层时，它下面的图层自动被设置为把某个图层设置为遮罩层时，它下面的图层自动被设置为被遮罩层。当需要使一个图层遮罩多个图层时，可以通过被遮罩层。当需要使一个图层遮罩多个图层时，可以通过下面的两种方法实现：

37、下面的两种方法实现：3.4 “闪闪的红星” 遮罩动画案例三、技术要点三、技术要点 （1 1）当需要被添加为被遮罩层的图层位于遮罩层的上方）当需要被添加为被遮罩层的图层位于遮罩层的上方时，选中该图层，单击并拖动它到遮罩层下方。时，选中该图层，单击并拖动它到遮罩层下方。 （2 2）当需要被添加为被遮罩层的图层位于遮罩层的下方）当需要被添加为被遮罩层的图层位于遮罩层的下方时，在该图层上右击弹出快捷菜单，选择时，在该图层上右击弹出快捷菜单，选择“属性属性”，打，打开开“图层属性图层属性”对话框，选择对话框，选择”被遮罩被遮罩”类型。类型。 如果需要取消遮罩与被遮罩的关系，可以在被遮罩层打如果需要取消遮

38、罩与被遮罩的关系，可以在被遮罩层打开开“图层属性图层属性”对话框，选中对话框，选中”一般一般”单选按钮；或者单选按钮；或者把该图层拖动到遮罩层上方。把该图层拖动到遮罩层上方。3.4 “闪闪的红星” 遮罩动画案例四、练习四、练习 请制作一个请制作一个“瀑布瀑布”遮罩动画，该动画制作时截取了遮罩动画，该动画制作时截取了水流部分的图像作为被遮罩层，遮罩层是使用笔刷工水流部分的图像作为被遮罩层，遮罩层是使用笔刷工具绘制的水波线条，遮罩层的波纹从上到下做运动具绘制的水波线条，遮罩层的波纹从上到下做运动 。效果如下图：效果如下图：3.5 “蝴蝶飞”引导动画案例本节内容本节内容1. 1.案例效果案例效果2.

39、 2.操作步骤操作步骤3. 3.技术要点技术要点4. 4.练习练习3.5 “蝴蝶飞”引导动画案例一、案例效果一、案例效果 重点与难点：重点与难点：引导动画的制作方法与技巧，以及应用引导动画的制作方法与技巧，以及应用引导路径的技巧。引导路径的技巧。3.5 “蝴蝶飞”引导动画案例二、操作步骤二、操作步骤1 1新建文档并命名新建文档并命名 启动启动AdobeAdobeFlashFlashCS5CS5后，新建一个文档，背景颜色和舞后，新建一个文档，背景颜色和舞台大小都使用默认，保存文档，命名为台大小都使用默认，保存文档，命名为“蝴蝶飞蝴蝶飞”。2 2导入背景图片导入背景图片 修改修改“图层图层1”1”

40、的名称为的名称为“背景背景” 。导入本案例对应的素材导入本案例对应的素材文件夹中的文件夹中的“花丛花丛.bmp.bmp ”的图片文件的图片文件 ，利用，利用“对齐对齐”面板面板缩放成与舞台大小一样缩放成与舞台大小一样 。3.5 “蝴蝶飞”引导动画案例二、操作步骤二、操作步骤3 3制作制作“蝴蝶飞蝴蝶飞1”1”和和“蝴蝶飞蝴蝶飞2”2”元件元件 第一步：第一步：新建一个命名为新建一个命名为“身体身体” 的图形元件。如下左的图形元件。如下左图：图： 第二步：第二步：新建一个新建一个“图形图形”元件，命名为元件，命名为“翅膀翅膀”，导，导入图片本案例对应的素材文件夹中的入图片本案例对应的素材文件夹中

41、的“蝴蝶蝴蝶1”1” ，并进，并进行相应的调整。效果如上右图。行相应的调整。效果如上右图。3.5 “蝴蝶飞”引导动画案例二、操作步骤二、操作步骤第三步：第三步：新建一个新建一个“影片剪辑影片剪辑”，命名为，命名为“蝴蝶飞蝴蝶飞1”1” 。 A A、在、在“蝴蝶飞蝴蝶飞1”1”元件中建立元件中建立2 2个图层，并给图层分别个图层，并给图层分别命名为命名为“身体身体”和和“翅膀翅膀”。利用前面所做的。利用前面所做的“身体身体”和和“翅膀翅膀”元件，组成一只完整的蝴蝶效果如下左元件，组成一只完整的蝴蝶效果如下左图图B B、在、在“翅膀翅膀”的第的第2 2帧插入关键帧，帧插入关键帧，然后选中然后选中【

42、任意变形工具任意变形工具】，将左边，将左边“翅膀翅膀1”1”实例的变实例的变形中心点调整到与身体接触位置，然后向里压，使用形中心点调整到与身体接触位置，然后向里压，使用同样的方法调整右边的实例，效果如上右图。同样的方法调整右边的实例，效果如上右图。3.5 “蝴蝶飞”引导动画案例二、操作步骤二、操作步骤C C、为了让蝴蝶有节奏的拍动翅膀，同时选中、为了让蝴蝶有节奏的拍动翅膀，同时选中“翅膀翅膀”的第的第1 1、2 2帧，帧，点右键点右键“复制帧复制帧”，然后将其粘贴到第，然后将其粘贴到第6 6、7 7帧、帧、9 9、1010帧、帧、1212、1313帧、帧、1717、1818帧、帧、2222、2

43、323帧，最后在帧，最后在2525帧插入扩展帧，这样就有了帧插入扩展帧，这样就有了蝴蝶不断煽动翅膀的效果，帧的设置如图蝴蝶不断煽动翅膀的效果，帧的设置如图 ： D D、利用和、利用和“蝴蝶蝴蝶1”1”影片剪辑元件同样的制作方法可以得到影片剪辑元件同样的制作方法可以得到“蝴蝶蝴蝶2”2”影片剪辑元件。只是翅膀利用素材文件夹中的影片剪辑元件。只是翅膀利用素材文件夹中的“蝴蝶蝴蝶2.jpg” 2.jpg” 来制作。来制作。3.5 “蝴蝶飞”引导动画案例二、操作步骤二、操作步骤4 4制作制作“闪烁文字闪烁文字”元件元件 （1 1）新建一个）新建一个“图形图形”元件，命名为元件，命名为“星星星星”。 效

44、果如效果如图：图： （2 2）新建一个）新建一个“影片剪辑影片剪辑”，命名为，命名为“星星旋转星星旋转”，将，将“星星星星”元件拖放到影片剪辑中，适当调整大小，在第元件拖放到影片剪辑中，适当调整大小，在第1515帧插入关键帧，创建运动补间动画，在帧插入关键帧，创建运动补间动画，在“属性属性”面板面板中设置中设置“逆时针逆时针”旋转旋转“1”1”次。次。3.5 “蝴蝶飞”引导动画案例二、操作步骤二、操作步骤（3 3）新建一个）新建一个“图形图形”元件，命名为元件，命名为“文字文字” ” ，效果如，效果如图：图：（4 4）新建一个）新建一个“影片剪辑影片剪辑”，命名为，命名为“闪烁文字闪烁文字”，

45、效，效果如图：果如图：3.5 “蝴蝶飞”引导动画案例二、操作步骤二、操作步骤5 5布置主场景布置主场景（1 1）回到主场景，新建四个图层，从上到下）回到主场景，新建四个图层，从上到下4 4个图层为个图层为“文字文字”、“蝴蝶蝴蝶2”2”、 “ “闪烁闪烁”和和“蝴蝶蝴蝶1” 1” （2 2）从）从“库库”中将中将“星星星星”元件拖放到元件拖放到“闪烁闪烁”图层，使用图层，使用【任意任意变形工具变形工具】适当调整大小，按住适当调整大小，按住CtrlCtrl键多复制几个键多复制几个“星星星星”实例实例，选中该图层的第，选中该图层的第1 1帧，按帧，按F8F8键将这些星星转换为键将这些星星转换为“影

46、片剪辑影片剪辑”，命名为，命名为“闪烁星星闪烁星星”。（3 3）回到主场景，在）回到主场景，在“背景背景”和和“闪烁闪烁”图层的第图层的第300300帧插入扩展帧插入扩展帧。接着从帧。接着从“库库”中把中把“蝴蝶飞蝴蝶飞1”1”影片剪辑拖放到影片剪辑拖放到“蝴蝶蝴蝶1”1”图图层，使用层，使用【任意变形工具任意变形工具】调整大小并旋转一定的角度，并在第调整大小并旋转一定的角度，并在第300300帧插入扩展帧。帧插入扩展帧。3.5 “蝴蝶飞”引导动画案例二、操作步骤二、操作步骤（4 4）从）从“库库”中把中把“蝴蝶飞蝴蝶飞2”2”拖放到拖放到“蝴蝶蝴蝶2”2”图层的第图层的第1 1帧，并帧，并调

47、整其大小和旋转角度，在第调整其大小和旋转角度，在第150150帧插入关键帧，并创建运动补间帧插入关键帧，并创建运动补间动画。在动画。在“蝴蝶蝴蝶2”2”图层的上方新建一个图层的上方新建一个“引导层引导层”在引导层上使在引导层上使用用【铅笔工具铅笔工具】绘制一条引导线绘制一条引导线 ，并设置，并设置“蝴蝶蝴蝶2” 2” 的引导动画的引导动画如下图：如下图：3.5 “蝴蝶飞”引导动画案例二、操作步骤二、操作步骤（5 5）在）在“蝴蝶蝴蝶2”2”图层的第图层的第250250帧和帧和300300帧插入关键帧，并在这两个帧帧插入关键帧，并在这两个帧之间创建运动补间动画；在引导层的第之间创建运动补间动画；

48、在引导层的第151151帧插入空白关键帧，在帧插入空白关键帧，在250250帧插入关键帧，并在第帧插入关键帧，并在第250250帧绘制一条引导线，将帧绘制一条引导线，将“蝴蝶蝴蝶2”2”图图层的第层的第250250帧、帧、300300帧上的蝴蝶对齐到引导线的首端和末端，制作帧上的蝴蝶对齐到引导线的首端和末端，制作引导动画。引导动画。 3.5 “蝴蝶飞”引导动画案例二、操作步骤二、操作步骤（6 6）在）在“文字文字”图层的第图层的第150150帧插入关键帧，将帧插入关键帧，将“闪烁闪烁文字文字”元件拖到该帧，放在舞台左下方，如图元件拖到该帧，放在舞台左下方，如图3.973.97所示所示；在该图层

49、的；在该图层的200200帧插入关键帧，然后将帧插入关键帧，然后将150150帧上的文帧上的文字设为透明，并在两个关键帧之间创建补间动画，最字设为透明，并在两个关键帧之间创建补间动画，最后在后在300300帧插入扩展帧。帧插入扩展帧。6 6测试影片，保存文件，并导出影片测试影片，保存文件，并导出影片3.5 “蝴蝶飞”引导动画案例三、技术要点三、技术要点1 1、制作引导动画制作引导动画 引导层上绘制的是引导路径，这些线条可以是使用钢笔、铅笔、线条引导层上绘制的是引导路径，这些线条可以是使用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具绘制出的。、椭圆工具、矩形工具或画笔工具绘制出的。 被引导层上

50、可以创建被引导层上可以创建的对象包括：的对象包括： 元件实例、文字或群组等，但是不能是分散的矢量图元件实例、文字或群组等，但是不能是分散的矢量图形。形。2. 2. 应用引导路径的技巧应用引导路径的技巧 （1 1）引导线要平滑、流畅。）引导线要平滑、流畅。 （2 2）被引导层上的对象的变形中心一定要位于引导线上。另外，按）被引导层上的对象的变形中心一定要位于引导线上。另外，按下下“工具箱工具箱”中的中的【贴紧至对象贴紧至对象】按钮，可以是对象更容易吸附到引按钮，可以是对象更容易吸附到引导线上。导线上。 （3 3）选中）选中“调整到路径调整到路径”复选框。复选框。 （4 4）对齐引导线和对象时，选