课堂导入

  按钮元件：是个“特别演员”，它无可替代的优点在于使观众与动画更贴近，也就是利用它可以实现“交互”动画，“按钮”对象是4帧。下面这个动画是用按钮制作的钢琴，想不想弹一首曲子呀？

学习目标

1.掌握按钮元件的四种状态；

2.学会创建按钮元件。

学习任务单

教学视频

教学课件

教学内容

按钮元件

• 按钮：是元件的一种类型

• 按钮有以下四种状态：
  弹起：是按钮的正常状态
  指针经过：鼠标移到按钮上时的状态
  按下：按下按钮时的状态
  点击：鼠标能单击到按钮时的范围钮：是元件的一种类型

创建按钮的方法

1、插入——新建元件命令——创建新元件的对话框，输入元件名称，选择元件类型“按钮”即可

2、单击确定进入按钮模式，如下图:

举例：创建按钮元件

拓展资源

（一）思考一下：如何利用按钮元件控制声音的播放？

（二）操作步骤

步骤1：新建一个FLASH文件，设置舞台的尺寸为550px*400px，然后将文件以“声音的产生”命名并保存到电脑中指定的目录。

步骤2：输入文字“声音的产生与传播”，文字颜色为“#0030CE”，大小40，字体任选。

步骤3：选择“矩形工具”绘制一个大的蓝色矩形边框，笔触值为2，并组合这个矩形框。再绘制一个小的紫色矩形边框，笔触值为5，填充色为白色，并为这个矩形组合。在小矩形上输入文字“观察与思考”，如下图：

步骤4：执行“插入-新建元件”命令，弹出如下图所示菜单，创建一个按钮元件“留声机”。

步骤5：将素材全部导入到库，进入按钮“留声机”的编辑区。

步骤6：选择时间轴上的“弹起”，拖拽库中留声机的图片至舞台。在时间轴上的“指针经过”处插入关键帧，在图片下方输入文字“点击留声机播放声音”。在时间轴上的“按下”处插入关键帧，删除文字，拖拽库中留声机的声音至舞台。如下图：

步骤7：返回到主场景，将库中的按钮“留声机”拖入到舞台的大矩形框中，并调整大小和位置。

步骤8；参照按钮“留声机”的制作方法，继续制作按钮“吉他”和“音叉”。将制作好的按钮拖入到舞台的大矩形框中，并调整大小和位置。

步骤9：执行“窗口-公用库-按钮”命令，在弹出的菜单中选择文件夹“playback”内的按钮，如下图：

步骤10：右击刚才插入的按钮，在弹出的菜单中选择“动作”命令。在“动作”面板中输入代码：

On(press){

GotoAndPlay(2);

                                                                }

步骤11：右击图层1的第1帧，在弹出的菜单中选择“动作”命令。在“动作”面板中输入代码： stop();

步骤12：选择图层1，并在第2帧处插入空白关键帧。接着输入文字“声音是怎样产生的？”，文字颜色为（#0099CC），大小为50，字体任选。再用“直线工具”绘制一条墨绿的直线，笔触值为3，如下图：

步骤13：执行“插入-新建元件”命令，在弹出的菜单中创建一个透明按钮元件。

步骤14：进入该按钮的编辑区，在图层的“弹起”、“指针经过”处插入空白关键帧，在“按下”处绘制一个矩形，填充色任意。返回到场景，将刚刚创建的按钮拖拽到直线上方，如下图：

步骤15：右击刚才插入的按钮，在弹出的菜单中选择“动作”命令。在“动作”面板中输入代码：

On(press){

GotoAndPlay(3);

                                                                }

步骤16：右击图层1的第2帧，在弹出的菜单中选择“动作”命令。在“动作”面板中输入代码： stop();

步骤17：在第3帧处插入关键帧，删除按钮，并在直线的上方插入文字“空气的震动”， 文字颜色为（#DB2D02），大小为35，字体任选。

步骤18：执行“窗口-公用库-按钮”命令，在弹出的菜单中选择文件夹“playback”内的按钮，如下图：

步骤19：右击刚才插入的按钮，在弹出的菜单中选择“动作”命令。在“动作”面板中输入代码：

On(press){

GotoAndPlay(1);

}

步骤20：调整按钮和文字的位置，如下图：

步骤21：右击图层1的第3帧，在弹出的菜单中选择“动作”命令。在“动作”面板中输入代码： stop();

步骤22：保存文件，按“Ctrl+Enter”测试影片。

课后检测

同学们，请扫描以下二维码进行课后检测，我们将全程记录你的答题情况。