第4章 交互动画

第4章交互动画初识动作脚本动画的跳转控制按钮交互的实现创建链接浏览器控制声音的控制影片剪辑的播放和控制键盘控制ActionScript3.0的应用本章重点：与许多动画制作工具相比，Flash动画有一个最大的特点就是具有强大的交互性，浏览者在观赏动画的同时，可以自由控制动画的播放进程。通过本章学习应掌握以下内容：4.1初识动作脚本动画脚本是Flash具有强大交互功能的灵魂所在。它是一种编程语言，FlashCS3有两种版本的动作脚本语言，分别是ActionScript2.0和ActionScript3.0。动画之所以具有交互性，是通过对按钮、关键帧和影片剪辑设置移动的“动作”来实现的。所谓“动作”指的是一套命令语句，当某事件发生或某条件成立时，就会发出命令来执行设置的动作。执行菜单中的“窗口|动作”命令（快捷键〈F9〉），可以调出“动作”面板，如图4-1所示。动作工具箱是浏览ActionScript语言元素（函数、类、类型等）的分类列表，包括全局函数、全局属性、运算符、语句、ActionScript2.0类、编译器指令、常数、类型、否决的、数据组件、组件、屏幕和索引等。单击它们可以展开相关内容，如图4-2所示。双击要添加的动作脚本即可将它们添加到右侧的脚本窗口中，如图4-3所示。1.动作工具箱2.脚本导航器脚本导航器用于显示包括脚本的Flash元素（影片剪辑、帧和按钮）的分层列表。使用脚本导航器可在Flash文档中的各个脚本之间快速移动。如果单击脚本导航器中的某一项目，则与该项目相关联的脚本将显示在脚本窗口中，并且播放头将移动到时间轴上的相关位置。如果双击脚本导航器中的某一项，则该脚本将被固定（就地锁定）。可以通过单击每个选项卡在脚本间移动。脚本窗口用来输入动作语句，除了可以通过在动作工具箱中双击语句的方式在脚本窗口中添加动作脚本外，还可以在这里直接用键盘进行输入。3.脚本窗口4.2动画的跳转控制关于动画的跳转控制，我们通过下面的实例进行讲解，具体操作步骤如下：1）打开配套光盘中“素材及结果|4.2动画的跳转控制|动画跳转控制-素材.fla”文件。2）单击时间轴下方的（插入图层）按钮，新建“图层2”，然后在第20帧按快捷键〈F6〉，插入关键帧，如图4-4所示。3）执行菜单中的“窗口|动作”面板，调出动作面板，然后双击“全局函数”下的stop，此时在右侧脚本窗口中显示出脚本“stop()”，如图4-5所示。图4-4在“图层2”的第20帧插入关键帧图4-5右侧脚本窗口显示出“stop()”4）执行菜单中的“控制|测试影片”命令，即可看到当动画播放到第20帧时，动画停止的效果。5）测试完毕后，关闭动画播放窗口，此时会发现在“图层2”的第20帧多出了一个字母“a”，如图4-6所示，它表示在该帧设置了动作脚本。图4-6在“图层2”的第20帧多出了一个字母“a”6）制作动画播放到结尾再跳转到第1帧循环播放的效果。方法：在“图层2”的第20帧，打开动作面板，删除动作脚本stop，然后双击左侧“时间轴控制”类别中的gotoAndPlay函数，再在右侧的括号中输入1，如图4-7所示。该段脚本表示当动画播放到结尾时，自动跳转到第1帧继续播放，如图4-7所示。图4-7设置动作脚本gotoAndPlay(1)7）制作动画播放到结尾再跳转到第1帧并停止播放的效果。方法：在“图层2”的第20帧，打开动作面板，删除动作脚本“gotoAndPlay(1)”，然后双击左侧“时间轴控制”类别中的gotoAndStop函数，再在右侧的括号中输入1，如图4-8所示。该段脚本表示当动画播放到结尾时，自动跳转到第1帧并停止播放。图4-8设置动作脚本gotoAndStop(1)Flash中还有许多时间轴控制的动作脚本，它们的用法都是一样的，下面列出了一些常用时间轴控制脚本。gotoAndPlay()一般用法：gotoAndPlay(场景,帧数);作用：跳转到指定场景的指定帧，并从该帧开始播放，如果要跳转的帧为当前场景，可以不输入“场景”参数。参数介绍如下：场景：跳转至场景的名称，如果是当前场景，就不用设置该项。帧数：跳转到帧的名称（在“属性”面板中设置的帧标签）或帧数。举例说明：当单击被添加了gotoAndPlay动作脚本的按钮时，动画跳转到当前场景的第15帧，并从该帧开始播放的动作脚本。on(press){gotoAndPlay(15);}举例说明：当单击被添加了gotoAndPlay动作脚本的按钮时，动画跳转到名称为“动画1”的场景的第15帧，并从该帧开始播放的动作脚本。on(press){gotoAndPlay(“动画1”,15);}gotoAndStop()一般用法：gotoAndStop(场景,帧数,);作用：跳转到指定场景的指定帧并从该帧停止播放，如果没有指定场景，将跳转到当前场景的指定帧。参数介绍如下：场景：跳转至场景的名称，如果是当前场景，就不用设置该项。帧数：跳转至帧的名称或数字。nextFrame()作用：跳转到下一帧并停止播放。举例说明：按单击按钮时，跳转到下一帧并停止播放的动作脚本：on(press){nextFrame();}preFrame()作用：跳转到前一帧并停止播放。举例说明：按单击按钮时，跳转到前一帧并停止播放的动作脚本：on(press){preFrame();}nextScene()作用：跳转到下一个场景并停止播放。preScene()作用：跳转到前一个场景并停止播放。Play()作用：使动画从当前帧开始继续播放。在播放动画时，除非另外指定，否则从第1帧开始播放。如果动画播放进程被“跳转”或者“停止”，那么需要使用“play()”语句才能重新播放。stop()作用：停止当前播放的电影，该动作脚本常用于使用按钮控制影片剪辑。举例说明：当需要某个影片剪辑在播放完毕后停止并不是循环播放，则可以在影片剪辑的最后一帧附加“stop()”动作脚本。这样，当影片剪辑中的动画播放到最后一帧时，播放将立即停止。stopAllSounds()作用：是当前播放的所有声音停止播放，但是不停止动画的播放。需要注意的是，被设置的流式声音将会继续播放，在4.6节将会介绍其详细应用。举例说明：当单击按钮时，影片中的所有声音将停止播放的动作脚本。on(press){stopAllSounds();}4.3按钮交互的实现除了在关键帧中可以设置动作脚本外，在按钮中也可以设置动作脚本，从而实现按钮交互动画。下面通过一个实例进行讲解，具体操作步骤如下：1）打开配套光盘中“素材及结果|4.3按钮交互的实现|按钮交互的实现-素材.fla”文件。提示：该素材的第1帧被添加了“stop()”动作脚本，因此为静止状态。2）创建名称为“游戏室内场景”和“游戏室外场景”的两个按钮元件，如图4-9所示。图4-9创建两个按钮元件3）单击时间轴下方的（插入图层）按钮，新建“图层2”。然后将库面板中的“元件1”按钮拖入舞台，放置位置如图4-10所示。接着在“图层2”的第10帧按快捷键〈F7〉，插入空白关键帧，再将库面板中的“元件2”按钮拖入舞台，放置位置如图4-11所示。图4-10将“元件1”按钮拖入舞台图4-11在第10帧将“元件2”按钮拖入舞台4）设置单击“元件1”（即“游戏室外场景”）按钮的跳转到第10帧画面的效果。方法：右击第1帧舞台中的“元件1”按钮，从弹出的快捷菜单中选择“动作”命令，然后在弹出的“动作”面板中设置动作脚本为：on(press){gotoAndStop(10);}5）设置单击“元件2”（即“游戏室内场景”）按钮的跳转到第1帧画面的效果。方法：单击第10帧舞台中的“元件2”按钮，然后在“动作”面板中设置动作脚本为：on(press){gotoAndStop(1);}6）执行菜单中的“控制|测试影片”命令，即可看到单击“游戏室外场景”按钮后跳转到第10帧的画面，单击“游戏室内场景”按钮后跳转到第1帧画面的效果。按钮除了响应按钮事件，还可以响应以下8种按键事件：press：事件发生于鼠标位于按钮上方，并按下鼠标时。lrelease：事件发生于鼠标位于按钮上方按下鼠标，然后松开鼠标时。lreleaseOutside：事件发生于鼠标位于按钮上方并按下鼠标，然后将鼠标移到按钮以外区域再松开鼠标时。rollOver：事件发生于鼠标移到按钮区域时。rollOut：事件发生于鼠标移出按钮区域时。dragOver：事件发生于按住鼠标不放，然后将鼠标移到按钮区域时。dragOut：事件发生于按住鼠标不放，然后将鼠标移出按钮区域时。keyPress：事件发生于用户按键盘上某个键时，其格式为“keyPress键名”。触发事件列表中列举了常用的键名称，比如，keyPressleft，表示按下键盘上的向左方向键时触发事件。4.4创建链接，我们常在很多网页中看到“教学课堂”、“使用帮助”、“联系我们”等类似的文字，单击这些文字可链接到指定的网页，如图4-12所示。本节将具体讲解网站中常见的多种链接的方法。图4-12链接页面效果4.4.1创建文本链接对于创建文本链接，将通过下面的实例来进行说明，具体操作步骤如下：1）打开配套光盘中“素材及结果|4.4创建链接|创建文本链接-素材.fla”文件。2）单击时间轴下方的（插入图层）按钮，新建“文本链接”层。然后选择工具箱中的（文本工具），在舞台中单击，接着在属性面板中设置文本类型为“静态文本”、字体为“幼圆”、字体大小为12，颜色为#FF0000，再在舞台中分别输入文字“教学课堂”，如图4-13所示。3）同理，输入文字“使用帮助”和“联系我们”。4）对齐三组文字。方法：利用（选择工具），配合〈Shift〉键同时选择三组文字，然后按快捷键〈Ctrl+K〉，打开对齐面板，单击（左对齐）和（垂直居中对齐）按钮，如图4-14所示，效果果如图4-15所示。图4-14设置对齐参数图4-15对齐后的文字效果5）创建文字“教学课堂”的文本链接。方法：在舞台中选择文字“教学课堂”，然后在属性面板后的文本框中输入链接地址，并在“目标”下拉列表框中选择“_blank”，如图4-16所示。提示：“目标”下拉列表框中有4个选项。“_blank”，表示在新的浏览器中加载链接的文档；“_parent”，表示在父级或包含该链接的窗口中加载链接的文档；“_self”，表示将链接的文档加载到自身的窗口中；“_top”，表示将在整个浏览器窗口中加载链接的文档。6）同理，创建文字“使用帮助”的文本链接，并在“目标”下拉列表框中选择“_blank”，如图4-17所示。7）执行菜单中的“控制|测试影片”(快捷键〈Ctrl+Enter〉)命令，打开播放器，即可测试单击“教学课堂”和“使用帮助”文字后跳转到所链接的网站效果。4.4.2创建邮件链接创建邮件链接的具体操作步骤如下：1）在舞台中选择文字“联系我们”，然后在属性面板的“链接”文本框中输入邮件链接地址，并在“目标”下拉列表框中选择“_self”，如图4-18所示。2）执行菜单中的“控制|测试影片”(快捷键〈Ctrl+Enter〉)命令，打开播放器，此时单击文字“联系我们”后没有任何效果，这是因为在SWF动画中，单击邮件链接是不会有反应的，但并不等于说邮件链接没有做好。下面使用浏览器来预览一下。方法：执行菜单中的“文件|发布预览|HTML”命令，打开浏览器，然后单击文字“联系我们”，启动OutlookExpress，如图4-19所示。接着就可以撰写邮件并发送。图4-19启动OutlookExpress4.4.3创建按钮链接在网站中，导航的对象不一定都是文字，有时候会是图形。在这种情况下就需要将图形转换为按钮，利用Flash提供的动作脚本完成网页或邮件的链接。下面通过一个实例来具体讲解将文字转为按钮，并创建按钮链接的方法，具体操作步骤如下：1）删除前面创建的文字“教学课堂”、“使用帮助”和“联系我们”三组文字的文本链接。2）选择舞台中的文字“教学课堂”，然后执行菜单中的“修改|转