WEB动画制作与设计课件：创建补间动画（一）

创建补间动画创建补间动画创建补间动画1、掌握补间形状动画的制作原理；2、掌握补间形状动画的创建方法；3、掌握传统补间动画的制作原理；4、掌握传统补间动画的创建方法；【课堂学习目标】【案例学习目标】本案例将使用补间形状动画来制作一个文字演变过程的模拟动画。【案例知识要点】掌握补间形状动画的制作原理和创建方法。【课堂案例】—制作“汉字的演变”1、补间形状动画的制作原理

补间形状动画是指在两个或两个以上的关键帧之间对形状进行补间，从而创建出一个形状随着时间的改变而变成另一个形状的动画效果。

补间形状动画可以实现两个矢量图形之间颜色、形状、位置的变化，其原理如图所示。【理论知识】——制作补间形状动画【理论知识】——制作补间形状动画

【提示】形状补间动画只能对矢量图形进行补间，要对组、实例、文本或位图图像应用补间形状，首先必须打散这些元素。2．补间形状动画的创建方法

同一图层上，在绘制着不同矢量图形的两关键帧之间任选1帧，在该帧上单击鼠标右键，在弹出的快捷菜单中选择“创建补间形状”命令，如图所示，即可在两关键帧之间创建补间形状动画。【理论知识】——制作补间形状动画2．补间形状动画的创建方法

如果两关键帧之中的任何一个关键帧中的内容不符合创建补间形状的要求或内容为空，将使创建补间形状动画失败，如图所示。【理论知识】——制作补间形状动画2．补间形状动画的创建方法

如果两关键帧之中的任何一个关键帧中的内容不符合创建补间形状的要求或内容为空，将使创建补间形状动画失败，如图所示。【理论知识】——补间形状动画的制作原理3．认识补间形状动画的属性面板Flash的“属性”面板随选定的对象不同而发生相应的变化。当建立了一个补间形状动画后，单击时间轴，其“属性”面板如图所示。【理论知识】——补间形状动画的制作原理3．认识补间形状动画的属性面板

在“补间”选项栏中经常使用的选项如下：（1）“缓动”参数在“缓动”参数中输入相应的数值，形状补间动画则会随之发生相应的变化。

其值在-100～0之间时，动画变化的速度从慢到快。②其值在0～100之间时，动画变化的速度从快到慢。③缓动为0时，补间帧之间的变化速率是不变的。【理论知识】——补间形状动画的制作原理3．认识补间形状动画的属性面板

在“补间”选项栏中经常使用的选项如下：（2）“混合”下拉列表框在“混合”下拉列表框中包含“角形”和“分布式”两个参数。①“角形”是指创建的动画中间形状会保留有明显的角和直线，这种模式适合于具有锐化转角和直线的混合形状。②“分布式”选项是指创建的动画中间形状比较平滑和不规则。【理论知识】——补间形状动画的制作原理1．绘制太阳（1）新建一个Flash文档，设置文档尺寸“470像素×600像素”，帧频为“12”，文档其他属性使用默认参数。（2）将默认的“图层1”重命名为“背景”，然后在图层的第100帧处插入帧。（3）执行“文件>导入>导入到舞台”命令，在弹出的“导入”对话框中选择“素材>制作“汉字的演变”>卷轴.jpg”文件,将其导入到舞台中。【课堂案例】—制作“汉字的演变”1．绘制太阳（4）设置图片的宽、高分别为“468”像素和“600”像素，并相对舞台居中对齐，使其刚好覆盖整个舞台，效果如图所示。【课堂案例】—制作“汉字的演变”1．绘制太阳（5）将“背景”图层锁定，在“背景”图层上新建图层并重命名为“日”。（6）利用【椭圆】工具在“日”图层上绘制一个圆形，设置圆的宽高都为“80”像素，并设置圆的位置，如图所示。【课堂案例】—制作“汉字的演变”1．绘制太阳（7）选中绘制的“圆”，在“颜色”面板中设置“笔触颜色”为“无”，“填充颜色”为“径向渐变”，其中第l、2个色块颜色为“#FFFF00”，其Alpha值为100%。第3个色块为“#C0C0C0”,其Alpha值为0%，使圆具有一定的太阳放光效果，如图所示。【课堂案例】—制作“汉字的演变”2．制作补间形状动画（1）选中“日”图层的第25帧，按F7键插入空白关键帧，利用“文字”工具在该帧输入一个“日”字，在“属性”面板的“字符”栏中设置“颜色”为“黑色”，“大小”为“60”，“系列”为“甲骨文”（大家可以设置为自己喜欢的字体），效果如图所示。【课堂案例】—制作“汉字的演变”2．制作补间形状动画（2）选中输入的“日”字，按Ctrl+B键将其打散。（3）鼠标右键单击“日”图层的第1帧，在弹出的快捷菜单中选择“创建补间形状”命令，如图所示，从而创建补间形状动画。【课堂案例】—制作“汉字的演变”2．制作补间形状动画（4）选中“日”图层的第50帧，按F6键插入关键帧。（5）选中“日”图层的第75帧，按F7键插入空白关键帧，利用“文字”工具在该帧输入一个“日”字，在“属性”面板的“字符”栏中设置“颜色”为“黑色”，“大小”为“60”，“系列”为“华文楷体”，效果如图所示。【课堂案例】—制作“汉字的演变”2．制作补间形状动画（6）选中输入的“日”字将其打散，然后在第50帧～第75帧之间创建补间形状动画，此时图层效果如图所示。【课堂案例】—制作“汉字的演变”3．使用相同的方法，制作“月”字的演变过程。4．保存测试影片，一个文字演变过程动画制作完成。【课堂案例】—制作“汉字的演变”六、对齐对象任务:制作“Loading下载条”操作提示：使用矩形工具、任意变形工具、形状补间动画命令制作下载条的动画效果，使用文本工具添加文字效果。【

