Ø掌握补间动画的原理和创建方法掌握补间动画的原理和创建方法 Ø掌握形状提示点的原理和使用方法掌握形状提示点的原理和使用方法 Ø掌握时间轴特效的使用方法掌握时间轴特效的使用方法 本章学习要求本章学习要求 项目五项目五 制作补间动画 u任务一 形状补间动画 u任务二 形状提示点动画u任务三 【突破提高】——制作“破土而出”u任务四 动作补间动画u任务五 时间轴特效u任务六 【突破提高】——制作“浪漫气球”本章大纲本章大纲 任务一 形状补间动画 形状补间动画是动画制作中一种常用的动画制作方法，它可以补间形状的位置、大小和颜色等，使用形状补间动画可以制作出千变万化的动画效果 （一） 【知识准备】——形状补间动画的原理1、形状补间动画的原理 形状补间动画是指在两个或两个以上的关键帧之间对形状进行补间，从而创建出一个形状随着时间的改变而变成另一个形状的动画效果 形状补间动画可以实现在两个矢量图形之间颜色、形状和位置的变化，如图5-1所示 形状补间动画只能对矢量图形进行补间，要对组、实例或位图图像应用形状形状补间动画只能对矢量图形进行补间，要对组、实例或位图图像应用形状补间，首先必须分离这些元素。
补间，首先必须分离这些元素 2、创建形状补间动画同一图层上，在绘制着不同矢量图形的两关键帧之间任选1帧，然后再在【属性】面板上的【补间】下拉列表框中选择【形状】选项，如图5-2所示，这样就可以创建一个形状补间动画 图图5-1 形状补间动画形状补间动画 图图5-2 选择形状补间选择形状补间 如果两关键帧之中的任何一个关键中的内容不符合创建形状补间的要求或内容为空，将使创建形状补间动画失败，如图5-3所示 图图5-2 形状补间动画创建失败形状补间动画创建失败 3、认识形状补间动画的【属性】面板 Flash 8的【属性】面板随选定对象的不同而发生相应的变化当建立了一个形状补间动画后，单击时间轴，其【属性】面板如图5-2所示1）【缓动】参数2）【混合】下拉列表框 （二） 【典型案例】——制作“汉字的演变” 【设计效果】 汉字是我们生活中不可或缺的一部分汉字从世间万物演变成象形文字，再演变成今天使用的文字模样，经历了很长的时间，而本案例将使用形状补间动画来制作一个文字演变过程的模拟动画，其设计思路及效果如图5-4所示 制作背景绘制太阳甲骨文体“日”字华文楷体“日”字创建形状补间动画制作“月”字的演变动画图图5-4 制作思路及效果制作思路及效果 【操作步骤】1、绘制太阳。
1）新建一个Flash文档，设置文档【尺寸】为“470px×600px”，文档的其他属性使用默认参数2）将默认图层1重命名为“背景”图层，然后按F5 键在图层的第100帧处插入帧3）选择【文件】/【导入】/【导入到舞台】命令，将教学素材中的“素材\项目五\汉字的演变\卷轴.jpg”文件导入到舞台中4）设置图片的宽、高分别为“468”px、“600”px，并相对舞台居中对齐，使其刚好覆盖整个舞台，效果如图5-5所示5）将“背景”图层锁定，在“背景”图层上新建图层并重命名为“日”图层6）利用【椭圆】工具在“日”图层上绘制一个圆形，并设置圆形的宽、高都为“80”px，如图5-6所示设置圆的位置图图5-5 导入背景图片导入背景图片 图图5-6 绘制圆绘制圆 （7）选中绘制的圆形，在【颜色】面板中设置【笔触颜色】为“无”，【填充颜色】的【类型】为“放射状”其中第1个色块和第2个色块的颜色为“#FFFF00”，第3个色块为“#C0C0C0”，使圆形具有一定的太阳放光效果，参数设置及最终效果如图5-7所示颜色颜色】】面板面板 太阳效果太阳效果 图图5-7 调整圆的颜色调整圆的颜色 2、制作形状补间动画。
1）选中在“日”图层的第25帧，按F7 键插入空白关键帧利用【文字】工具在该帧输入一个“日”字，在【属性】面板中设置【文字颜色】为“黑色”，【字体大小】为“60”，【字体】为“甲骨文”（读者可以设置为自己喜欢的字体或者自行购买外部字体库），效果如图5-8所示2）选中输入的“日”字，按Ctrl+B 组合键将其打散3）选中“日”图层的第1帧，然后在【属性】面板的【补间】下拉列表框中选择【形状】选项，【属性】面板中各参数的设置如图5-9所示 图图5-8 输入文字输入文字 图图5-9 创建形状补间动画创建形状补间动画 （4）选中在“日”图层的第50帧，按F6 键插入关键帧5）选中在“日”图层的第75帧，按F7 键插入空白关键帧，利用【文字】工具在该帧输入一个“日”字，在【属性】面板中设置【文字颜色】为“黑色”，【字体大小】为“60”，【字体】为“华文楷体”，效果如图5-10所示6）选中输入的“日”字将其打散，然后在第50帧～第75帧之间创建形状补间动画，此时的图层效果如图5-11所示 图图5-10 输入文字输入文字 图图5-11 图层信息图层信息 （7）利用相同的方法，制作“月”字的演变过程。
8）保存并测试影片，一个文字演变过程动画就制作完成 案案 例例 小小 结结 本案例通过制作一个汉字演变过程的模拟动画讲述了以下知识点 基础知识：基础知识：形状补间动画的创建方法 表现技巧表现技巧：利用形状补间动画表现事物逐渐变化的过程 任务二 形状提示点动画 当要用形状补间动画制作一些较为复杂的变形动画时，常常会使画面变得混乱，使其根本达不到用户想要的变化过程，这时就需要使用形状提示点来进行控制 （一） 【知识准备】——形状提示点原理1、添加形状提示，如图5-12、5-13所示第第1帧帧 第第10帧帧 显示为黄色显示为黄色 显示为绿色显示为绿色 图图5-12 插入提示点并未调节插入提示点并未调节 图图5-13 插入提示点并调节成功插入提示点并调节成功 2、形状提示原理 继续添加形状提示点，并调节提示点位置，此时图形变化的过程如图5-14所示 图图5-14 使用形状提示使用形状提示 如图5-15所示，为未添加形状提示点的变化过程，经过观察可以清楚地了解形状提示的功能和原理，即形状提示点用于识别起始形状和结束形状中相对应的点，并用字母a到z来表示。
图图5-15 未使用形状提示未使用形状提示 （二）【典型案例】——制作“海风中的丽影” 【设计效果】 使用形状提示点可以制作出各种复杂的形状渐变动画，本案例将利用形状提示点来制作一个站在海风中的女孩头发被海风吹动的动画，其制作思路及效果如图5-16所示 制作背景添加文字制作提示点形状补间动画图图5-16 制作思路及效果制作思路及效果 【操作步骤】1、素材准备1）新建一个Flash文档，设置【帧频】为“24 fps”，其他文档属性使用默认参数2）新建并重命名图层，图层的最终效果如图5-17所示3）选择【文件】/【导入】/【打开外部库】命令，将教学素材中的“素材\项目五\海风中的丽影\海风中的丽影.fla”文件打开，将外部库里所有的元件复制到当前【库】面板中，如图5-18所示 图图5-17 图层信息图层信息 图图5-18 【【库库】】面板面板 2、设置场景1）将【库】面板中名为“边框”的元件放置到“上下边框”图层上，并相对舞台上方居中对齐，效果如图5-19所示2）选中舞台上的“边框”元件，按住Ctrl 键拖动复制出一个图形，选择【修改】/【变形】/【垂直翻转】命令，并相对舞台下方居中对齐，效果如图5-20所示。
图图5-19 放置边框放置边框1 图图5-20 放置边框放置边框2 （3）将【库】面板中名为“整体背景”的元件拖入到“背景”图层上，并设置其位置坐标x、y分别为“－30.6”、“－183.8”，效果如图5-21所示4）选择【文本】工具，在【属性】面板中设置【字体】为“迷你霹雳体”（读者可以设置为自己喜欢的字体或者自行购买外部字体库），【字体大小】为“25”，【文字颜色】为“白色”，然后在“文字1”图层上输入“<海风中的丽影>”，并设置其位置坐标x、y分别为“0”、“14.4”，效果如图5-22所示 图图5-21 放置背景图放置背景图 图图5-22 添加文字添加文字1 （5）选择【文本】工具，在【属性】面板中设置【字体】为“微软繁粗圆” （读者可以设置为自己喜欢的字体或者自行购买外部字体库），【字体大小】为“15”，【文字颜色】为“白色”，然后在“文字2”图层上输入“蓝鹰科技 制作”，并设置其位置坐标x、y分别为“445”、“367”，添加文字后的效果如图5-23所示6）选中“文字2”图层上的文字，按住Ctrl键复制出一个图形，选择【修改】/【变形】/【垂直翻转】命令，并高置其位置坐标x、y分别为“445”、“382”，效果如图5-24所示 。
图图5-23 添加文字添加文字2 图图5-24 复制并编辑文字复制并编辑文字 （7）选择【矩形】工具，在【颜色】面板中设置【笔触颜色】为“无”，【填充颜色】为“线性”，从左至右第1个色块为“黑色”，第2个色块为“白色”且调整其【Alpha】参数为“0%”在“白布”图层上绘制一个宽、高分别为“100”px、“16”px的矩形，设置其位置坐标x、y分别为“446.7”、“383”，效果如图5-25所示 图图5-25 绘制白布绘制白布 3、制作头发飘动的效果1）将【库】面板中名为“女孩”的元件放置到“女孩”图层上，并设置其位置坐标x、y分别为“－30.6”、“－183.8”，效果如图5-26所示 图图5-26 放置女孩放置女孩 （2）双击“女孩”图层上的“女孩”元件，进入其编辑界面3）在“高光”图层的第1帧～第20帧和第21帧～第40帧之间创建形状补间动画4）在“头发”图层的第1帧～第20帧和第21帧～第40帧之间创建形状补间动画，效果如图5-27所示 图图5-27 头发的变化头发的变化 测试影片后发现，形状比较规则的高光图形的形状补间动画能达到预期的效果；而测试影片后发现，形状比较规则的高光图形的形状补间动画能达到预期的效果；而形状不规则的头发图形形状补间动画不能达到预期的效果，这就需要添加形形状不规则的头发图形形状补间动画不能达到预期的效果，这就需要添加形状提示点，让变形更加贴近预期效果。
状提示点，让变形更加贴近预期效果 （5）选择“头发”图层的第1帧，选择【修改】/【形状】/【添加形状提示点】命令（快捷键为Ctrl+Shift+H），为图形添加20个形状提示点，其分布如图5-28所示6）选择“头发”图层的第20帧，调整形状提示点的分布，如图5-29所示 （7）利用同样的方法在第21帧添加20个形状提示点，其分布同第20帧的分布一样，如图5-29所示然后调整第40帧处的形状提示点的分布，其分布同第1帧处的分布一样，如图5-28所示 图图5-28 第第1帧处形状提示点的分布帧处形状提示点的分布 图图5-29 第第20帧处形状提示点的分布帧处形状提示点的分布 在添加形状提示点的过程中应该注意以下几点1）增加控制点只能在补间动画的开始帧进行2）控制点用字母表示，最多只有26个3）控制点最好从矢量图形的左上角开始，按逆时针顺序放置4）控制点的顺序要符合逻辑例如，在开始帧的一条直线上按a、b、c顺序放置3个控制点，在结束帧的相应帧的直线就不能按a、c、b顺序放置5）控制点并非设置得越多越好，应该根据实际情况来设置 （8）保存并测试影片，一个海风中的女孩效果制作完成 案案 例例 小小 结结 本案例通过制作一个女孩站在海风中，头发被吹动的效果讲述了以下知识点。
基础知识：基础知识：形状提示点的使用方法 表现技巧：表现技巧：使用形状提示点制作细致形状变化的方法 任务三 【突破提高】——制作“破土而出” 【设计效果】 春天是万物复苏的时节，经过漫长冬季的等待，植物都渴望能爆发式地生长本案例将使用形状补间动画来制作一颗小树“破土而出”的动画，该动画对读者的耐心是一个很好的考验，其设计思路及效果如图5-30所示 制作背景制作主干生长动画制作第1级树枝生长动画制作第2级树枝生长动画制作树叶生长动画图图5-30 制作思路及效果制作思路及效果 【操作步骤】1、绘制场景1）新建一个Flash文档，设置文档【帧频】为“24 fps”，文档其他属性使用默认参数2）将默认图层1重命名为“蓝天”图层，利用【矩形】工具绘制一个矩形，并设置矩形的宽、高分别为“550”px、“400”px，在【颜色】面板中设置【填充颜色】的【类型】为“线性”，从左至右第1个色块的颜色为“白色”，第2个色块的颜色为“#00CCFF”，并相对舞台居中对齐，效果如图5-31所示 【【颜色颜色】】面板面板 渐变调节渐变调节 图图5-31 绘制蓝天绘制蓝天 （3）在“蓝天”图层上新建图层，并重命名为“大地”图层，在“大地”图层上绘制如图5-32所示的效果。
006600#003300#003300#CC9900图图5-32 绘制大地绘制大地 （4）在“大地”图层上新建一个图层并重命名为“泥土”图层，然后选择【刷子】工具，并在【属性】面板中设置【填充颜色】为“#875F01”，在“泥土”图层上绘制如图5-33所示的效果在“泥土”图层上新建图层并重命名为“云朵”图层，将【填充颜色】设置为“白色”，利用【刷子】工具，在“云朵”图层上绘制如图5-34所示的云朵形状 （6）选中绘制的“云朵”形状，然后按F8 键，将其转化为【影片剪辑】元件，并命名为“云朵”7）返回主场景选中“云朵”元件，在【滤镜】面板中为其添加“模糊”滤镜，并设置其参数，如图5-35所示 图图5-33 绘制泥土绘制泥土 图图5-34 绘制白云形状绘制白云形状 泥土添加模糊滤镜添加模糊滤镜 模糊效果模糊效果 图图5-35 制作模糊云朵效果制作模糊云朵效果 （8）按住Ctrl 键，利用【选择】工具，拖动复制出一个“云朵”，此时的舞台效果如图5-36所示 图图5-36 制作云朵效果制作云朵效果 2、制作主干生长效果1）在“云朵”图层上新建一个图层并重命名为“主干”图层，在所有图层的第200帧处插入帧，然后将除主干以外的全部图层锁定，如图5-37所示。
图图5-37 图层信息图层信息 （2）利用【椭圆】工具绘制一个圆形，并在【属性】面板中设置其宽、高分别为“8”px、“3”px，【笔触颜色】为“无”，【填充颜色】为“#000033”，位置如图5-38所示3）按F6 键，在“主干”图层的第20帧处插入关键帧，利用【选择】工具调整第20帧处圆形的形状，如图5-38所示 图图5-38 第第1帧主干形状帧主干形状 图图5-39 第第20帧主干的形状帧主干的形状 （4）按F6 键，在“主干”图层的第55帧处插入关键帧，然后调整该帧处主干的形状，如图5-40所示5）在第1帧～第20帧之间和第20帧～第55帧之间创建形状补间动画，这样主干的生长过程就制作完成了 3、制作树枝生长效果1）在“主干”图层上新建一个图层并重命名为“第1级树枝1”，然后在该图层的第55帧处插入关键帧2）利用【椭圆】工具绘制一个圆形，在【属性】面板中设置其【填充颜色】和主干颜色相同，【笔触颜色】为“无”，宽、高都为“12”px，位置如图5-41所示 圆形图图5-40 第第55帧处主干的形状帧处主干的形状 图图5-41 绘制圆绘制圆 （3）在该图层的第75帧处插入关键帧，并调整该帧圆形的形状，如图5-42所示。
4）在该图层的第55帧～第75帧之间创建形状补间动画，“第1级树枝1”的生长动画就制作完成了5）利用同样的方法制作其他第1级树枝的生长动画效果，第1级树枝的效果如图5-43所示6）利用和第1级树枝生长动画制作相同的方法制作第2级树枝生长的效果，第2级树枝的效果如图5-44所示图图5-42 第第75帧处第帧处第1级树枝级树枝1的形状的形状 图图5-43 第第1级树枝效果级树枝效果 图图5-44 第第2级树枝效果级树枝效果 （7）所有树枝的生长动画全部控制在第100帧处结束，此时的图层效果如图5-45所示 图图5-45 图层信息图层信息 在制作树枝生长动画效果的时候，注意调整树枝生长的先后顺序，尽量使树在制作树枝生长动画效果的时候，注意调整树枝生长的先后顺序，尽量使树枝生长看起来贴近自然第枝生长看起来贴近自然第2级树枝的生长控制在第级树枝的生长控制在第1级树枝生长完成之后级树枝生长完成之后 4、制作树叶生长效果1）在所有图层之上新建一个图层并重命名为“树叶”图层，在该图层的第101帧处插入关键帧 （2）在该帧处利用【椭圆】工具绘制一个圆形，在【属性】面板中设置其【笔触颜色】为“无”，【填充颜色】为“#00FF00”，将其设置到任意一个树枝上，如图5-46所示。
3）在该图层的第115帧插入关键帧，调整形状使其像一片树叶，效果如图5-47所示 图图5-46 绘制圆绘制圆 图图5-47 调整性状调整性状 （4）利用相同的方法制作其他的树叶效果，并将所有的树叶生长动画控制在第125帧处结束，此时的效果如图5-48所示 图图5-48 树叶生长效果树叶生长效果 （5）保存并测试影片，一个植物破土而出的动画效果制作完成 案 例 小 结 本案例通过制作一个植物生长过程的模拟动画讲述了以下知识点 基础知识：基础知识：温习使用Flash绘图工具绘制简单场景的方法 表现技巧：表现技巧：使用形状补间动画制作较复杂的事物变化效果 能力培养：能力培养：本案例很好地锻炼了读者制作动画的耐性和细心 任务四 动作补间动画（一） 【知识准备】——动作补间动画的原理1、动作补间动画的原理 动作补间动画是指在两个或两个以上的关键帧之间对元件进行补间的动画，使一个元件随着时间的改变而变其颜色、位置和进行旋转，如图5-49所示 动作补间动画只能对元件进行补间，如果对非元件的对象进行动作补间动画时，动作补间动画只能对元件进行补间，如果对非元件的对象进行动作补间动画时，软件将自动将其转化为元件软件将自动将其转化为元件 。
红色花朵蓝色花朵舞台左边舞台右边0°15°颜色补间位置补间旋转补间图图5-49 动作补间动画的原理动作补间动画的原理 2、创建动作补间动画 在包含着同一元件两种不同属性的两关键帧之间任选1帧，然后再在【属性】面板上【补间】下拉列表框中选择【动作】选项，或直接在该帧上单击鼠标右键，在弹出的快捷菜单中选择【创建补间动画】命令，如图5-50所示就可创建动作补间动画 如果两关键帧之中的任何一个关键帧的内容为空，创建动作补间动画将失败，如图5-51所示 图图5-50 右键快捷菜单右键快捷菜单 图图5-51 创建失败创建失败 3、认识形状补间动画的【属性】面板 当选中动作补间动画的任一帧时，其【属性】面板的状态如图5-52所示 图图5-52 形状补间动画的形状补间动画的【【属性属性】】面板面板 其中常用的选项为【旋转】选项通过在【旋转】选项中选择不同的方式，可以使元件按不同的方式旋转1）“顺时针”是指元件播放时以顺时针方向进行旋转，并可在【次】选项中设置旋转次数2）“逆时针”是指元件播放时以逆时针方向进行旋转，并可在【次】选项中设置旋转次数。
3）“自动”是指元件的旋转由用户自己进行设置4）“无”是指元件不产生旋转 （二） 【典型案例】——制作“跳动的小球”【设计效果】 本案例将利用动作补间动画来制作一个文字小球跳动的效果，其设计思路及效果如图5-53所示 制作文字动画制作小球跳动动画制作小球移动动画制作背景制作小球阴影动画最终效果图图5-53 制作思路及效果制作思路及效果 【操作步骤】1、素材准备1）新建一个Flash文档，所有属性使用默认参数2）新建并重命名图层，设置后的图层效果如图5-54所示3）选择【文件】/【导入】/【导入到舞台】命令，将教学素材中的“素材\项目五\跳动的小球\背景.png”文件导入到“背景”图层上，并使其刚好覆盖整个舞台，如图5-55所示图图5-54 图层信息图层信息 图图5-55 导入背景导入背景 2、制作文字进入特效10选择【文本】工具，设置【字体】为“汉仪太极体简” （读者可以设置为自己喜欢的字体或者自行购买外部字体库），【字体大小】为“200”，【文字颜色】为“黑色”，然后在“文字进入”图层上输入一个“武”字，并将其相对舞台居中对齐，添加文字后的效果如图5-56所示2）选中“武”字，按Ctrl+B 组合键将文字打散。
3）将文字右上角的点选中，按F8 键将其转化为图形元件，并命名为“小球”然后，将其剪切到“小球跳动”图层上 分分离离文文字字上上的的点点的的方方法法为为，，先先选选择择【【线线条条】】工工具具，，将将【【笔笔触触颜颜色色】】和和文文字字的的颜颜色色设设置置为为不不一一样样然然后后在在点点的的下下方方绘绘制制一一条条直直线线，，这这样样就就实实现现了了分离转化成元件后将线段删除分离转化成元件后将线段删除 图图5-56 添加文字添加文字 （4）选择“文字”图层的第1帧，按F8 键将剩下的文字部分转化为影片剪辑元件，并命名为“文字”，效果如图5-57所示 转化为“小球”元件转化为“文字”元件图图5-57 分离文字分离文字 （5）在所有图层的第110帧处插入帧，然后在“文字”图层的第15帧处插入关键帧，选中“小球跳动”图层的第1帧，按住鼠标左键不放将该帧移动到第20帧处，效果如图5-58所示 图图5-58 移动帧移动帧 （6）选中“文字”图层上第1帧的图形，并设置其位置坐标x为“346.4”，坐标y不变打开【滤镜】面板，如图5-59所示设置其参数，舞台上的效果如图5-60所示 。
添加发光效果添加发光效果 图图5-59 【【滤镜滤镜】】面板面板 图图5-60 添加滤镜后的效果添加滤镜后的效果 灵活地利用灵活地利用【【滤镜滤镜】】中的中的【【模糊模糊】】效果可以很好地帮助我们进行动画创作，如增大效果可以很好地帮助我们进行动画创作，如增大【【模糊模糊X】】参数值可以模拟水平方向上的快速运动，利用参数值可以模拟水平方向上的快速运动，利用【【模糊模糊Y】】参数即可表现竖直方参数即可表现竖直方向上的快速运动效果向上的快速运动效果 （7）在“文字”图层的第1帧～第15帧之间创建动作补间动画，并设置【缓动】参数值为“100”，如图5-61所示 图图5-61 设置缓动效果设置缓动效果3、制作小球跳动的动画1）选中“小球跳动”图层的第20帧，单击鼠标右键，在弹出的快捷菜单中选择【复制帧】命令然后选中“小球移动”图层的第65帧，单击鼠标右键，在弹出的菜单中选择【粘贴帧】命令然后在“小球移动”图层的第80帧处插入关键帧 （2）选择“小球移动”图层的第65帧上的图形，并设置其位置坐标x为“350”然后在第65帧～第80帧之间创建动作补间动画，并设置其旋转值，如图5-62所示 。
图图5-62 设置旋转值设置旋转值 （3）隐藏“小球移动”图层，然后选中“小球跳动”图层第20帧上的图形，按F8 键将其转化为影片剪辑元件，并命名为“小球跳动”在第65帧处插入关键帧，并设置其坐标位置x为“350”然后在第66帧处插入空白关键帧4）选中“小球跳动”图层第20帧上的图形，设置其位置坐标x为“480”然后在第20帧和第65帧之间创建动作补间动画，取消隐藏“小球移动”图层至此，第20帧、第65帧和第80帧处的小球位置如图5-63所示 （5）双击“小球跳动”图层上第20帧处的“小球跳动”元件，进入其编辑界面然后在第8帧和第15帧处插入关键帧然后在第1帧～第8帧和第8帧～第15帧之间创建动作补间动画，并分别选中第1帧和第8帧，设置其缓动值和旋转值，如图5-64所示 第第20帧处小球的位置帧处小球的位置 第第65帧处小球的位置帧处小球的位置 第第80帧处小球的位置帧处小球的位置 图图5-63 各帧处小球的位置各帧处小球的位置 第第1帧处的参数设置帧处的参数设置第第8帧处的参数设置帧处的参数设置 图图5-64 【【属性属性】】面板面板 （6）选中第8帧处的图形，将其垂直移动到如图5-65所示的位置 。
参考线参考线图图5-65 第第8帧处小球的位置帧处小球的位置 图图5-66 打开标尺打开标尺 如图如图5-65所示中的两条直线为参考线，是为了确定小球的位置它们的创建方法所示中的两条直线为参考线，是为了确定小球的位置它们的创建方法为：用鼠标右键单击舞台空白处，在弹出的快捷菜单中选择为：用鼠标右键单击舞台空白处，在弹出的快捷菜单中选择【【标尺标尺】】命令，如图命令，如图5-66所示，然后从舞台的左方和上方即可拖出参考线所示，然后从舞台的左方和上方即可拖出参考线 （7）复制第8帧，将其粘贴到第7帧和第9帧处，然后调整第8帧处元件的形状，如图5-67所示8）新建一个图层并重命名为“音效”图层，在“音效”图层的第4帧处插入关键帧9）将教学素材中的“素材\项目5\跳动的小球\sound01.mp3、sound02.mp3、sound03.mp3”文件导入到【库】面板中，选中“音效”图层的第4帧，在【属性】面板中添加声音，如图5-68所示，此时“小球跳动”元件的时间轴效果如图5-69所示图图5-67 第第8帧处小球的形状帧处小球的形状 图图5-68 添加声音添加声音 图图5-69 “小球跳动小球跳动”元件的时间轴元件的时间轴 4、制作小球阴影移动的动画。
1）选择【文件】/【导入】/【打开外部库】命令，将教学素材中的“素材\项目五\跳动的小球.fla”文件打开，将“阴影动画”元件直接拖入到【库】面板中2）返回到主场景中，在“阴影”图层上的第20帧处插入关键帧，将【库】面板中的“阴影动画”元件拖入舞台，并设置其位置坐标x、y分别为“454”、“274”，效果如图5-70所示3）在“阴影”图层上的第65帧处插入关键帧，选中当前帧的元件，并设置其位置坐标x为“325”，效果如图5-71所示，然后在第20帧～第65帧之间创建动作补间动画 图图5-70 第第20帧处的阴影帧处的阴影 图图5-71 第第65帧处的阴影帧处的阴影 （4）在“阴影”图层上的第66帧处插入空白关键帧，然后复制“阴影”图层的第65帧，然后将其粘贴到“阴影消失”图层上5）选中“阴影消失”图层上的第65帧处的元件，在【属性】面板中设置其参数，如图5-72所示 图图5-72 【【属性属性】】面板面板（6）在“阴影消失”图层上的第70帧处插入关键帧，并在【属性】面板中设置其参数，如图5-73所示然后在第65帧～第70帧之间创建动作补间动画 图图5-73 【【属性属性】】面板面板 （7）在“音效”图层的第20帧、第70帧和第105帧处插入关键帧，然后在第20帧处添加声音“sound01.mp3”, 在第70帧处添加声音“sound03.mp3”，此时，主时间轴状态如图5-74所示。
图图5-74 主时间轴状态主时间轴状态（8）保存并测试影片，一个生动有趣的小球跳动效果制作完成 案 例 小 结 本案例通过制作一个小球跳动的效果讲述了以下知识点 基础知识：基础知识：动作补间动画的创建方法及其参数设置表现技巧：l利用【模糊】滤镜表现物体快速运动的技巧l使用声音来生动表现动作的方法 任务五 时间轴特效 时间轴特效功能经常用于以模板的形式制作一些复杂而重复的动画，如模糊和位移等，恰当合理地运用Flash的时间轴特效功能，可以为Flash动画添加一些动感 一） 【知识准备】——时间轴特效简介1、添加时间轴特效 新建图层的名称与特效的名称相同，并加一个编号，表示特效应用的顺序，如图5-75所示 添加时间轴特效时，在库中会添加一个以特效名命名的文件夹，内含创建该特效所用的元素，如图5-76所示 图图5-75 添加时间轴特效添加时间轴特效 图图5-76 【库】面板 2、时间轴特效设置 （二） 【典型案例】——制作“音乐影集” 【设计效果】 本例将使用时间轴特效制作一个动感而又漂亮的音乐影集，其设计思路及效果如图5-77所示 。
制作图片1的入场特效图片1展示制作图片1的出场特效制作背景制作图片2的入场特效制作图片2的出场特效图图5-77 制作思路及效果制作思路及效果 【操作步骤】1、素材准备1）新建一个Flash文档2）新建并重命名图层，设置后的图层效果如图5-78所示图图5-78 图层信息图层信息（3）选择【文件】/【导入】/【打开外部库】命令，效果如图5-79所示4）将【库-音乐影集.fia】面板中的“菊花”元件直接拖入到“菊花”图层上，效果如图5-80所示 图图5-79 放置放置“相框相框”元件元件 图图5-80 放置放置“菊花菊花”元件元件 （5）选择【文件】/【导入】/【导入到库】命令，将教学素材中的“素材\项目五\音乐影集”文件中的全部文件导入到【库】面板中然后整理【库】面板中的元件，效果如图5-81所示2、设置场景1）在所有图层的第300帧处插入帧，效果如图5-82所示 图图5-81 【【库库】】面板面板 图图5-82 图层信息图层信息 （2）为了操作方便，将“菊花”和“相框”图层锁定，将【库】面板中名为“1.jpg”的图片放置到“图1”图层上，设置图片宽、高分别为“400”px、“300”px，并相对舞台居中对齐，如图5-83所示。
3）在“图1”图层上的第41帧处插入关键帧，然后在第70帧处插入空白关键帧然后在“图1消失”图层上的第70帧处插入关键帧，在第100帧处插入空白关键帧4）选中“图1”图层上的图片，按Ctrl+C 组合键复制，然后按Ctrl+Shift+V 组合键将其粘贴到“图1消失”图层上的第70帧处，效果如图5-84所示 图图5-83 图片显示图片显示 图图5-84 【【时间轴时间轴】】面板状态面板状态 第第1帧～第帧～第40帧为图片进入的时间，第帧为图片进入的时间，第41帧～第帧～第69帧为图片展览的时间，第帧为图片展览的时间，第70帧到第帧到第99帧为图片消失的时间帧为图片消失的时间 （5）利用【选择】工具将“图1”图层上第1帧处的图片选中，单击鼠标右键，在弹出的快捷菜单中选择【时间轴特效】/【变形/转换】/【转换】命令，弹出【变形】对话框，效果如图5-85所示 动画在时间轴中持续的长度单击 按钮，即可在此处进行预览当数值为负时表示移动先慢后快，当为正时，表示先快后慢设置转换方式，包括【入/出】的方向和效果图图5-85 【【变形变形】】对话框对话框有时，载入时间轴特效会产生载入失败的现象，这是程序出错的原因。
解决有时，载入时间轴特效会产生载入失败的现象，这是程序出错的原因解决办法为，关闭办法为，关闭Flash程序，重新启动软件即可解决这一问题程序，重新启动软件即可解决这一问题 （6）按照如图5-85所示设置完成后，单击 按钮，回到场景中然后拖动时间轴，在舞台上可以观看制作的动画效果，如图5-86所示7）此时观察【时间轴】面板和【库】面板中的变化，效果如图5-87所示 图图5-86 动画效果动画效果 【【时间轴时间轴】】面板面板 【【库库】】面板面板 图图5-87 【【时间轴时间轴】】和和【【库库】】的变化的变化 在为图片添加了时间轴特效后，原来被命名的图层会被自动重命名，在在为图片添加了时间轴特效后，原来被命名的图层会被自动重命名，在【【库库】】中也会自动生成特效所需要的元件和文件夹，这就是添加时间轴特效后的中也会自动生成特效所需要的元件和文件夹，这就是添加时间轴特效后的变化变化 （8）制作图片消失特效设置效果如图5-88所示 图图5-88 【【变形变形】】对话框对话框 （9）设置完成后单击 按钮，回到主场景中拖动时间轴查看效果，如图5-89所示。
10）在“图2”图层上的第100帧处插入关键帧，然后将【库】面板中名为“2.jpg”的图片放置到“图2”图层上的第100帧，设置图片宽、高分别为“200”px、“150”px，并相对舞台居中对齐，效果如图5-90所示 图图5-89 消失效果消失效果 图图5-90 添加第添加第2张图片后的舞台效果张图片后的舞台效果 （11）在“图2”图层上的第130帧处插入关键帧，并设置图片宽、高分别为“400”px、“300”px，并与舞台居中对齐，然后在第160帧处插入空白关键帧12）在“图2消失”图层上的第160处帧插入关键帧，在第175帧处插入空白关键帧，并将“图2”图层上第130帧处的图形复制粘贴到“图2消失”图层上的第160帧处13）选中“图2”图层上的第100帧处的图形，单击鼠标右键，在弹出的快捷菜单中选择【时间轴特效】/【变形/转换】/【变形】命令，弹出【变形】对话框，设置效果，如图5-91所示 图图5-91 【【变形变形】】对话框对话框 （14）单击 按钮完成图片进入效果的设置，选中“图2消失”图层上的第160帧处的图形，单击鼠标右键，在弹出的快捷菜单中选择【时间轴特效】/【效果】/【模糊】命令，弹出【模糊】对话框，设置的效果如图5-92所示。
图图5-92 【【模糊模糊】】对话框对话框 （15）利用同样的方法创建图片3的效果，“图3”图层的第175帧～第214帧为图片进入时间，第215帧～第265帧为图片展览时间图3消失”图层的第265帧～第300帧为图片消失时间16）选中“图3”图层上的第175帧处的图形，单击鼠标右键，在弹出菜单中选择【时间轴特效】/【变形/转换】/【转换】命令，弹出【变形】对话框，设置的效果如图5-93所示 图图5-93 【【变形变形】】对话框对话框 （17）选中“图3消失”图层上的第265帧处的图形，单击鼠标右键，在弹出的快捷菜单中选择【时间轴特效】/【效果】/【分离】命令，弹出【分离】对话框，设置的效果如图5-94所示 图图5-94 【【分离分离】】对话框对话框 （18）选中“声音”图层的第1帧，在【属性】面板中添加声音，效果如图5-95所示 图图5-95 【【属性属性】】面板面板（19）保存并测试影片，一个动感的音乐影集效果制作完成 案 例 小 结 本例通过制作一个动感音乐影集动画讲述了以下知识点 基础知识：基础知识：使用时间轴特效制作动画的方法。
应用技巧：应用技巧：掌握使用时间轴特效制作类似音乐影集、幻灯片等动画效果的方法 任务六 【突破提高】——制作“浪漫气球” 【设计效果】 本案例将使用动作补间动画制作一个较为复杂的浪漫气球的动画，其设计思路及效果如图5-96所示 图图5-96 制作思路及效果制作思路及效果 【操作步骤】1、素材准备1）新建一个Flash文档，设置文档【颜色】为“黑色”，【帧频】为“24fps”，其他文档属性使用默认参数2）新建并重命名图层，设置后的图层效果如图5-97所示3）选择【文件】/【导入】/【打开外部库】命令，将教学素材中的“素材\项目五\浪漫气球\浪漫气球.fla”文件打开，将外部库里所有的文件复制到当前【库】面板中，如图5-98所示图图5-97 图层信息图层信息 图图5-98 【【库库】】面板信息面板信息 （4）双击【库】面板中的“红色气球”元件，进入其元件编辑界面，可以看到第1帧的效果，如图5-99所示 由于本案例的学习重点为补间动画，所以直接给出气球素材但对于绘图能力还由于本案例的学习重点为补间动画，所以直接给出气球素材但对于绘图能力还有待提高的读者可以自己模仿绘制气球，从而锻炼绘图能力有待提高的读者可以自己模仿绘制气球，从而锻炼绘图能力 。
2、处理背景图片1）将【库】面板中名为“背景.png”的图片放置到“背景”图层上，并相对舞台居中对齐，效果如图5-100所示图图5-99 “红色气球红色气球”元件元件 图图5-100 将“背景.png”放置到舞台中 （2）选择【钢笔】工具，在其【属性】面板中设置【笔触颜色】为“蓝色”，【笔触样式】为“极细”，在“背景”图层上绘制人物的轮廓，如图5-101所示 在调整人物的轮廓时，一方面要保证男孩和女孩身上的线条各是一条连续的线条，在调整人物的轮廓时，一方面要保证男孩和女孩身上的线条各是一条连续的线条，另一方面，线条的端点要超出背景的下边缘，这样可以方便后面分离图片的另一方面，线条的端点要超出背景的下边缘，这样可以方便后面分离图片的操作 （3）选中“背景”图层上图片，按Ctrl+B 组合键将图形打散，选中分离的人物，将其剪切到“恋人”图层上，然后删除多余的线条，效果如图5-102所示 图5-101 绘制人物的轮廓 图图5-102 隐藏隐藏“背景背景”图层的效果图层的效果 （4）选中“恋人”图层上的图形，按F8键将其转化为图形元件，并命名为“恋人”5）返回主场景，锁定“背景”和“恋人”图层。
3、制作星星闪动效果1）新建一个图形元件，并命名为“闪动效果1”，如图5-103、5-104所示图图5-103 【【变形变形】】面板面板 图图5-104 星星旋转后的效果星星旋转后的效果 （2）在【属性】面板中将“星星”元件的【颜色】设置为“高级”，单击 按钮，在弹出的对话框中设置颜色的参数，如图5-105所示3）在图层1的第13帧、第25帧、第38帧、第50帧和第55帧处插入关键帧，并在【变形】面板中设置各帧处的图形大小，如图5-106所示图图5-105 颜色设置颜色设置 52.4%157.1%52.4%157.1%122.2%图图5-106 各帧处图形的大小各帧处图形的大小 （4）然后分别在每两个帧之间创建动作补间动画5）利用同样的方法创建“闪动效果2”和“闪动效果3”元件，只改变星星的大小使其发生改变，其他的参数不变，如图5-107和图5-108所示 122．2%52.4%157.1%52.4%157.1%87.3%图图5-107 “闪动效果闪动效果2”元件的时间轴元件的时间轴 51.4%22%66.1%22%66.1%36.7%图图5-108 “闪动效果闪动效果3”元件的时间轴元件的时间轴这里星星的大小可以根据读者自己的创意进行调整。
这里星星的大小可以根据读者自己的创意进行调整 （6）新建一个影片剪辑元件并命名为“星星闪动”，单击 按钮进入元件编辑界面新建3个图层并分别重命名为“闪动效果1”图层、“闪动效果2”图层和“闪动效果3”图层，然后在所有图层的第55帧处插入帧，【时间轴】面板如图5-109所示 图图5-109 【【时间轴时间轴】】面板面板（7）将刚刚创建的星星闪动效果元件分别放置到对应的图层中，并复制适当的数目，最后调整它们的位置，效果如图5-110所示 中心点图图5-110 布置星星布置星星 （8）回到主场景中，将【库】面板中名为“星星闪动”的元件放置到“星星”图层上，并设置其大小和位置，参数设置如图5-111所示9）选中舞台上的“星星闪动”元件，按住Ctrl 键复制出一个图形，然后选择【修改】/【变形】/【水平翻转】命令，最后设置它的位置，参数设置如图5-112所示 图图5-111 设置大小和位置设置大小和位置 图图5-112 设置位置参数设置位置参数 4、制作气球摆动效果1）新建一个图形元件并命名为“红色摆动”2）在“图层1”图层的第20帧和第40帧处插入关键帧，然后选中第20帧处的图形元件，在【变形】面板中设置相应的参数，效果如图5-113所示。
3）在第1帧～第20帧和第20帧～第40帧之间创建动作补间动画，然后在第39帧处插入关键帧，将第40帧删除时间轴】面板如图5-114所示这里将第这里将第40帧删除的目的是为了在循环播放时使动画效果更加流畅帧删除的目的是为了在循环播放时使动画效果更加流畅 图图5-113 设置旋转角度设置旋转角度 图图5-114 创建动作补间动画创建动作补间动画 （4）利用同样的方法，创建“粉红色摆动”、“蓝色摆动”和“黄色摆动”元件至此，气球的摆动效果制作完成5、制作气球飞翔效果1）回到主场景中，在所有图层的第455帧处插入帧2）将【库】面板中名为“红色摆动”的元件放置到“红色气球”图层上，选中舞台上的“气球”元件，在【属性】面板上设置元件的参数，如图5-115所示 图图5-115 设置大小和位置设置大小和位置 （3）在“红色气球”图层的第220帧处插入关键帧，选中舞台上的“气球”元件，并在【属性】面板上设置元件的参数，如图5-116所示，舞台上的效果如图5-117所示 图图5-116 第第220帧处的帧处的“气球气球”元件的参数设置元件的参数设置 气球位置气球位置图图5-117 气球在舞台上的效果气球在舞台上的效果 （4）在“红色气球”图层的第395帧处插入关键帧，选中舞台上的“气球”元件，并在【属性】面板上设置元件的参数，如图5-118所示。
图图5-118 第第395帧处的红色气球的参数设置帧处的红色气球的参数设置 （5）在第1帧～第220帧和第220帧～395帧之间创建动作补间动画 从以上操作可知，气球的飞翔是由远渐近，再从近渐到远的过程，颜色是从无到从以上操作可知，气球的飞翔是由远渐近，再从近渐到远的过程，颜色是从无到有，然后再从有到无的过程其中气球从远到近飞翔的时间为有，然后再从有到无的过程其中气球从远到近飞翔的时间为220帧，从近帧，从近到远飞翔的时间为到远飞翔的时间为175帧帧 （6）使用同样的方法，从“粉红色气球”图层的第20帧处、“黄色气球1”图层的第40帧处、“蓝色气球”图层的第60帧处和“黄色气球2”图层的第80帧处开始制作气球飞翔的动画，气球从远到近飞翔的时间为220帧，从近到远飞翔的时间为175帧7）在“音效”图层的第20帧处插入关键帧，选中第20帧，在【属性】面板中为场景添加“背景音乐”，其参数设置如图5-119所示 图图5-119 添加音乐添加音乐（8）保存并测试影片，一个浪漫而生动的气球场景效果制作完成 案 例 小 结 本案例通过制作一个浪漫的气球动画讲述了以下知识点。
表现技巧：表现技巧：l使用动作补间动画制作较复杂动画的方法l使用图形层次关系表现动画远近效果的方法 思考与练习1、能够进行形状补间的属性包括哪些元素？2、在一个形状补间动画中最多可以使用____________个形状提示，分别用字母______到______表示3、在第1个关键帧中是用Flash文本工具输入的字母，在第2关键帧中修改了该字母的大小现在在两关键帧之间能否成功创建动作补间动画？该动作补间动画是否正确？又该如何修改?4、时间轴特效有几种类型？它们可以应用于哪些对象上？5、重做本章的所有案例。