第一单元第三课 形状补间动画 按钮元件 教学设计 2024—2025学年人教版初中信息技术八年级上册

授课日期 第 周星期 第 节 授课班级 章节或课题 形状补间动画、按钮元件 目标与要求 1、进一步掌握关键帧和普通帧的使用 2、会分析简单的形状补间动画的例子 3、知道按钮元件的功能并了解按钮元件的制作原理 重点与难点 教学重点    1、形状补间动画的制作方法                 2、编辑按钮元件 教学难点    1、形状补间动画的应用 2、在按钮元件中编辑添加动画，并设置正确的动作 授课课时 1节时 授课类型 新授课 教学后记： 教案用纸 20 —20 学年度第 学期 年级： 科目：信息技术 教 学 过 程 一、新课导入     观看形状补间动画实例（进度条、礼花绽放） 二、新授       1、什么是形状补间动画        “形状补间动画”是补间动画的一种。在改变一个矢量图形的形状、颜色、位置，或一个矢量图变形成为另一个矢量图的过程中，可以使用形状补间动画。在形状补间动画中，只需创建起始和结束两个关键帧，中间帧则由Flash通过计算机自动完成。在创建形状补间动画时，如果需要对组、实例或位图图像应用形状补间，则必须首先将这些元素进行分离     2、如何创建形状补间动画        创建形状补间动画方法：        在时间轴面板上动画开始播放的地方创建一个空白关键帧或选择一个关键帧并绘制图形，一般一帧中以一个对象为好，在动画结束处创建或选择一个关键帧并绘制另外的图形，再单击开始帧，在“属性”面板上单击“补间”旁边的小三角，在弹出的菜单中选择“形状”，此时，可以看到时间轴上发生了变化——淡绿色背景和箭头，一个形状补间动画即创建完成。如果出现虚线，看看前后两个关键帧上是否存在非矢量图或别的元素，将其删除即可。      3、实例制作【演示】进度条        （1）图层1命名为“框”，编辑内容：一个进度条的框和文字loading        （2）新建一个图层“颜色”，内容：画一个颜色条长宽刚好和框的大小一致 （3）用鼠标点颜色图层在出现的属性栏选项里选择动画效果为：形状补间             并把颜色条的宽度在属性面板里调整为：3        （4）在第50帧处插入关键帧，将颜色跳的宽度在属性面板里调整为：430 （5）测试整个动画效果，保存文件 教 案 用 纸 教 案 用 纸 教 学 过 程 4、按钮元件 （1）按钮有哪三种状态？      生：初始状态、鼠标经过状态和按下时的状态    （2）按钮的四个关键帧各有什么作用？      生：当为元件选择按钮行为时，Flash会创建一个四帧的时间轴,对应按钮的四种状态          按钮元件的时间轴上的每一帧都有一个特定的功能： 　　          第一帧是弹起状态，代表指针没有滑过按钮时该按钮的外观 　　     第二帧是指针经过状态，代表当指针滑过按钮时，该按钮的外观 　     　第三帧是按下状态，代表单击按钮时，该按钮的外观 　     　第四帧是点击状态，定义将响应鼠标单击的区域 5、制作简单按钮【实例演示】    （1）插入菜单下的新建元件命令，在打开的新建对话框中的行为选项选中按钮    （2） 在按钮元件编辑区的时间轴上我们可以看到自动分为四个部分分别为：弹起；鼠标经过；按下；点击    （3）在弹起状态，新建一矩形黑色      在指针经过状态插入关键帧，将矩形颜色改为红色      在按下状态插入关键帧，将矩形改为青色      最后在点击状态插入关键帧，因为这一状态只是区域标示，因此在动画播放过程中不会显示这一状态的图形，因此无须更改颜色   想一想：如果我要给我的按钮添加一些文字，比如说播放、暂停，我应该怎么去操作呢？   提示：插入一个新的图层，输入文字，别忘了每个状态文字的颜色是不一样的！    想一想:你会制作文字按钮吗？ （1）新建一个名字为“播放”的按钮元件。 （2）进入按钮元件编辑区的弹起状态，在弹起状态，利用文字工具输入“播放” 教 案 用 纸 教 学 过 程 （3）在指针经过状态插入关键帧，并将字体颜色设置为红色 （4）在按下状态插入关键帧，将字体颜色设置为蓝色。  （5）在点击状态插入关键帧，并画一个矩形，完全覆盖文字。 6、基本动作控制命令介绍 （1） 停止命令格式; stop(); 说明动作；停止播放头的移动 （2）播放命令 格式;play(); 说明动作；在时间轴中向前移动播放头。 （3） 转移命令gotoAndPlay(scene, frame) 参数scene 播放头将转到的场景的名称。frame 播放头将转到的帧的编号或标签。 动作；将播放头转到场景中指定的帧并从该帧开始播放。如果未指定场景，则播放头将转到当前场景中的指定帧。以上三个命令是动作脚本中最常用的基本动作,它们通过对时间轴上播放头的控制实现的特定功能 7、为按钮添加相应的动作【演示】 （1）在按钮元件上单击鼠标右键，选择“动作” （2）在“动作”面板中，单击“脚本助手”，启用“脚本助手”，如果不使用脚本助手就自己动手输入 （3）在左侧全局函数中选择“时间轴控制”—>“play” （4）在编辑面板中会出现如下语句： on (release) {                         Play(); } 教 案 用 纸 教 学 过 程 （意思为单击按钮后播放） 想一想：如果我要再插入一个按钮，让我的影片在单击此按钮之后停止，应该怎样做？         应该选择哪一个语句？        如果再插入一个按钮，当我单击时它就从头开始播放，应该怎样做？应该选择哪一个语句？ 三、学生练习 制作课本P46的 试一试 5 学科网（北京）股份有限公司 $$