举一反三】【案例学习目标】使用不同的绘图工具绘制图形，使用添加形状提示命令添加提示，使用属性面板制作动画。【案例知识要点】使用铅笔工具和平滑工具绘制流淌的奶油图形，使用添加形状提示命令制作奶油流淌的效果。【课堂案例】—制作“流淌的奶油”【案例学习目标】使用不同的绘图工具绘制图形，使用添加形状提示命令添加提示，使用属性面板制作动画。【案例知识要点】使用铅笔工具和平滑工具绘制流淌的奶油图形，使用添加形状提示命令制作奶油流淌的效果。【课堂案例】—制作“流淌的奶油”一、导入图形1、新建一个Flash文档，将舞台窗口的“宽度”设为600像素，“高度”设为300像素。2、建立新元件，类型为“图形”，名称为“水果”，将“水果”素材文件导入到新元件的窗口中。3、同样，创建一个“蛋糕”图形元件，并将蛋糕素材导入到新元件的舞台中。【课堂案例】—制作“流淌的奶油”一、导入图形4、

新建元件，名称为“流淌的奶油”，类型中选择“影片剪辑”选项，将“库”面板中的元件“蛋糕”拖曳到舞台窗口的中间。将“图层1”重新命名为“蛋糕”。在时间轴上用鼠标单击第45帧，按F5键，在该帧上插入普通帧，如图所示。【课堂案例】—制作“流淌的奶油”二、制作流淌的奶油1、单击“时间轴”面板下方的“插入图层”按钮，创建新图层并将其命名为“奶油动”。选择“铅笔”工具，将“笔触颜色”设为黑色，模式：“平滑”选项，在蛋糕上绘制一条封闭的曲线作为奶油的轮廓，如图所示。【课堂案例】—制作“流淌的奶油”二、制作流淌的奶油2、在“奶油动”图层的第45帧，按F6键，插入一个关键帧。在第45帧对应的舞台窗口中，绘制奶油流淌下来的效果，如左图所示。并利用选择工具将多余线条删除，效果如右图所示。【课堂案例】—制作“流淌的奶油”二、制作流淌的奶油3、选择“颜料桶”工具，将“填充颜色”设为紫色（#9933FF），选中“奶油动”图层的第l帧，用鼠标在封闭的曲线中单击，为奶油填充颜色，如左图所示。选中“奶油动”图层的第45帧，在舞台窗口中为流淌的奶油填充颜色，如右图所示。【课堂案例】—制作“流淌的奶油”二、制作流淌的奶油4、选中“奶油动”图层的第1帧，在时间轴上单击右键，选择“创建补间形状”命令,在第l帧～第45帧创建变形动画。5、选中“奶油动”图层的第1帧，选择“修改>形状>添加形状提示”（其快捷键为Ctrl+Shift+H）命令，在奶油的中间出现红色的提示点“a”，将提示点移动到奶油的左上方，如左图所示。选中“奶油动”图层的第45帧，第45帧的奶油上也出现相应的提示点“a”，如图右所示。【课堂案例】—制作“流淌的奶油”二、制作流淌的奶油6、将奶油上的提示点移动到其左上方，提示点从红色变为绿色，如左图所示。选中第1帧，可以观察到刚才红色的提示点变为黄色，如右图所示，这表示在第1帧中的提示点和第45帧的提示点已经相互对应。【课堂案例】—制作“流淌的奶油”二、制作流淌的奶油7、用相同的方法在第l帧的奶油图形中再添加4个提示点，分别为“b”、“c”、“d”、“e”，并按顺时针方向将其放置在奶油图形的边线上，如左图所示。在第45帧中，将“b”、“c”、“d”、“e”提示点按顺时针的方向分别设置在奶油图形的边线上，如右图所示，完成提示点的设置。【课堂案例】—制作“流淌的奶油”二、制作流淌的奶油8、单击“时间轴”面板下方的“插入图层”按钮，创建新图层并将其命名为“水果”。将“库”面板中的图形元件“水果”拖曳到舞台窗口中，如左图所示。再重复拖曳4次图形元件“水果”，并应用“任意变形”工具毯改变水果的大小及倾斜度,如右图所示。【课堂案例】—制作“流淌的奶油”二、制作流淌的奶油9、单击“时间轴”面板下方的“插入图层”按钮，创建新图层并将其命名为“水果动”。将图形元件“水果”拖曳到舞台窗口中并将其缩小，如图所示。【课堂案例】—制作“流淌的奶油”二、制作流淌的奶油10、选中“水果动”图层的第45帧，按F6键，插入一个关键帧，将第45帧中的“水果”实例向下移动，如图所示。【课堂案例】—制作“流淌的奶油”二、制作流淌的奶油11、用鼠标右键单击“水果动”图层的第l帧，在弹出的菜单中选择“创建补间形状”动画命令，在第1帧～第45帧生成动作补间动画，如图所示。【课堂案例】—制作“流淌的奶油”二、制作流淌的奶油12、单击进入“场景l”的舞台窗口。将“背景图”导入到舞台窗口中，在组“属性”面板中将“X”、“Y”选项的数值设为0，如图所示。【课堂案例】—制作“流淌的奶油”二、制作流淌的奶油13、将“库”中的影片剪辑元件“流淌的奶油”拖曳到舞台窗口中，应用“任意变形”工具改变其大小并放置在背景图中白色矩形的中间，效果如图所示。流淌的奶油制作完成，按Ctrl+Enter组合键即可查看效果。【课堂案例】—制作“流淌的奶油”

（1）添加形状提示

单击补间形状动画的开