案例8：经典咏流传——传统补间动画（课件）-《Animate CC动画制作案例教程》（电子工业出版社第2版）同步精品课堂

经典咏流传——传统补间动画 -案例8- Animate CC动画制作案例教程 电工版第二版 案例描述 制作传统补间动画，实现图片的透明度、大小、位置及形状的变化如图所示。 案例分析 制作传统补间动画实现图片的透明度及形状的变化。 01 在传统补间动画“属性面板”中设置Alpha值的变化效果。 02 操作流程演示 第一部分 操作流程演示 1.启动animate，打开素材文件“经典咏流传.fla”。 操作流程演示 2.单击“新建图层”按钮回，新建“图层1”并重命名为“苔”。在第1帧处，打开库面板，将“苔.jpg”拖至舞台，打开对齐面板，选中“与舞台对齐”复选框，设置“对齐”为“水平中齐”，“分布”为“垂直居中分布”，“匹配大小”为“匹配宽和高”。 操作流程演示 3.选择“苔.jpg”，按F8键，将舞台上的文件转换为图形元件，打开“转换为元件”对话框，设置“名称”为“苔”，“类型”为“图形”。 操作流程演示 3.在第1帧处，选中图形，打开属性面板，设置“色彩效果”的样式为“Alpha”，并设置其值为“0%”。在第10帧处按F6键插入关键帧，调整其“Alpha”值为“100%”。选中第1~10帧之间的任意一帧，单击鼠标右键，在弹出的快捷菜单中选择“创建传统补间”命令。 操作流程演示 4.在第20帧处插入关键帧，让图片持续显示，然后在第30帧处插入关键帧，调整其“Alpha”值为“0%”，在第20~30帧中的任意一帧处单击鼠标右键，在弹出的快捷菜单中选择“创建传统补间”命令。 操作流程演示 5.单击“新建图层”按钮，新建“图层2”并重命名为“明日歌”。选中第30帧，插入关键帧，将库面板中的“明日歌.jpg”拖至舞台，按F8键将舞台上的文件转换为图形元件。打开“转换为元件”对话框，设置“名称”为“明日歌”，“类型”为“图形”。 操作流程演示 5.同步骤3，4，在第30帧调整其“Alpha”值为“0%”，第40帧调整其“Alpha”值为“100%”，创建传统补间动画。在第50帧和第60帧处分别插入关键帧，并分别调整其“Alpha”值为“100%”和“0%”，并创建传统补间动画，实现图片的淡入淡出效果。图层1和图层2的时间轴如图所示。 操作流程演示 6.单击“新建图层”按钮，新建“图层3”并重命名为“送元二”。选中第50帧，插入关键帧，将库面板中“送元二.jpg”拖至舞台，按F8键将舞台上的文件转换为图形元件。打开“转换为元件”对话框，设置“名称”为“送元二”，“类型”为“图形”。 操作流程演示 6.单击舞台上的图形元件实例，使用“任意变形工具”将实例缩小，如图所示。选中第60帧插入关键帧，将实例大小调整至舞台大小。选中第50~60帧中的任意一帧，创建传统补间，将实例由小变大，如图所示。 操作流程演示 7.在第70帧和80帧处插入关键帧，选中第80帧，使用“任意变形工具”将实例缩小，并将其属性面板中的“Alpha”值调整为“0%”，实现实例由大到小逐渐消失的效果。 操作流程演示 8.单击“新建图层”按钮回，新建“图层4”并重命名为“赠从弟”。选中第70帧插入关键帧，将库面板中“赠从弟.jpg”拖至舞台，按F8键将舞台上的文件转换为图形元件。打开“转换为元件”对话框，设置“名称”为“赠从弟”，“类型”为“图形”。 操作流程演示 8.设置其属性面板的“Alpha”值为“0%”。选中第80帧插入关键帧，调整其“Alpha”值为“100%”。选中第90帧，插入关键帧，时间轴状态如图所示。 操作流程演示 9.单击“新建图层”按钮回，新建“图层5”并重命名为“云”，在第1帧处将“库”面板中的影片剪辑元件“云动”拖至舞台右侧上边缘。 操作流程演示 10.单击“新建图层”按钮回，新建“图层6”并重命名为“经典咏流传”，在第1帧处选择“文本工具”在舞台上输入文字“经典咏流传”，打开属性面板，设置“字体颜色”为“橙色”；设置“咏”字的“字符系列”为“华文行楷”，“大小”为“70pt”。 操作流程演示 10.设置其余四字的“字符系列”为“华文新魏”，“大小”为“80pt”。将文字置于舞台右上方，舞台布局如图所示。选中第30帧插入关键帧，调整文字的位置如图所示，创建传统补间。 操作流程演示 11.在第50帧处插入关键帧，打开变形面板，如图3-77所示，进行“倾斜”变形，并调整文字的位置和大小，如图所示，设置文字的“Alpha”值为“0%”，创建传统补间。 操作流程演示 12.选中第70帧插入关键帧，调整文字的状态，创建传统补间。最终的时间轴状态如图所示。 操作流程演示 13.按【Ctrl+S】组合键保存文件，按【Ctrl+Enter】组合键测试影片。 分组实践 第二部分 分组实践 布置任务：在学生端电脑完成案例制作，可根据小组讨论结果适当添加有趣效果。 巩固练习 随堂练习 1. 在“经典咏流传”案例中，制作古代书卷从隐藏缓缓显现的动画效果，最适合使用（ ） A. 逐帧动画 B. 传统补间动画 C. 补间形状动画 D. 骨骼动画 【答案】B 【解析】 传统补间动画专门用于实现元件实例的位置、旋转、缩放、颜色等属性的平滑过渡，非常适合此类效果。 随堂练习 2. 创建传统补间动画的前提条件是起始帧和结束帧的对象必须是（ ） A. 同一个元件的实例 B. 不同的矢量形状 C. 同一个图层上的任意对象 D. 位图图像 【答案】A 【解析】 传统补间动画要求补间范围的首尾关键帧上必须是同一个元件的实例。你可以移动、旋转、缩放这个实例，但不能在首尾关键帧上更换为不同的元件或对象类型。 随堂练习 3. 要让毛笔字“咏”的最后一笔写完后有轻微的“笔锋回弹”效果，应该调整传统补间属性中的（ ） A. 旋转 B. 缓动 C. 缩放 D. 调整到路径 【答案】B 【解析】 “缓动”功能可以控制补间动画的速度变化。设置一个正的缓动值（如50），可以使动画在接近结束时速度变慢，模拟出笔锋写完时轻柔停顿的感觉。更精细的控制可以点击“编辑缓动”来自定义速度曲线。 随堂练习 4. 在制作“印章”从画外飞入并盖在字画角落的动画时，为了模拟印章落下时的弹性，可以在传统补间中设置（ ） A. 旋转多次 B. 缩放从大到小再回弹 C. 颜色从红变淡 D. 调整到路径 【答案】B 【解析】 模拟弹性效果通常涉及缩放属性的变化：印章落下时（接触瞬间）可以稍微压扁（缩放X不变，缩放Y略小于100%），然后快速恢复原状（缩放Y=100%），甚至略微超过再弹回。这需要在传统补间的中间插入关键帧来调整缩放值。 随堂练习 5. 传统补间动画在时间轴上显示为（ ） A. 淡紫色背景的箭头 B. 蓝色背景的箭头 C. 绿色背景的箭头 D. 虚线 【答案】B 【解析】 成功创建的传统补间动画在时间轴上会显示为带有蓝色背景的箭头。如果显示为虚线，则表示补间创建失败，通常是因为首尾关键帧上的对象不符合要求。 随堂练习 6. 如果想让“诗句”文字从透明逐渐变为清晰显现，在传统补间中应该调整实例的哪个属性？（ ） A. 亮度 B. 色调 C. Alpha（透明度） D. 高级效果 【答案】C 【解析】 Alpha值控制对象的透明度。在起始关键帧将文字实例的Alpha值设为0%（完全透明），在结束关键帧设为100%（完全不透明），创建传统补间后即可实现淡入效果。 THANKS 谢谢观看 $