第24课 使用Flash CS5创建网页动画（3）（教案）-《网页制作三合一案例教程》同步教学（航空工业出版社）

课题 第24课 使用Flash CS5创建网页动画（3） 课时 2课时（90 min） 教学目标 知识目标： （1）理解传统补间动画、基于对象补间动画和形状补间动画的含义 （2）掌握传统补间动画、基于对象补间动画和形状补间动画的制作方法 技能目标： （1）掌握各类补间动画的特点和制作方法 （2）能够灵活运用各类补间动画 素质目标： 学习中要向优秀的人看齐，学习其优良品质和高效的学习方法 教学重难点 教学重点：传统补间动画、基于对象补间动画和形状补间动画的制作方法 教学难点：传统补间动画、基于对象补间动画和形状补间动画的制作方法 教学方法 问答法、讨论法、讲授法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→  问题导入（3 min）→传授新知（30 min）→课堂讨论（10 min） 第2节课：问题导入（3 min）→ 传授新知（22 min）→ 课堂实训（15 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 【教师】让学生查找教材中哪些实例用到了传统补间动画，分析传统补间动画起到作用 【学生】按照要求完成课前任务 通过课前任务，让学生对传统补间动画有个大体认识 考勤 （2 min） 【教师】使用文旌课堂APP进行签到 【学生】班干部报请假人员及原因 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （3min） 【教师】提出以下问题，并随机邀请学生进行回答 前面的实例中，已多次用到传统补间动画，请试着总结传统补间动画的含义。 【学生】聆听、思考、回答 【教师】总结学生的回答，导入本节课内容：制作补间动画 通过回顾之前实例当中对传统补间动画的应用，引出本次课内容 传授新知 （30 min） 【教师】讲解新知，制作补间动画 任务一 制作补间动画 一、任务说明 在Flash CS5中，补间动画分为传统补间动画、基于对象的补间动画和形状补间动画3种，本任务将分别学习这3种动画的特点及创建方法。 二、预备知识 （一）制作传统补间动画 前面的实例中，已多次用到传统补间动画，本节就来系统地学习传统补间动画的制作。 传统补间动画是指在同一图层的前后两个关键帧中放置同一个元件实例，然后对这两个关键帧中元件实例的位置、角度、大小、色调和透明度等进行不同的设置，并由Flash自动生成中间各帧上的对象，所形成的动画。下面通过一个小实例介绍传统补间动画的制作方法。 【多媒体】演示传统补间动画的制作方法 步骤1打开本书配套素材“素材与实例\素材\Flash”目录下的“小火车.fla”文档，然后在“背景”图层的第80帧插入普通帧，在“火车头”图层的第80帧插入关键帧。 步骤2单击“时间轴”面板上“火车头”图层的第1帧，将播放头移至该帧，然后使用“选择工具”将该帧上的“火车头”元件实例拖到舞台右侧外；再将“火车头”图层第80帧上的“火车头”元件实例拖到舞台左侧外。 【提示】 在创建传统补间动画时，可以先编辑前后关键帧上的对象，再创建补间，也可以在创建补间后再编辑对象。 步骤3在“火车头”图层第1帧和第80帧之间的任一帧上单击鼠标右键，在弹出的快捷菜单中选择“创建传统补间”。创建传统补间动画后，两个关键帧之间的普通帧会变为淡紫色，在起始帧和结束帧之间会出现一个长箭头。 步骤4选择“火车头”图层第1帧至第80帧（不包括第80帧）之间的任一帧，在“属性”面板的“补间”栏中可设置传统补间动画的参数，本例保持默认不变。 【提示】 若开始帧与结束帧之间不是箭头而是虚线，说明补间没有成功，原因可能是在开始帧或结束帧上有分离的对象或者一个以上的元件实例。 【课堂问答】 【教师】随机邀请学生回答以下问题 请同学们说一说传统补间动画参数的含义及其作用。 【学生】聆听、思考、回答 【教师】总结学生的回答 缓动：在该编辑框中输入正值，可使动画逐渐变慢；若输入负值，可使动画逐渐变快。变化程度与输入的值大小成正比。旋转：设置补间动画中对象的旋转方向和旋转次数，“无”表示不旋转，“自动”表示根据用户对对象所做的设置旋转。同步：勾选该复选框，可使图形元件实例中的动画和主时间轴同步。缩放：当两个关键帧上对象大小不同时，勾选该选项可使对象在动画中按比例进行缩放。 步骤5创建传统补间动画后，可按快捷键【Ctrl＋Enter】测试动画效果。本例最终源文件可参考本书配套素材“素材与实例\实例\Flash”目录下的“小火车.fla”文档。 （二）制作基于对象的补间动画 基于对象的补间动画（也可直接称其为补间动画）是Flash CS5的新增功能，与传统补间动画不同的是，该补间动画是基于对象创建的