教材

与

学情

分析

本节课选自浙教版信息技术八年级下册第14课《创建按钮元件》，本节的学习任务是通过制作动画作品中的按钮，理解按钮元件4个不同状态帧的意义，掌握按钮元件制作的基本步骤和方法，初步体验按钮元件与鼠标响应和交互。按钮元件是Flash中三种元件之一，在动画作品中起到画龙点睛的作用。按钮元件的最大特性在于它所体现的交互功能。按钮元件的制作和应用比另两类元件更复杂。

从心理特点和学习能力分析，八年级学生对动画能较真实地反映生活中的事物惊叹不已，充满了学习的渴望，喜欢自己动手操作，在教师的引导下，具有一定的分析和解决问题的能力，这为本课的学习提供了保障。从知识掌握情况来看，通过前面的学习，学生已基本掌握了逐帧动画、丰富的动画补间动画的操作方法，这是本课的学习前提。

第1课

时

教学目标

1.知识与技能

   (1) 初步掌握制作按钮元件的方法；

   (2) 理解按钮元件弹起、指针经过、按下及点击4个关键帧的意义。

2.过程与方法

   (1) 通过欣赏优秀flash作品，认识按钮在flash中的交互功能；

   (2) 通过亲身实践制作按钮及展示，理解按钮元件4个关键帧的意义；

   (3) 在学生自主探究过程中，初步掌握制作按钮元件的方法。

3.情感态度与价值观

   (1) 在优秀作品的欣赏中，塑造一定的审美感，激发学生的学习兴趣；

   (2) 在学生自主创建的过程中，培养学生的自学和应用能力。

教学重点

难点

重点：掌握制作按钮元件的方法

难点：理解按钮元件4个不同状态帧的意义

教学

准备

准备相关素材,以及范例

预设

流程

一.情景导入，揭示课题

同学们，听说今天要来很多的老师，学校领导计划定一批快餐。于是就接到了快餐公司发来的菜谱。我们一起来看看这份用Flash动画制作的电子菜谱。

播放第一份电子“菜谱”。没办法点菜呀？为什么？

请一位学生上台演示播放第二份菜谱。顺利看清了。

师总结：两份菜谱最主要的区别在于设置了“按钮”，我们知道这里的按钮帮助我们反复挑选需要的食物。

如果像我们之前做的动画一样，一打开就一直从头到尾播放，这样就很不方便。

因此有了按钮，可以灵活地控制动画的播放、暂停，或者跳转到不同的帧或场景继续播放。按钮起着很重要的交互、控制作用。

今天我们研究一下按钮是如何创建的，以及如何发挥它的交互作用的。用学到的知识把第一份菜谱完善一下。

二．学习新知

其实我们见过很多的按钮，老师这里有三个按钮，大家一起来看一看。

1.认一认

请你用鼠标对这三个按钮进行简单操作，仔细观察按钮的变化，回答表格中的问题。

按钮1：点餐   按钮2：开始点餐  按钮3：新品上市

提问1：你用鼠标对按钮做了哪些操作？学生回答

对按钮的操作可以有鼠标划过按钮，在按钮上按下鼠标（press），在按钮上释放鼠标（release）等等。在flash中，所有这些动作我们都称它为事件。

提问2：说一说表格中内容。

总结：针对鼠标的操作，按钮呈现出不同的效果。

2.创建按钮元件

见识了按钮呈现出来的状态，现在我们来了解一下它的本质。按钮元件是一种能实现交互特性的元件，是Flash三大元件之一。我们已经学习了图形元件和影片剪辑元件，现在我们借鉴一下他们的创建方法来创建一个按钮元件。

请学生演示插入——新建元件

现在进入按钮的编辑界面，大家发现这个编辑环境和图形元件“的编辑环境有什么不同？（请学生说一说，提醒大家观察时间轴）

这四个帧有着自己各自的特定功能，它们能使按钮呈现不同的效果。

按钮元件四个帧名称及含义:

弹起---为按钮的常态,即鼠标未接触时状态

指针经过---为当鼠标划过按钮时的状态
按下---为按下鼠标键的状态
点击---表示按钮响应鼠标事件的范围或称区域面积，此状态的画面内容、颜色在动画播放时不可见 

跟我们表格中按钮的状态是一一对应的。看来按钮还真是千变万化，形态万千呀。我们一起来试一试吧。

任务一：试一试

打开”课堂任务”，制作一个“点餐”按钮，随指针经过的变色效果。并应用到“主页按钮”图层中，测试它的效果。

帮助视频：制作简单的play按钮

思考：如何创建一个隐形的按钮元件

学生操作，老师巡视指导。

问题反馈：

1.关于“点击”帧：

“点击”帧只表示单击鼠标时的响应范围。

如果没有定义“点击”状态，鼠标以“弹起”状态的画面作为作用范围。

当按钮的“弹起”状态为规则的实心几何状态时，“点击”状态就没有必要设置了。但如果按钮是文字，当光标移动到文字的间隙位置则按扭不被激活，则应该设置“点击”状态。
设置“点击”状态的方法：一般绘制一个实心图形，大小和位置应该能够将前几个状态下的内容全部覆盖。

 “点击”帧中的对象是不可见的。

2.按钮元件创建好了，应用到场景中，为什么它没有发挥作用呢？

在实际场景中，鼠标点击按钮，按钮做出响应，需要相应的动作函数来处理。因此想在动画中用按钮来控制播放的顺序，实现它的交互功能，就需要按钮元件+动作代码，动作代码我们下节课做具体分析。

这节课我们先把按钮元件研究透彻。

3.课堂测试——诊断按钮？

三：利用新知，任务探究

平时我们看到很多很美观的按钮。动画中除了文字形态的按钮，还有图片按钮。

请同学们利用图片素材修饰一下你的“点餐按钮”，完成“文字+图片”按钮的创建。

任务二：添加图片素材，制作一个带图案的“点餐”按钮。

请查看帮助文档（如何添加音效）

思考：如何创建一个图片按钮。

问题反馈：注意添加新的图层

声音需要单独的图层

图片按钮

展示个别学生的作品。

四、欣赏创意的按钮

展示创意按钮

总结：很多炫酷的按钮，体现在指针经过和按钮两帧中，可添加一些影片剪辑元件来增强它的效果。制作出动态按钮元件。

任务三：制作炫酷按钮元件

根据“菜谱”的需要，发挥你的聪明才智，制作一些酷炫的按钮元件。

将菜谱补充完整。

请在主页中测试你的按钮效果！

 小秘诀：可以添加背景边框，音效、影片剪辑元件等

一个按钮也可以放在多个位置。比如“下一页”按钮

         制作多个按钮元件可通过“直接复制”按钮，再修改，避免重复工作。

（很重要）调用Flash的公用库中定制好的按钮，而且很漂亮。

五：作品互评，完善

请你说一说你在“菜谱”中都创建了哪些按钮，都有什么作用？

你最满意的是哪一个？你添加了哪些效果？

根据评价要点对学生作品点评，修改完善

学生互评

六：课堂总结

教师：今天我们这节课完成了哪些任务？你学会了哪些操作？有什么体会？

今天这个课，同学们为这份菜谱创建了很多的按钮，但是遗憾的是还没能发挥它的作用。

预知后事如何，且听下回分解！

作业

设计

学习添加ActionScript代码的方法。

板书

设计

第14课   创建按钮元件

1.按钮元件 

2.创建方法