示例：动画公文包片段 (Flash Professional)

该示例旨在让您在第一时机看到如何将各段 ActionScript 合并为一个完整的应用程序。该动画包片段是一个有关如何利用现有线性动画以及添加某些次要交互式元素的示例。例如，您可以将为某客户创建的动画纳入联机包。要添加到动画中的交互行为包括两个查看者可以单击的按钮：一个用于启动动画，另一个用于导航到单独的 URL（例如包菜单或作者的主页）。

创建该片段的过程可以分为四个主要部分：

  1. 准备 FLA 文件以便添加 ActionScript 和交互式元素。

  2. 创建和添加按钮。

  3. 编写 ActionScript 代码。

  4. 测试应用程序。

准备添加交互

向动画添加交互式元素之前，创建一些用于添加新内容的位置将有助于创建 FLA 文件。此任务包括在舞台上创建可放置按钮的实际空间。此外，还包括在 FLA 文件中创建“空间”，以分隔不同的项目。

要创建 FLA 以添加交互式元素，请执行下列操作：

  1. 创建一个包含简单动画（如一个补间动画或补间形状）的 FLA 文件。如果已经创建了一个包含项目中正在展示的动画的 FLA 文件，则打开该文件，以新名称保存。

  2. 确定两个按钮在屏幕上的显示位置。一个按钮用于启动动画，另一个用于链接到作者的包或主页。如果需要，在舞台上为该新内容清除或添加一些空间。如果该动画还没有启动按钮，可以在第一个帧上创建一个启动屏幕。这时，您可能希望移动动画，使其从第二帧或后面的帧启动。

  3. 在时间轴中的其他图层上添加一个新图层，并将其命名为 buttons 。这是将要在其中添加按钮的图层。

  4. 在 buttons 图层之上创建一个新图层，并将其命名为 actions 。这是将要在其中向应用程序添加 ActionScript 代码的图层。

创建和添加按钮

接下来，将实际创建和放置构成交互式应用程序中心的按钮。

要创建按钮并将其添加到 FLA，请执行下列操作：

  1. 使用绘图工具在 buttons 图层上创建第一个按钮（“play”按钮）的可视外观，例如，绘制一个顶部带文本的水平椭圆。

  2. 使用“选择”工具选择单个按钮的所有图形部分。

  3. 在主菜单中，选择“修改”>“转换为元件”。

  4. 在对话框中，选择“按钮”作为元件类型，为该元件赋予一个名称，然后单击“确定”。

  5. 选择按钮之后，在“属性”检查器中为按钮赋予实例名称 playButton 。

  6. 重复步骤 1 至 5，创建可将查看者带到作者主页的按钮。将该按钮命名为 homeButton 。

编写代码

虽然此应用程序的 ActionScript 代码全都是在同一个位置输入的，但是该代码可分为三组功能。代码的这三组功能分别是：

  • 一旦 SWF 文件开始加载（当播放头进入第 1 帧时），就停止播放头。

  • 侦听一个事件，该事件在用户单击播放按钮时开始播放 SWF 文件。

  • 侦听一个事件，该事件在用户单击创作者主页按钮时将浏览器定向至相应的 URL。

要创建代码，使得在播放头进入第 1 帧时停止播放头，请执行下列操作：

  1. 在 actions 图层的第 1 帧上选择关键帧。

  2. 若要打开“动作”面板，请从主菜单中选择“窗口”>“动作”。

  3. 在“脚本”窗格中，输入以下代码： 

    stop();

要编写代码，使得单击播放按钮时启动动画，请执行下列操作：

  1. 在前面步骤中输入的代码的末尾添加两个空行。

  2. 在脚本底部输入以下代码： 

    function startMovie(event:MouseEvent):void 
{ 
    this.play(); 
}

    此代码定义一个名为 startMovie() 的函数。调用 startMovie() 时，该函数会导致主时间轴开始播放。

  3. 在上一步中添加的代码的下一行中，输入以下代码行： 

    playButton.addEventListener(MouseEvent.CLICK, startMovie);

    此代码行将 startMovie() 函数注册为 playButton 的 click 事件的侦听器。也就是说，它使得只要单击名为 playButton 的按钮，就会调用 startMovie() 函数。

要编写代码，使得单击主页按钮时将浏览器定向至某一个 URL，请执行下列操作：

  1. 在前面步骤中输入的代码的末尾添加两个空行。

  2. 在脚本底部输入以下代码： 

    function gotoAuthorPage(event:MouseEvent):void 
{ 
    var targetURL:URLRequest = new URLRequest("http://example.com/"); 
    navigateToURL(targetURL); 
}

    此代码定义一个名为 gotoAuthorPage() 的函数。此函数首先创建一个表示 URL http://example.com/ 的 URLRequest 实例。然后将该 URL 传递给 navigateToURL() 函数，使用户的浏览器打开此 URL。

  3. 在上一步中添加的代码的下一行中，输入以下代码行： 

    homeButton.addEventListener(MouseEvent.CLICK, gotoAuthorPage);

    此代码行将 gotoAuthorPage() 函数注册为 homeButton 的 click 事件的侦听器。也就是说，它使得只要单击名为 homeButton 的按钮，就会调用 gotoAuthorPage() 函数。

测试应用程序

应用程序的功能现已齐备。让我们测试一下应用程序，看看到底是不是这样。

测试应用程序：

  1. 从主菜单中，选择“控制”>“测试影片”。Flash Professional 将创建 SWF 文件，并在 Flash Player 窗口中打开该文件。

  2. 试用这两个按钮，确保它们按您预期的方式工作。

  3. 如果按钮不起作用，请检查下列事项：

    • 这两个按钮是否具有不同的实例名？

    • addEventListener() 方法调用使用的名称是否与按钮的实例名相同？

    • addEventListener() 方法调用中使用的事件名称是否正确？

    • 为各个函数指定的参数是否正确？（两种方法都需要一个数据类型为 MouseEvent 的参数。）

    上述所有错误和大多数其他错误都会导致出现错误消息。选择“测试影片”命令时，或测试项目时单击此按钮，都会出现该错误消息。在“编译器错误”面板中查看编译器错误（第一次选择“测试影片”时出现的错误）。检查“输出”面板查看是否有在播放内容（如单击按钮）时发生的运行时错误。