Flash CS3 文档

ActionScript 3.0 编程 > ActionScript 快速入门 > 示例：动画公文包片段

示例：动画公文包片段

该示例的设计目的是让您在第一时机看到如何可以将各段 ActionScript 合并为一个完整的应用程序（如果对于 ActionScript 来说并不过于庞大）。该动画公文包片段是一个示例，演示如何利用现有的线性动画（例如，为客户创建的片段），并添加一些适用于将动画融入在线公文包中的微小的交互式元素。要添加到动画中的交互行为将包括两个用户可以单击的按钮：一个用于启动动画，另一个用于导航到单独的 URL（例如公文包菜单或创作者的主页）。

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

1. 准备 FLA 文件以便添加 ActionScript 和交互式元素。
2. 创建和添加按钮。
3. 编写 ActionScript 代码。
4. 测试应用程序。

子主题

准备添加交互

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

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

1. 如果您还没有要向其中添加交互的线性动画，请创建一个具有简单动画（例如一个补间动画或补间形状）的新的 FLA 文件。否则，请打开包含您要在本项目中展示的动画的 FLA 文件，并用新名称保存该文件，以创建一个新的工作文件。
2. 决定屏幕上您希望两个按钮（一个用于启动动画，另一个用于链接到创造者公文包或主页）显示的位置。如果需要，在舞台上为该新内容清除或添加一些空间。如果该动画还没有启动画面，您可能需要在第 1 帧中创建一个（您可能需要移动动画，使它在第 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 将创建 SWF 文件，并在 Flash Player 窗口中打开该文件。
2. 试用这两个按钮，确保它们按您预期的方式工作。
3. 如果按钮不起作用，请检查下列事项：
   • 这两个按钮是否具有不同的实例名？
   • addEventListener() 方法调用使用的名称是否与按钮的实例名相同？
   • addEventListener() 方法调用中使用的事件名称是否正确？
   • 为各个函数指定的参数是否正确？（两个函数都应具有一个数据类型为 MouseEvent 的参数。）

   所有这些错误和大多数其它可能的错误都应在您选择“测试影片”命令或单击按钮时给出错误消息。在“编译器错误”面板中查看编译器错误（这些错误在您第一次选择“测试影片”时发生），并在“输出”面板中查看运行时错误（当 SWF 正在播放时，单击按钮等操作会导致发生这些错误）。

Flash CS3

评论添加到页面后给我发送电子邮件 | 评论报告

当前页: http://livedocs.adobe.com/flash/9.0_cn/main/00000026.html

添加评论