4.3 按钮交互的实现

1. 4.3 按钮交互的实现 除了在关键帧中可以设置动作脚本外，在按钮中也可以设置动作脚本，从而实现按钮交互动画。下面我们通过一个实例进行讲解，具体操作步骤如下： 1）打开配套光盘中“素材及结果|4.3 按钮交互的实现|按钮交互的实现-素材.fla”文件。 提示：该素材的第1帧被添加了“stop()”动作脚本。因此为静止状态。 2）创建名称为“游戏室内场景”和“游戏室外场景”的两个按钮元件，如图4-9所示。 图4-9创建两个按钮元件

2. 3）单击时间轴下方的 （插入图层）按钮，新建“图层2”。然后将库面板中的“元件1”按钮拖入舞台，放置位置如图4-10所示。接着在“图层2”的第10帧按快捷键〈F7〉，插入空白关键帧，再将库面板中的“元件2”按钮拖入舞台，放置位置如图如图4-11所示。 图4-10将“元件1”按钮拖入舞台 图 4-11在第10帧将“元件2”按钮拖入舞台

3. 4）设置按下“元件1”（即“游戏室外场景”）按钮的跳转到第10帧画面的效果。方法：右键单击第1帧舞台中的“元件1”按钮，从弹出的快捷菜单中选择“动作”命令，然后从弹出的“动作”面板中设置动作脚本为：4）设置按下“元件1”（即“游戏室外场景”）按钮的跳转到第10帧画面的效果。方法：右键单击第1帧舞台中的“元件1”按钮，从弹出的快捷菜单中选择“动作”命令，然后从弹出的“动作”面板中设置动作脚本为： on (press) { gotoAndStop(10); } 5）设置按下“元件2”（即“游戏室内场景”）按钮的跳转到第1帧画面的效果。方法：单击第10帧舞台中的“元件2”按钮，然后在“动作”面板中设置动作脚本为： on (press) { gotoAndStop(1);

4. 6）执行菜单中的“控制|测试影片”命令，即可看到按下“游戏室外场景”按钮后跳转到第10帧的画面，按下“游戏室内场景”按钮后跳转到第1帧画面的效果。6）执行菜单中的“控制|测试影片”命令，即可看到按下“游戏室外场景”按钮后跳转到第10帧的画面，按下“游戏室内场景”按钮后跳转到第1帧画面的效果。 • 按钮除了响应按钮事件，还可以响应以下8种按键事件： • press：事件发生于鼠标在位于按钮上方，并按下鼠标时。 • lrelease：事件发生于鼠标位于按钮上方按下鼠标，然后松开鼠标时。 • lreleaseOutside：事件发生于鼠标位于按钮上方并按下鼠标，然后将鼠标移到按钮以外区域，在松开鼠标时。 • rollOver：事件放生于鼠标移到按钮上方时。 • rollOut：事件放生于鼠标移出按钮区域时。 • dragOver：事件发生于按住鼠标不松手，然后将鼠标移到按钮上方时。 • dragOut：事件发生于按住鼠标不松手，然后将鼠标移出按钮区域时。 • keyPress：事件发生于用户按钮键盘上某个键时，其格式为keyPress“<键名>”。触发事件列表中列举了常用的键名称，比如：keyPress“<left>”，表示按下键盘上的向左方向按钮时触发事件。

5. 4.4 创建链接 在大多数网页中，我们常常看到“使用帮助”、“与我联系”等类的文字，单击这些文字可链接到指定的网页，如图4-12所示。本节将具体讲解网站中常见的多种链接的方法。 图4-12链接页面效果

6. 4.4.1 创建文本链接 对于创建文本链接，我们将通过下面的实例来具体说明，具体操作步骤如下： 1）打开配套光盘中“素材及结果|4.4 创建链接|创建文本链接-素材.fla”文件。 2）单击时间轴下方的 （插入图层）按钮，新建“文本链接”层。然后选择工具箱中的 （文本工具），在舞台中单击鼠标，接着在属性面板中设置文本类型为“静态文本”、字体为“幼圆”、字体大小为12，颜色为#FF0000，再在舞台中分别输入文字“教学课堂”，如图4-13所示。 图4-13输入文字“教学课堂”

7. 3）同理，输入文字“使用帮助”和“联系我们”。3）同理，输入文字“使用帮助”和“联系我们”。 4）对齐三组文字文字。方法：利用 （选择工具），配合〈Shift〉键同时选择三组文字，然后按快捷键〈Ctrl+K〉，打开对齐面板，单击 （左对齐）和 （垂直居中对齐）按钮，如图4-14所示，结果如图4-15所示。 图4-14设置对齐参数 图4-15对齐后的文字效果 5）创建文字“教学课堂”的文本链接。方法：在舞台中选择文字“教学课堂”，然后在属性面板后的文本框中输入链接地址，并在“目标”后的下拉列表框中选择“_blank”，如图4-16所示。 图4-16创建文字“教学课堂”的文本链接

8. 提示：“目标”下拉列表框中有4个选项。“_blank”，表示在新的浏览器中加载链接的文档；“_parent”，表示在父业或包含该链接的窗口中加载链接的文档；“_self”，表示将链接的文档加载到自身的窗口中；“_top”，表示将在整个浏览器窗口中加载链接的文档。提示：“目标”下拉列表框中有4个选项。“_blank”，表示在新的浏览器中加载链接的文档；“_parent”，表示在父业或包含该链接的窗口中加载链接的文档；“_self”，表示将链接的文档加载到自身的窗口中；“_top”，表示将在整个浏览器窗口中加载链接的文档。 6）同理，创建文字“使用帮助”的文本链接，并在“目标”后的下拉列表框中选择“_blank”，如图4-17所示。 图4-17创建文字“使用帮助”的文本链接 7）执行菜单中的“控制|测试影片”(快捷键〈Ctrl+Enter〉)命令，打开播放器，即可测试单击“教学课堂”和“使用帮助”文字后跳转到所链接的网站效果。

9. 4.4.2创建邮件链接 创建邮件链接的具体操作步骤如下： 1）在舞台中选择文字“联系我们”，然后在属性面板 后的文本框中输入邮件链接地址，并在“目标”后的下拉列表框中选择“_self”，如图4-18所示。 图4-18创建文字“联系我们”的邮件链接

10. 2）执行菜单中的“控制|测试影片”(快捷键〈Ctrl+Enter〉)命令，打开播放器，此时单击文字“联系我们”后没有任何效果，这是因为在swf动画中，单击邮件链接是不会有相应的，但并不等于说邮件链接没有做好。下面使用浏览器来预览一下。方法：执行菜单中的“文件|发布预览|HTML”命令，打开浏览器，然后单击文字“联系我们”，启动Outlook Express，如图4-19所示。接着就可以撰写邮件并发送， 图4-19启动OutlookExpress

11. 4.4.3 创建按钮链接 在网站中，导航的对象不一定都是文字，有时候会是图形。在这种情况下就需要将图形转换为按钮，利用Flash提供的动作脚本完成网页或邮件的链接。 下面通过一个实例来具体讲解将文字转为按钮，并创建按钮链接的方法，具体操作步骤如下： 1）删除前面创建的文字“语音课堂”、“使用帮助”和“联系我们”三组文字的文本链接。 2）选择舞台中的文字“语音课堂”，然后执行菜单中的“修改|转换为元件”（快捷键〈F8〉）命令，在弹出的“转换为元件”对话框中设置如图4-20所示，单击“确定”按钮。 3）双击舞台中的“教学课堂”按钮元件，进入按钮编辑模式。然后选中“点击”帧，按快捷键〈F6〉，插入关键帧，接着利用 （矩形工具）绘制出按钮的相应区，如图4-21所示。 图4-20设置“转换为元件”参数 图4-21在“点击”帧绘制矩形作为相应区

12. 4）创建“教学课堂”按钮的链接。方法：单击按钮，回到场景1，然后右键单击舞台中的“教学课堂”按钮，从弹出的快捷菜单中选择“动作”命令，接着在弹出的“动作”面板中设置动作脚本为：4）创建“教学课堂”按钮的链接。方法：单击按钮，回到场景1，然后右键单击舞台中的“教学课堂”按钮，从弹出的快捷菜单中选择“动作”命令，接着在弹出的“动作”面板中设置动作脚本为： on (release) { getURL("http://www.sina.com","_blank"); } 5）同理，将文本“使用帮助”转换为“使用帮助”按钮。然后选择舞台中的“使用帮助”按钮，在“动作”面板中设置动作脚本为： on (release) { getURL("http://www.sohu.com","_blank"); } 6）创建“联系我们”按钮的邮件链接。方法：将文本“联系我们”转换为“联系我们”按钮，然后选择舞台中的“联系我们”按钮，在“动作”面板中设置动作脚本为： on (release) { getURL("mailto:zfsucceed@163.com"); }

13. 7）执行菜单中的“文件|发布预览|HTML”命令，打开浏览器，即可测试单击“教学课堂”、“使用帮助”后跳转到链接网站，单击“联系我们”按钮后启动Outlook Express的效果。

14. 4.5 浏览器控制 4.5.1 浏览器控制简介 制作完成的动画通常都是在Flash播放器中播放的，控制播放器的播放环境及播放效果是我们经常要解决的问题。比如，如何退出动画、使动画全屏幕播放、如何在影片中调用外部程序等。 fscommand可以实现对动画播放器，也就是Flash Player的控制，它位于“浏览器/网络”类中，如图4-22所示。此外，它可配合JavaScript脚本语言，是Flash与外界沟通的桥梁。 facommand的语法格式为：facommand（命令，参数），前面的“命令”是可以执行的参数；后面的“参数”是被执行命令的参数，其说明如图4-23所示。 图4-22“浏览器/网络”类

15. 图4-23fscommand常用命令和参数说明