1、FlashFlash平面动画制作平面动画制作第第3 3章章 FlashFlash平面动画制作平面动画制作教学目标教学目标 教学重点、难点教学重点、难点 本章小结本章小结 教学内容教学内容 教学目标教学目标 通过这章的学习，学生可以熟练的掌握逐通过这章的学习，学生可以熟练的掌握逐帧动画、运动补间动画、形状补间动画、遮帧动画、运动补间动画、形状补间动画、遮罩层动画和引导动画这罩层动画和引导动画这5 5种动画的制作方法和种动画的制作方法和技巧。技巧。第第3章章 FlashFlash平面动画制作平面动画制作 教学重点与难点教学重点与难点 第第3 3章章 FlashFlash平面动画制作平面动画制作 逐
2、帧动画、运动补间动画、形状补间动逐帧动画、运动补间动画、形状补间动画、遮罩层动画和引导动画的制作方法和画、遮罩层动画和引导动画的制作方法和设计技巧。设计技巧。教学内容教学内容 本章小结本章小结第第3 3章章 FlashFlash平面动画制作平面动画制作本章计划授课本章计划授课14学时学时本节内容本节内容FlashFlash平面动画的基本概念平面动画的基本概念FlashFlash平面动画的基本制作方法平面动画的基本制作方法平面动画的设计技巧平面动画的设计技巧练习练习3.1 Flash平面动画制作的概述平面动画制作的概述动画动画任何随着时间而发生的位置或者形态上的改变。任何随着时间而发生的位置或者
3、形态上的改变。Flash动画是由一个个动画是由一个个“帧帧”上的图片连接而成的，帧是动上的图片连接而成的，帧是动画画 最基本的单位。最基本的单位。舞台舞台是制作动画的地方，在播放器中播放动画时，只有舞是制作动画的地方，在播放器中播放动画时，只有舞台中的对象被显示。台中的对象被显示。工作区域工作区域舞台和周围的灰度区域舞台和周围的灰度区域场景场景是动画的另一个组成部分是是动画的另一个组成部分是“场景场景”的变换，就像一的变换，就像一部电影不可能只在一个地方拍摄一样，制作部电影不可能只在一个地方拍摄一样，制作Flash动画也需要有动画也需要有不同的场景。不同的场景。一、一、FlashFlash平面
4、动画的基本概念平面动画的基本概念3.1 Flash平面动画制作的概述平面动画制作的概述1、逐帧动画、逐帧动画 将动画的每一帧均设置为关键帧，通过改变将动画的每一帧均设置为关键帧，通过改变每一个关键帧中的图像而产生动画效果。每一个关键帧中的图像而产生动画效果。逐帧动画是逐帧动画是Flash所提供的最基本的动画形式。所提供的最基本的动画形式。2、形状补间动画、形状补间动画 形状补间动画被应用于基本形状的变化，形状补间动画被应用于基本形状的变化，它是某一个对象在一定时间内其形状发生过渡型渐变的动画。它是某一个对象在一定时间内其形状发生过渡型渐变的动画。形状补间动画用位于时间轴上动画的开始帧与结束帧之
5、间形状补间动画用位于时间轴上动画的开始帧与结束帧之间区域的一个绿色的连续箭头表示。区域的一个绿色的连续箭头表示。二、二、FlashFlash平面动画的基本制作方法平面动画的基本制作方法3.1 Flash平面动画制作的概述平面动画制作的概述3、运动补间动画、运动补间动画运动补间动画被应用于把对象由一个运动补间动画被应用于把对象由一个地方移动到另一个地方的情况，也可应用于形成物体的缩放、地方移动到另一个地方的情况，也可应用于形成物体的缩放、倾斜或者旋转的动画，还可用于形成元件的颜色和透明度变倾斜或者旋转的动画，还可用于形成元件的颜色和透明度变化的动画。化的动画。运动补间动画用位于时间轴上动画的开始
6、帧与结束帧之运动补间动画用位于时间轴上动画的开始帧与结束帧之间区域的一个蓝色的连续箭头表示。间区域的一个蓝色的连续箭头表示。二、二、FlashFlash平面动画的基本制作方法平面动画的基本制作方法3.1 Flash平面动画制作的概述平面动画制作的概述4、遮罩动画、遮罩动画遮罩动画是将一个图层设置为遮罩层，此图遮罩动画是将一个图层设置为遮罩层，此图层中的对象将相应地转换为遮罩对象。其它图层则为被遮罩层中的对象将相应地转换为遮罩对象。其它图层则为被遮罩层，这些图层的对象被遮罩对象所屏蔽的那部分才可显示。层，这些图层的对象被遮罩对象所屏蔽的那部分才可显示。5、引导动画、引导动画引导动画实际上是在运动
7、补间动画的基础上引导动画实际上是在运动补间动画的基础上添加一个引导图层，该图层有一条可以引导运动方向的引导添加一个引导图层，该图层有一条可以引导运动方向的引导线，使另一个图层中的对象依据此引导线进行运动的动画。线，使另一个图层中的对象依据此引导线进行运动的动画。二、二、FlashFlash平面动画的基本制作方法平面动画的基本制作方法3.1 Flash平面动画制作的概述平面动画制作的概述注意以下几个要点：注意以下几个要点：1 1要想吸引观众，最重要的是让动作具有一定的含义。要想吸引观众，最重要的是让动作具有一定的含义。2 2动作应该支持动画的内容和主题。动作应该支持动画的内容和主题。3 3动作可
8、以像文章和颜色一样传达情绪、感情和个性。动作可以像文章和颜色一样传达情绪、感情和个性。4 4在日常生活中仔细观察动作并记录下来，建立一个创建在日常生活中仔细观察动作并记录下来，建立一个创建动画时的动画时的“资源库资源库”。5 5动作的设计要符合自然规律。动作的设计要符合自然规律。三、三、FlashFlash平面动画的设计技巧平面动画的设计技巧3.1 Flash平面动画制作的概述平面动画制作的概述本节内容本节内容案例效果案例效果操作步骤操作步骤技术要点技术要点练习练习3.2“运动的小青蛙运动的小青蛙”逐帧动画案例逐帧动画案例 一、案例效果一、案例效果重点与难点：重点与难点：逐帧动画的制作技巧和卡
9、通人物的绘图技巧。逐帧动画的制作技巧和卡通人物的绘图技巧。3.2“运动的小青蛙运动的小青蛙”逐帧动画案例逐帧动画案例二、操作步骤二、操作步骤本案例是在本案例是在2.5“小青蛙小青蛙”案例的基础上制作而成。案例的基础上制作而成。1 1：打开素材：打开素材“青蛙侧面青蛙侧面”的的Flash工程文件。并把工程文件。并把文文件另存为件另存为“运动的小青蛙运动的小青蛙”2 2：制作逐帧动画：制作逐帧动画 第一步：第一步：建立一个命名为建立一个命名为“运动合成运动合成”的影片剪辑的影片剪辑元件。元件。3.2“运动的小青蛙运动的小青蛙”逐帧动画案例逐帧动画案例二、操作步骤二、操作步骤第二步：第二步：打开打开
10、“库库”面板把面板把“头头”、“身体身体”、“左左手手”、“右手右手”、“左脚左脚”、“右脚右脚”元件拖到元件拖到“运运动合成动合成”元件中，并分布到各个图层以对应的名字命元件中，并分布到各个图层以对应的名字命名名 。第三步：第三步：分别检查左右手、头和脚的中心点位置，根分别检查左右手、头和脚的中心点位置，根据人的基本运动规律来确定各个关节运动的中心点。据人的基本运动规律来确定各个关节运动的中心点。3.2“运动的小青蛙运动的小青蛙”逐帧动画案例逐帧动画案例二、操作步骤二、操作步骤第四步：第四步：画脚的动作画脚的动作第1帧第2帧第3帧第4帧第5帧第6帧第7帧3.2“运动的小青蛙运动的小青蛙”逐帧
11、动画案例逐帧动画案例二、操作步骤二、操作步骤第五步：第五步：在对应的帧上依次设置如下相应的动作。在对应的帧上依次设置如下相应的动作。3测试影片，保存文件，并导出影片测试影片，保存文件，并导出影片 3.2“运动的小青蛙运动的小青蛙”逐帧动画案例逐帧动画案例三、技术要点三、技术要点1、制作逐帧动画的基本步骤：、制作逐帧动画的基本步骤：（1）选择一关键帧作为逐帧动画的开始帧。）选择一关键帧作为逐帧动画的开始帧。（2）在开始帧中绘制或导入动画序列中的第）在开始帧中绘制或导入动画序列中的第1张图片。张图片。（3）选择下一关键帧，并进行任意修改或导入绘制一张）选择下一关键帧，并进行任意修改或导入绘制一张新
12、图片。新图片。（4）继续添加关键帧并改变相应关键帧的内容直到最终）继续添加关键帧并改变相应关键帧的内容直到最终完成动画。完成动画。（5）测试影片并导出一个测试影片并导出一个.swf文件。文件。3.2“运动的小青蛙运动的小青蛙”逐帧动画案例逐帧动画案例2 2、卡通人物的绘图技巧、卡通人物的绘图技巧（1）身体的比例：）身体的比例：当你画真实人物时，身高一般是按六当你画真实人物时，身高一般是按六至七个头来画的，而卡通人物，最常见的比例是三至四至七个头来画的，而卡通人物，最常见的比例是三至四个头高个头高。（2）基本结构：）基本结构：卡通人物多数是以球体或圆柱体为基础，卡通人物多数是以球体或圆柱体为基础
13、，因为这两种形状比较容易掌握。因为这两种形状比较容易掌握。下图是绘制卡通人物的一般流程下图是绘制卡通人物的一般流程：三、技术要点三、技术要点3.2“运动的小青蛙运动的小青蛙”逐帧动画案例逐帧动画案例(1)在制作逐帧动画时，前后帧之间的位置关系如何？在制作逐帧动画时，前后帧之间的位置关系如何？(2)利用青蛙为元素制作一组青蛙走路的动画利用青蛙为元素制作一组青蛙走路的动画(参考从前言中所参考从前言中所提供的网址下载的本章的提供的网址下载的本章的“练习参考练习参考”文件夹中的文件夹中的Flash工程工程文件文件“走路参考走路参考”)。四、练习四、练习 3.2“运动的小青蛙运动的小青蛙”逐帧动画案例逐
14、帧动画案例本节内容本节内容案例效果案例效果操作步骤操作步骤技术要点技术要点练习练习3.3“恭贺新禧恭贺新禧”案例案例一、案例效果一、案例效果重点与难点：重点与难点：形状补间动画的特点、创建方法，及如何设置形状提示形状补间动画的特点、创建方法，及如何设置形状提示点来控制形状补间动画的中间过程。点来控制形状补间动画的中间过程。3.3“恭贺新禧恭贺新禧”案例案例二、操作步骤二、操作步骤1 1新建文档并命名新建文档并命名 启动启动AdobeAdobeFlashFlashCS3CS3后，新建一个文档，对背景颜后，新建一个文档，对背景颜色和舞台大小进行相应的设置，保存文档，命名为色和舞台大小进行相应的设置
15、，保存文档，命名为“恭贺新恭贺新禧禧”。2.设置背景图片设置背景图片 将将”图层图层1”改名为改名为“背景背景”，把素材中的背景图片文件，把素材中的背景图片文件“焰火焰火”导入到舞台，并设置宽为导入到舞台，并设置宽为400、高为、高为300，居中对齐，居中对齐，扩展到扩展到100帧。锁定图层。帧。锁定图层。3.3“恭贺新禧恭贺新禧”案例案例二、操作步骤二、操作步骤3 3绘制灯笼绘制灯笼 第一步：第一步：插入插入4个新图层个新图层，分别命名为，分别命名为“恭恭”、“贺贺”、“新新”、“禧禧”。将。将“贺贺”、“新新”、“禧禧”三个图层锁定。三个图层锁定。单击单击“恭恭”图层的第图层的第20帧，按
16、帧，按F6键增加一个关键帧。利用键增加一个关键帧。利用“矩矩形工具形工具”和和“椭圆工具椭圆工具”绘制如下左绘制如下左“灯笼灯笼”图形：图形：第二步：第二步：分别在分别在“贺贺”、“新新”、“禧禧”图层中第图层中第20帧单击帧单击F6键添加键添加关键帧，将灯笼粘贴到屏幕上并调整到适当的位置。如上右图。关键帧，将灯笼粘贴到屏幕上并调整到适当的位置。如上右图。3.3“恭贺新禧恭贺新禧”案例案例二、操作步骤二、操作步骤4绘制绘制“恭贺新禧恭贺新禧”四个文字四个文字 第一步：第一步：解锁解锁“恭恭”图层，锁定其它所有图层。在第图层，锁定其它所有图层。在第40帧添加帧添加一个关键帧。将原来的灯笼删掉。单
17、击【文本工具】，设置字一个关键帧。将原来的灯笼删掉。单击【文本工具】，设置字体为体为“华文彩云华文彩云”，字大小为，字大小为“74”，字体颜色为纯红色，使，字体颜色为纯红色，使用【文本工具】中输入用【文本工具】中输入“恭恭”字。将此汉字摆在原来灯笼的位字。将此汉字摆在原来灯笼的位置。选中此汉字，用置。选中此汉字，用Ctrl+B键将其打散成形状。将打散的汉字键将其打散成形状。将打散的汉字的内外边界颜色均设置为纯黄色。的内外边界颜色均设置为纯黄色。第二步：第二步：用同样的方法给用同样的方法给“贺贺”、“新新”和和“禧禧”图层也分别图层也分别在第在第40帧绘制一个帧绘制一个“贺贺”、“新新”和和“禧
18、禧”字。最终效果如图字。最终效果如图 3.3“恭贺新禧恭贺新禧”案例案例二、操作步骤二、操作步骤5绘制其它关键帧，并设置形变动画绘制其它关键帧，并设置形变动画第一步：第一步：解锁解锁“恭恭”、“贺贺”、“新新”和和“禧禧”四个图层。给四个图层。给此四个图层均在第此四个图层均在第40帧、第帧、第60帧和第帧和第80帧添加一个关键帧。帧添加一个关键帧。第二步：第二步：鼠标右击鼠标右击“恭恭”图层的第图层的第20帧至第帧至第40帧之间，在弹出帧之间，在弹出的快捷菜单中选择的快捷菜单中选择“创建补间形状创建补间形状”，用同样的方法给，用同样的方法给“恭恭”图层的第图层的第60帧至第帧至第80帧之间也创
19、建形状补间动画。帧之间也创建形状补间动画。用同样的方法给用同样的方法给“贺贺”、“新新”、“禧禧”三个图层的第三个图层的第20帧至第帧至第40帧之间、第帧之间、第60帧至第帧至第80帧之间也创建形状补间动画。帧之间也创建形状补间动画。6、测试影片，保存文件，并导出影片。、测试影片，保存文件，并导出影片。3.3“恭贺新禧恭贺新禧”案例案例三三 、技术要点、技术要点1.制作形状补间动画制作形状补间动画 形状补间动画的方法有如下三种：形状补间动画的方法有如下三种：（1）选择开始关键帧和结束关键帧间的任何一帧，在）选择开始关键帧和结束关键帧间的任何一帧，在“属性属性”面板中设置。面板中设置。（2）右击
20、开始关键帧和结束关键帧间的任何一帧，在）右击开始关键帧和结束关键帧间的任何一帧，在快捷菜单中选择快捷菜单中选择“创建补间形状创建补间形状”。（3）单击开始关键帧和结束关键帧间的任何一帧，选）单击开始关键帧和结束关键帧间的任何一帧，选择择【插入插入】【时间轴】【时间轴】【创建补间形状】菜单项【创建补间形状】菜单项。3.3“恭贺新禧恭贺新禧”案例案例三三 、技术要点、技术要点2.设置形状提示点设置形状提示点 在已经创建了一个基本的形状补间动画后，可以按照在已经创建了一个基本的形状补间动画后，可以按照以下步骤添加形状提示点：以下步骤添加形状提示点：（1）首先在时间轴中的形状补间动画的开始关键帧中选）
21、首先在时间轴中的形状补间动画的开始关键帧中选择一个形状，然后单击择一个形状，然后单击【修改修改】【形状】【形状】【添加形状提【添加形状提示】菜单项，示】菜单项，Flash会在舞台上放置一个用字母标记的红会在舞台上放置一个用字母标记的红色小圆圈，这就是形状提示点。可以用以上方法添加多个色小圆圈，这就是形状提示点。可以用以上方法添加多个形状提示点，它们都按字母顺序标识。形状提示点，它们都按字母顺序标识。（2）在开始关键帧的形状上确定一个点，用）在开始关键帧的形状上确定一个点，用【箭头工【箭头工具】进行选择并移动第一个形状提示点，把它放在形状上具】进行选择并移动第一个形状提示点，把它放在形状上一个用
22、户想要其与最终形状中的一块区域进行匹配的区域一个用户想要其与最终形状中的一块区域进行匹配的区域上（比如说，一个棱角或一段曲线）上（比如说，一个棱角或一段曲线）3.3“恭贺新禧恭贺新禧”案例案例三三 、技术要点、技术要点（3）当把播放头移动到形状补间动画的结束帧上时，会）当把播放头移动到形状补间动画的结束帧上时，会看到一个与放在开始帧上的标了字母的形状提示点相看到一个与放在开始帧上的标了字母的形状提示点相匹配的另一个标了相同字母的形状提示点。把这个形匹配的另一个标了相同字母的形状提示点。把这个形状提示点用状提示点用【箭头工具】定位，从而在最终形状上标【箭头工具】定位，从而在最终形状上标记出一块应
23、该与初始形状上特定区域相匹配的区域记出一块应该与初始形状上特定区域相匹配的区域。当结束关键帧中的形状提示点的颜色由红色变成了绿当结束关键帧中的形状提示点的颜色由红色变成了绿色（如图色（如图3.43所示），而在开始关键帧中的形状提示所示），而在开始关键帧中的形状提示点由红色变成了黄色，则表示形状提示点已经与作品点由红色变成了黄色，则表示形状提示点已经与作品建立了正确的连接。建立了正确的连接。（4）将播放头在时间轴上移动预览新的形变过程。不停）将播放头在时间轴上移动预览新的形变过程。不停地加入形状提示点，或对它们进行重新定位，直到动地加入形状提示点，或对它们进行重新定位，直到动画产生出了理想的形变
24、过程。画产生出了理想的形变过程。3.3“恭贺新禧恭贺新禧”案例案例（1）制作一个笑脸到哭脸的变脸形变动画，效果如下图）制作一个笑脸到哭脸的变脸形变动画，效果如下图所示。所示。（提示：笑脸系列形状可采用【文本工具】输入，字体（提示：笑脸系列形状可采用【文本工具】输入，字体采用采用“Windings”，输入大写字母，输入大写字母“L”则可输入一个笑则可输入一个笑脸，其它两张脸对应着大写字母脸，其它两张脸对应着大写字母“K”和和“L”。）。）四、练习四、练习 3.3“恭贺新禧恭贺新禧”案例案例(2)(2)制作一个变手的形变动画，并通过设置形状提示点来制作一个变手的形变动画，并通过设置形状提示点来控制
25、手指之间的对应变换位置。动画中手的姿势如下图控制手指之间的对应变换位置。动画中手的姿势如下图所示。所示。（提示：手的系列形状可采用（提示：手的系列形状可采用“文本工具文本工具”输入，字体输入，字体采用采用“Windings”，输入大写字母，输入大写字母“A”“G”实现）实现）四、练习四、练习 3.3“恭贺新禧恭贺新禧”案例案例本节内容本节内容案例效果案例效果操作步骤操作步骤技术要点技术要点练习练习3.4“宇宙集锦宇宙集锦”案例案例一、案例效果一、案例效果重点与难点：重点与难点：运动补间动画的制作方法和技巧，及如何设置旋转、运动运动补间动画的制作方法和技巧，及如何设置旋转、运动的快慢和逐渐消失的
26、效果。的快慢和逐渐消失的效果。3.4“宇宙集锦宇宙集锦”案例案例二、操作步骤二、操作步骤1 1新建文档并命名新建文档并命名 启动启动AdobeAdobeFlashFlashCS3CS3后，新建一个文档，对舞台大后，新建一个文档，对舞台大小进行小进行设置宽为设置宽为400、高为、高为300，保存文档，命名为，保存文档，命名为“宇宙集宇宙集锦锦”。2.创建宇宙图形符号创建宇宙图形符号 新建一个新建一个“图图1”的图形元件，导入的图形元件，导入本案例对应的素材文件本案例对应的素材文件夹中的夹中的“宇宙宇宙1”的图片文件的图片文件。用同样的方法导入文件名为用同样的方法导入文件名为“宇宙宇宙2”至至“宇
27、宙宇宙6”图片文件，图片文件，分别对应生成名为分别对应生成名为“图图2”至至“图图6”的图形元件。的图形元件。3.4“宇宙集锦宇宙集锦”案例案例二、操作步骤二、操作步骤3创建创建“Loading”文本的拉伸效果文本的拉伸效果 第一步：第一步：新建一个名称为新建一个名称为“Loading”的影片剪辑元件。的影片剪辑元件。第二步：第二步：选用【文本工具】输入文字选用【文本工具】输入文字“Loading”，在，在“属性属性”面板中设置此文字的字体为面板中设置此文字的字体为“黑体黑体”，字号为，字号为25，字，字体颜色为白色。用体颜色为白色。用Ctrl+B将文字打散。将第将文字打散。将第1帧复制到第帧
28、复制到第2帧至帧至第第13帧。鼠标单击第帧。鼠标单击第1帧，只保留帧，只保留“L”字母，删除其它字符图字母，删除其它字符图形。从第形。从第2帧开始逐步增加字符图形直至第帧开始逐步增加字符图形直至第13帧。鼠标单击第帧。鼠标单击第18帧，按帧，按F5键增加一个扩展帧。键增加一个扩展帧。3.4“宇宙集锦宇宙集锦”案例案例4创建创建“光线光线”图形符号图形符号第一步：第一步：新建名称为新建名称为“光线光线”的图形元件。的图形元件。第二步：第二步：利用利用“椭圆工具椭圆工具”绘制如下图的光线效果：绘制如下图的光线效果：二、操作步骤二、操作步骤3.4“宇宙集锦宇宙集锦”案例案例5创建创建“光束光束”影片
29、剪辑影片剪辑第一步：第一步：新建名称为新建名称为“光束光束”的影片剪辑元件的影片剪辑元件。第二步：第二步：将将“光线光线”图形符号拖入舞台中央，并用图形符号拖入舞台中央，并用Ctrl+B打散。打散。鼠标单击第鼠标单击第25帧，按帧，按F6键插入关键帧，将光线沿直线运动轨迹键插入关键帧，将光线沿直线运动轨迹拖动至舞台的边缘。鼠标点击第拖动至舞台的边缘。鼠标点击第30帧按帧按F5键插入扩展帧。单击键插入扩展帧。单击第第1帧，将帧，将“光线光线”图形符号缩小并移动至舞台中心点。鼠标图形符号缩小并移动至舞台中心点。鼠标右击第右击第1帧至第帧至第25帧之间，在弹出的快捷菜单中选择帧之间，在弹出的快捷菜单
30、中选择“创建补创建补间形状间形状”。再新建多个图层，对每个图层按照上述方法在舞台。再新建多个图层，对每个图层按照上述方法在舞台的不同角度做的不同角度做“光线光线”图形符号的形变动画。最终结果如下图图形符号的形变动画。最终结果如下图 二、操作步骤二、操作步骤3.4“宇宙集锦宇宙集锦”案例案例6 6设置背景图片设置背景图片 导入背景图片到场景导入背景图片到场景1 1中，选择本案例对应的素材文件夹中中，选择本案例对应的素材文件夹中的背景图片文件的背景图片文件“sky”sky”。设置此图片的宽为。设置此图片的宽为400400、高为、高为300300。通过设置通过设置“对齐对齐”面板选项，使背景图片位于
31、舞台中央面板选项，使背景图片位于舞台中央 。7 7创建创建“光光”图层图层 创建新图层命名为创建新图层命名为“光光”，将影片剪辑，将影片剪辑“光束光束”拖至舞台拖至舞台中央，并扩展制中央，并扩展制120120帧。帧。8 8创建创建“Loading”Loading”图层图层 创建新图层命名为创建新图层命名为“Loading”Loading”，将影片剪辑，将影片剪辑“Loading”Loading”拖至舞台左下角。并扩展制拖至舞台左下角。并扩展制120120帧。帧。二、操作步骤二、操作步骤3.4“宇宙集锦宇宙集锦”案例案例9 9创建宇宙图片动画创建宇宙图片动画 第一步：第一步：创建新图层命名为创建
32、新图层命名为“图片图片1”1”，将图形符号，将图形符号“图图1”1”拖到舞台左端，并将图形符号缩小。单击第拖到舞台左端，并将图形符号缩小。单击第1010帧按帧按F6F6插入关键插入关键帧，水平移动图形符号帧，水平移动图形符号“图图1”1”的位置至屏幕中央，并放大。的位置至屏幕中央，并放大。单击第单击第2020帧按帧按F6F6插入关键帧，选用【箭头工具】，在插入关键帧，选用【箭头工具】，在“属性属性”面板中设置面板中设置“颜色颜色”选项为选项为“Alpha”Alpha”，值为，值为“0%”0%”。鼠标右。鼠标右击第击第1 1帧至第帧至第1010帧之间，在弹出的快捷菜单中选择帧之间，在弹出的快捷菜
33、单中选择“创建补间创建补间动画动画”（或在（或在“属性属性”面板中的设置），这样就创建了一个运面板中的设置），这样就创建了一个运动补间动画，此时在第动补间动画，此时在第1 1帧至第帧至第1010帧之间将出现紫色带箭头区帧之间将出现紫色带箭头区域。采用同样的方法在第域。采用同样的方法在第1010帧至第帧至第2020帧之间也创建运动补间动帧之间也创建运动补间动画。画。二、操作步骤二、操作步骤3.4“宇宙集锦宇宙集锦”案例案例 第二步：第二步：按照以上方法，可设计按照以上方法，可设计“图片图片2”至至“图图片片6”从舞台边缘的不同位置沿着不同的角度由小变从舞台边缘的不同位置沿着不同的角度由小变大，或
34、直接或旋转地进入舞台中央，然后再慢慢淡出大，或直接或旋转地进入舞台中央，然后再慢慢淡出消失消失掉。掉。10测试影片，保存文件，并导出影片测试影片，保存文件，并导出影片 二、操作步骤二、操作步骤3.4“宇宙集锦宇宙集锦”案例案例三三 、技术要点、技术要点1.制作运动补间动画制作运动补间动画 创建运动补间动画的方法有如下三种：创建运动补间动画的方法有如下三种：（1）选择开始关键帧和结束关键帧间的任何一帧，在）选择开始关键帧和结束关键帧间的任何一帧，在“属性属性”面板中设置。面板中设置。（2）右击开始关键帧和结束关键帧间的任何一帧，在快捷菜）右击开始关键帧和结束关键帧间的任何一帧，在快捷菜单中选择单
35、中选择“创建补间动画创建补间动画”。（3）单击开始关键帧和结束关键帧间的任何一帧，选择）单击开始关键帧和结束关键帧间的任何一帧，选择【插【插入】入】【时间轴】【时间轴】【创建补间动画【创建补间动画】菜单项菜单项。3.4“宇宙集锦宇宙集锦”案例案例的 2.设置旋转的运动效果设置旋转的运动效果 旋转的运动效果是使实例在运动的同时旋转。设置方旋转的运动效果是使实例在运动的同时旋转。设置方法是在起始关键帧和结束关键帧之间已经设置好了运法是在起始关键帧和结束关键帧之间已经设置好了运动补间动画后再通过动补间动画后再通过“属性属性”面板中的面板中的“旋转旋转”项来项来设置。其中设置。其中“旋转旋转”项用于设
36、置旋转的方式，有项用于设置旋转的方式，有“无无”、“自动自动”、“顺时针顺时针”、“逆时针逆时针”四个选四个选项；后面的项；后面的“次次”项用于设置从运动补间动画开始到项用于设置从运动补间动画开始到结束元件旋转几次。结束元件旋转几次。三三 、技术要点、技术要点3.4“宇宙集锦宇宙集锦”案例案例3.设置运动的快慢效果设置运动的快慢效果 时快时慢的运动效果也是在起始关键帧和结束关键帧时快时慢的运动效果也是在起始关键帧和结束关键帧之间已经设置好了运动补间动画后再通过之间已经设置好了运动补间动画后再通过“属性属性”面面板中的来设置。其中板中的来设置。其中“缓动缓动”项用于调节对象运动过项用于调节对象运
37、动过程中的速度比例关系，正数表示先快后慢，负数表示程中的速度比例关系，正数表示先快后慢，负数表示先慢后快，零值表示动作匀速变化；后面的先慢后快，零值表示动作匀速变化；后面的“编辑编辑”按钮用于打开按钮用于打开“自定义缓入自定义缓入/缓出缓出”面板。（详细建书面板。（详细建书97页）页）4.设置物体逐步消失的效果设置物体逐步消失的效果 逐步消失的运动效果主要是通过设置运动补间动画的逐步消失的运动效果主要是通过设置运动补间动画的结束关键帧中物体的结束关键帧中物体的“Alpha”值为值为“0%”来实现的，来实现的，此设置可通过此设置可通过“属性属性”面板中的项来完成。面板中的项来完成。三三 、技术要
38、点、技术要点3.4“宇宙集锦宇宙集锦”案例案例四四 、练习、练习 (1)制作一个红色小球制作一个红色小球(如书图如书图126页页3.140所示所示)旋转旋转运动的动画。红色小球绘制效果如书图运动的动画。红色小球绘制效果如书图3.140所示所示(注注意设置小球的亮点在左上端意设置小球的亮点在左上端)。小球先从舞台的左上。小球先从舞台的左上角顺时针旋转两周到达舞台底端中央角顺时针旋转两周到达舞台底端中央(要求：旋转的要求：旋转的速度是先慢后快，形状是由小变大速度是先慢后快，形状是由小变大)，再从底端中央，再从底端中央逆时针旋转两周到达舞台右上角逆时针旋转两周到达舞台右上角(要求：旋转的速度要求：旋
39、转的速度是先快后慢，形状是由大变小直至消失是先快后慢，形状是由大变小直至消失)。(2)自行制作一个人走路的影片剪辑自行制作一个人走路的影片剪辑(依照从前言中依照从前言中所提供的网址下载的本章的所提供的网址下载的本章的“练习参考练习参考”文件夹中文件夹中的的Flash工程文件工程文件“走路参考走路参考”)，制作一个人从舞台，制作一个人从舞台左边走到舞台右边的运动动画。左边走到舞台右边的运动动画。3.4“宇宙集锦宇宙集锦”案例案例本节内容本节内容案例效果案例效果操作步骤操作步骤技术要点技术要点练习练习3.5“闪闪的红星闪闪的红星”遮罩动画案例遮罩动画案例一、案例效果一、案例效果重点与难点：重点与难
40、点：遮罩动画的制作方法和技巧。遮罩动画的制作方法和技巧。3.5“闪闪的红星闪闪的红星”遮罩动画案例遮罩动画案例1 1新建文档并命名新建文档并命名启动启动AdobeAdobeFlashFlashCS3CS3后，新建一个文档，背景颜色和舞后，新建一个文档，背景颜色和舞台大小都使用默认，保存文档，命名为台大小都使用默认，保存文档，命名为“闪闪的红星闪闪的红星”。2.绘制绘制“放射圆放射圆”元件元件 第一步：第一步：使用使用“工具箱工具箱”中的椭圆工具中的椭圆工具 和线条工具和线条工具 绘绘制制 一个粗细为一个粗细为4 4的椭圆和直线。并用变形工具把直线的中心点的椭圆和直线。并用变形工具把直线的中心点
41、调整至圆的中心点调整至圆的中心点.如下图：如下图：二、操作步骤二、操作步骤3.5“闪闪的红星闪闪的红星”遮罩动画案例遮罩动画案例第二步：第二步：打开打开“窗口窗口”菜单中的菜单中的“变形变形”面板面板.设置旋转角度设置旋转角度为为”1010度度“单击单击”应用复制应用复制”按钮按钮3535次次.选中所有线条，单击选中所有线条，单击“修改修改”“形状形状”“将线条转化为填充将线条转化为填充”，得到下面的左，得到下面的左边的放射圆边的放射圆1 1图形元件图形元件:第三步：第三步：新建一个新建一个“放射圆放射圆2”2”的图形元件。把的图形元件。把“放射圆放射圆1”1”拉拉入舞台中，并水平翻转。得到上
42、面的右图。入舞台中，并水平翻转。得到上面的右图。二、操作步骤二、操作步骤3.5“闪闪的红星闪闪的红星”遮罩动画案例遮罩动画案例3、制作、制作“光芒闪闪光芒闪闪”影片剪辑元件影片剪辑元件 第一步：第一步：新建一个新建一个“光芒闪闪光芒闪闪”的影片剪辑元件。的影片剪辑元件。把把“放射圆放射圆1”1”拉入舞台中，改变色调为拉入舞台中，改变色调为“黄色调黄色调”，并设，并设置一个置一个100100帧的动作补间动画，使它帧的动作补间动画，使它“逆时针逆时针”旋转一周。旋转一周。第二步：第二步：再新建一个图层，把再新建一个图层，把“放射圆放射圆2”2”拉入舞台中，设拉入舞台中，设置该图层为置该图层为“遮罩
43、层遮罩层”。得到效果如图：得到效果如图：二、操作步骤二、操作步骤3.5“闪闪的红星闪闪的红星”遮罩动画案例遮罩动画案例4、制作、制作“五角星五角星”图形元件图形元件 第一步：第一步：新建一个新建一个“五角星五角星”的图形元件。的图形元件。第二步：第二步：利用工具栏中的利用工具栏中的“多边形工具多边形工具”和和“线条工具线条工具”绘制一个五角星如下图：绘制一个五角星如下图：二、操作步骤二、操作步骤3.5“闪闪的红星闪闪的红星”遮罩动画案例遮罩动画案例 5、整合图形、整合图形 第一步：第一步：在场景在场景1 1里分别新建里分别新建“背景背景”、“光芒光芒”和和“五五角星角星”3 3个图层。个图层。
44、第二步：第二步：在在“背景背景”图层里绘制一个浅蓝色的矩形背景。图层里绘制一个浅蓝色的矩形背景。第三步：第三步：把做好的把做好的“光芒闪闪光芒闪闪”元件和元件和“五角星五角星”元件元件分别拉入对应的图层里。分别拉入对应的图层里。6 6、测试影片，保存文件，并导出影片。、测试影片，保存文件，并导出影片。二、操作步骤二、操作步骤3.5“闪闪的红星闪闪的红星”遮罩动画案例遮罩动画案例三三 、技术要点、技术要点 1.1.制作遮罩动画制作遮罩动画 在制作遮罩动画的时候用到两个图层：遮罩层和被遮在制作遮罩动画的时候用到两个图层：遮罩层和被遮罩层。被遮罩层上的图形通过遮罩层显示出来。罩层。被遮罩层上的图形通
45、过遮罩层显示出来。播放动画播放动画的时候，遮罩层上的内容不会被显示出来，的时候，遮罩层上的内容不会被显示出来，被遮罩层上位被遮罩层上位于遮罩层之外的内容也不被显示。于遮罩层之外的内容也不被显示。2.2.设置一个图层遮罩多个图层设置一个图层遮罩多个图层 在在FlashFlash中一个遮罩图层可以同时遮罩多个被遮罩图层。中一个遮罩图层可以同时遮罩多个被遮罩图层。当把某个图层设置为遮罩层时，它下面的图层自动被设置当把某个图层设置为遮罩层时，它下面的图层自动被设置为被遮罩层。当需要使一个图层遮罩多个图层时，可以通为被遮罩层。当需要使一个图层遮罩多个图层时，可以通过下面的两种方法实现：过下面的两种方法实
46、现：3.5“闪闪的红星闪闪的红星”遮罩动画案例遮罩动画案例（1 1）当需要被添加为被遮罩层的图层位于遮罩层的上方）当需要被添加为被遮罩层的图层位于遮罩层的上方时，选中该图层，单击并拖动它到遮罩层下方。时，选中该图层，单击并拖动它到遮罩层下方。（2 2）当需要被添加为被遮罩层的图层位于遮罩层的下方）当需要被添加为被遮罩层的图层位于遮罩层的下方时，在该图层上右击弹出快捷菜单，选择时，在该图层上右击弹出快捷菜单，选择“属性属性”，打开，打开“图形属性图形属性”对话框，选择类型。对话框，选择类型。如果需要取消遮罩与被遮罩的关系，可以在被遮罩层打如果需要取消遮罩与被遮罩的关系，可以在被遮罩层打开开“图层
47、属性图层属性”对话框，设置为类型；或者把该图层拖动对话框，设置为类型；或者把该图层拖动到遮罩层上方。到遮罩层上方。三三 、技术要点、技术要点3.5“闪闪的红星闪闪的红星”遮罩动画案例遮罩动画案例四四 、练习、练习 请制作一个请制作一个“瀑布瀑布”遮罩动画，该动画制作时截取了遮罩动画，该动画制作时截取了水流部分的图像作为被遮罩层，水流部分的图像作为被遮罩层，遮罩层是使用笔刷工具绘遮罩层是使用笔刷工具绘制的水波线条，遮罩层的波纹从上到下做运动制的水波线条，遮罩层的波纹从上到下做运动。效果如。效果如下图：下图：3.5“闪闪的红星闪闪的红星”遮罩动画案例遮罩动画案例本节内容本节内容案例效果案例效果操作
48、步骤操作步骤技术要点技术要点练习练习3.6“蝴蝶飞蝴蝶飞”引导动画案例引导动画案例一、案例效果一、案例效果重点与难点：重点与难点：引导动画的制作方法与技巧，以及应用引导路径的技巧。引导动画的制作方法与技巧，以及应用引导路径的技巧。3.6“蝴蝶飞蝴蝶飞”引导动画案例引导动画案例1 1新建文档并命名新建文档并命名启动启动AdobeAdobeFlashFlashCS3CS3后，新建一个文档，后，新建一个文档，背景颜色和舞背景颜色和舞台大小都使用默认，保存文档，命名为台大小都使用默认，保存文档，命名为“蝴蝶飞蝴蝶飞”。2导入背景图片导入背景图片 修改修改“图层图层1”的名称为的名称为“背景背景”。导入
49、导入本案例对应的素材文件本案例对应的素材文件夹中的夹中的“花丛花丛.bmp”的图片文件的图片文件，利用，利用“对齐对齐”面板缩放成面板缩放成与舞台大小一样与舞台大小一样。二、操作步骤二、操作步骤3.6“蝴蝶飞蝴蝶飞”引导动画案例引导动画案例3制作制作“蝴蝶飞蝴蝶飞1”和和“蝴蝶飞蝴蝶飞2”元件元件 第一步：第一步：新建一个命名为新建一个命名为“身体身体”的图形元件。如下左图：的图形元件。如下左图：第二步：第二步：新建一个新建一个“图形图形”元件，命名为元件，命名为“翅膀翅膀”，导入图，导入图片本案例对应的素材文件夹中的片本案例对应的素材文件夹中的“蝴蝶蝴蝶1”，并进行相应的调整。，并进行相应的
50、调整。效果如上右图。效果如上右图。二、操作步骤二、操作步骤3.6“蝴蝶飞蝴蝶飞”引导动画案例引导动画案例第三步：第三步：新建一个新建一个“影片剪辑影片剪辑”，命名为，命名为“蝴蝶飞蝴蝶飞1”。A、在、在“蝴蝶飞蝴蝶飞1”元件中建立元件中建立2个图层，并给图层分别命名为个图层，并给图层分别命名为“身体身体”和和“翅膀翅膀”。利用前面所做的。利用前面所做的“身体身体”和和“翅膀翅膀”元元件，组成一只完整的蝴蝶效果如下左图件，组成一只完整的蝴蝶效果如下左图B、在、在“翅膀翅膀”的第的第2帧插入关键帧，帧插入关键帧，然后选中【任意变形工具】，将左边然后选中【任意变形工具】，将左边“翅膀翅膀1”实例的变
