2.7 交互动画

与许多动画制作工具相比，Animate CC 2017动画有一个最大的特点就是具有强大的交互性，浏览者在观赏动画的同时，可以自由控制动画的播放进程。

2.7.1 初识动作脚本

动作脚本是Animate CC 2017具有强大交互功能的灵魂所在。使用动作脚本可以与Animate CC 2017后台数据库进行交流，结合动作脚本，可以制作出交互性强、动画效果更加绚丽的动画。动作脚本是一种编程语言，Animate CC 2017使用的是ActionScript 3.0版本的动作脚本。Animate CC 2017动画之所以具有交互性，是通过对按钮、关键帧和影片剪辑设置动作脚本来实现的，所谓“动作”指的是一套命令脚本语句，当某事件发生或某条件成立时，就会发出命令来执行设置的动作。

执行菜单中的“窗口|动作”命令（快捷键〈F9〉），可以调出“动作”面板，如图2-153所示。

1．脚本导航器

脚本导航器用于显示包含脚本的Animate CC元素（影片剪辑、帧和按钮等）的分层列表。使用脚本导航器可在Animate CC 2017文档中的各个脚本之间快速移动。如果单击脚本导航器中的某一项目，与该项目相关联的脚本将显示在脚本窗口中。

2．工具栏

“动作”面板工具栏位于“脚本”窗格上方，包含6个工具按钮，这些按钮的具体作用如下。

●（固定脚本）：单击该按钮后会显示为状态，此时可以固定当前帧当前图层的脚本。

●（插入实例路径和名称）：单击该按钮，打开“插入目标路径”对话框，如图2-154所示，从中可以选择插入按钮或影片剪辑元件的目录路径。

●（查找）：单击该按钮，将展开高级选项，如图2-155所示，在文本框中输入内容，可以进行查找与替换。

●（设置代码格式）：单击该按钮，可以为写好的脚本提供默认的代码格式。

●（代码片段）：单击该按钮，可以调出“代码片段”面板，如图2-156所示，从中可以选择预设的ActionScript语言。

●（帮助）：单击该按钮，可以打开链接网页，在该网页中提供了ActionScript语言的帮助信息。

3．“脚本”窗格

“脚本”窗格用来输入和调用动作脚本。“脚本”窗格右上方为工具栏。

2.7.2 动画的跳转控制

关于动画的跳转控制，将通过下面的实例进行讲解，具体操作步骤如下。

1）打开网盘中的“素材及结果\2.7.2动画的跳转控制\动画跳转控制-素材.fla”文件，如图2-157所示。

2）执行菜单中的“控制|测试影片”（组合键〈Ctrl+Enter〉）命令，可以看到两幅图片连续切换播放的效果。

3）制作动画播放到结尾第20帧时停止播放的效果。方法：将时间定位在第20帧，然后执行菜单中的“窗口|动作”面板，调出“动作”面板，如图2-158所示。接着在“动作”面板中单击右上角的（代码片段）按钮，调出“代码片段（断）”面板，如图2-159所示。

4）在“代码片段”面板的“ActionScript/时间轴导航/在此帧处停止”命令处双击鼠标，如图2-160所示，此时在“动作”面板中会自动输入动作脚本，如图2-161所示。同时会自动创建一个名称为“Actions”的图层，并且第20帧处多出了一个字母“a”，在如图2-162所示。

5）执行菜单中的“控制|测试影片”命令，即可看到当动画播放到第20帧时，动画停止的效果。

6）制作动画播放到结尾再跳转到第1帧后停止播放的效果。方法：在“动作”面板中删除注释和脚本，然后输入脚本“gotoAndStop（1）”。接着执行菜单中的“控制|测试影片”命令，即可看到当动画播放到第20帧时，自动跳转到第1帧循环播放的效果。

2.7.3 交互按钮的实现

用户除了在关键帧中可以设置动作脚本外，在按钮中也可以设置动作脚本，从而实现按钮交互动画。下面通过一个实例进行讲解，具体操作步骤如下。

1）打开网盘中的“素材及结果\2.7.3交互按钮的实现\交互按钮的实现-素材.fla”文件。

2）执行菜单中的“控制|测试影片”（组合键〈Ctrl+Enter〉）命令，可以看到小球依次沿4个椭圆运动的效果。

3）制作小球开始时静止的效果。方法：执行菜单中的“窗口|动作”面板，调出“动作”面板，然后在“动作”面板中单击右上角的（代码片段）按钮，调出“代码片段”面板。接着在“代码片段”面板的“ActionScript/时间轴导航/在此帧处停止”命令处双击鼠标，如图2-163所示，此时在“动作”面板中会自动输入动作脚本，如图2-164所示。同时会自动创建一个名称为“Actions”的图层，如图2-165所示。最后执行菜单中的“控制|测试影片”（组合键〈Ctrl+Enter〉）命令，测试影片，即可看到小球开始时静止的效果。

4）制作单击“播放”按钮，小球开始依次沿4个椭圆运动的效果。方法：在舞台中分别选择“播放”按钮实例，然后在“属性”面板中将它的实例名称命名为“pl”，如图2-166所示。

5）在“代码片段”面板的“ActionScript/事件处理函数/Mouse Click事件”命令处双击鼠标，如图2-167所示，此时在“动作”面板中会自动输入动作脚本，如图2-168所示。然后删除{}之间的注释和脚本，再输入脚本“play()”，如图2-169所示。

6）执行菜单中的“控制|测试影片”（组合键〈Ctrl+Enter〉）命令，即可测试小球开始时静止，当单击“播放”按钮后开始依次沿4个椭圆运动的效果。

7）制作单击“暂停”按钮，小球暂停其依次沿4个椭圆运动的效果。方法：在舞台中分别选择“暂停”按钮实例，然后在“属性”面板中将它的实例名称命名为“ps”，如图2-170所示。

8）在“代码片段”面板的“ActionScript/事件处理函数/Mouse Click事件”命令处双击鼠标，此时在“动作”面板中会自动输入动作脚本。然后删除{}之间的注释和脚本，再输入脚本“stop()”，如图2-171所示。

9）至此，整个动画制作完毕。下面执行菜单中的“控制|测试影片”（组合键〈Ctrl+Enter〉）命令，打开播放器窗口，然后单击“播放”和“暂停”按钮即可看到效果。

2.7.4 类与绑定

类绑定是ActionScript 3.0代码与Animate CC 2017结合的重要途径。在ActionScript 3.0中，每一个显示对象都是一个具体类的实例，使用Animate CC 2017制作的动画也不例外。采用类和库中的影片剪辑绑定，可以使漂亮的动画具备程序模块式的功能。一旦影片和类绑定后，放进舞台的这些影片就被视为该类的实例。当一个影片和类绑定后，影片中的子显示对象和帧播放都可以被类中定义的代码控制。

类文件有什么含义呢？例如，用户想让一个影片剪辑对象有很多功能，比如支持拖动、支持双击等，可以先在一个类文件中写清楚这些实现的方法，然后用这个类在舞台上创建许多实例，此时这些实例全部具有类文件中已经写好的功能。只需写一次，就能使用很多次，最重要的是它还可以通过继承来重用很多代码，为将来制作动画节省很多时间。关于类的具体应用请参见本书中的“5.10在小窗口中浏览大图像效果”“5.11下雪效果”“5.12礼花绽放效果”和“5.13砸金蛋游戏”。