AS3(4) --- 实例篇

该示例的设计目的是让您在第一时机看到如何可以将各段 ActionScript 合并为一个完整的应用程序（如果对于 ActionScript 来说并不过于庞大）。该动画公文包片段是一个示例，演示如何利用现有的线性动画（例如，为客户创建的片段），并添加一些适用于将动画融入在线公文包中的微小的交互式元素。要添加到动画中的交互行为将包括两个查看者可以单击的按钮：一个用于启动动画，另一个用于导航到单独的 URL（例如公文包菜单或创作者的主页）。
　　
　　创建该片段的过程可以分为四个主要部分：　
　　准备 FLA 文件以便添加 ActionScript 和交互式元素。
　　创建和添加按钮。
　　编写 ActionScript 代码。
　　测试应用程序。
　　
　　准备添加交互
　　向动画添加交互式元素之前，创建一些用于添加新内容的位置将有助于创建 FLA 文件。这包括在舞台上创建可以在其中放置按钮的实际空间，还包括在 FLA 文件中创建“空间”以使不同的项目保持独立。
　　
　　要创建 FLA 以添加交互式元素，请执行下列操作：
　　如果还没有要向其中添加交互性的线性动画，请创建一个具有简单动画（例如一个补间动画或补间形状）的新的 FLA 文件。否则，请打开包含您要在本项目中展示的动画的 FLA 文件，并用新名称保存该文件，以创建一个新的工作文件。
　　
　　决定您希望两个按钮（一个用于启动动画，另一个用于链接到创造者公文包或主页）在屏幕上显示的位置。如果需要，在舞台上为该新内容清除或添加一些空间。如果该动画还没有启动画面，您可能需要在第 1 帧中创建一个（您可能需要移动动画，使它在第 2 帧或之后的帧中启动）。
　　
　　在时间轴中的其它图层上创建一个新图层，并将其重命名为 buttons。这将是要在其中添加按钮的图层。 //按钮经常是独立的一层
　　在 buttons 图层之上创建一个新图层，并将其命名为 actions。这将是要在其中向应用程序添加 ActionScript 代码的图层。
　　
　　创建和添加按钮
　　接下来，将需要真正创建和摆放构成交互式应用程序中心的按钮。
　　
　　要创建按钮并将其添加到 FLA，请执行下列操作：
　　使用绘图工具在 buttons 图层上创建第一个按钮（“play”按钮）的可视外观，例如，您可以绘制一个水平椭圆，且椭圆顶部有一些文本。
　　
　　使用“选择”工具选择单个按钮的所有图形部分。
　　
　　在主菜单中，选择“修改”>“转换为元件”。
　　
　　在对话框中，选择“按钮”作为元件类型，为该元件赋予一个名称，然后单击“确定”。
　　
　　选择按钮之后，在“属性”检查器中为按钮赋予实例名称 playButton。
　　
　　重复步骤 1 至 5，创建可将查看者转至创作者主页的按钮。将该按钮命名为 homeButton。
　　
　　编写代码
　　虽然该应用程序的 ActionScript 代码都是在同一个位置输入的，但是该代码可分为三组功能。该代码需要执行的三个任务为：
　　
　　一旦 SWF 文件开始加载（当播放头进入第 1 帧时），就停止播放头。
　　
　　侦听一个事件，该事件在用户单击播放按钮时开始播放 SWF 文件。
　　侦听一个事件，该事件在用户单击创作者主页按钮时将浏览器定向至相应的 URL。
　　
　　要创建代码，使得在播放头进入第 1 帧时停止播放头，请执行下列操作：
　　在 actions 图层的第 1 帧上选择关键帧。
　　
　　若要打开“动作”面板，请从主菜单中选择“窗口”>“动作”。
　　
　　在“脚本”窗格中，输入以下代码：
　　
　　stop();
　　要编写代码，使得单击播放按钮时启动动画，请执行下列操作：
　　在前面步骤中输入的代码的末尾添加两个空行。
　　
　　在脚本底部输入以下代码：
　　
　　function startMovie(event:MouseEvent):void { this.play(); }
　　此代码定义一个名为 startMovie() 的函数。调用 startMovie() 时，该函数会导致主时间轴开始播放。
　　
　　在上一步中添加的代码的下一行中，输入以下代码行：
　　
　　playButton.addEventListener(MouseEvent.CLICK, startMovie);
　　此代码行将 startMovie() 函数注册为 playButton 的 click 事件的侦听器。也就是说，它使得只要单击名为 playButton 的按钮，就会调用 startMovie() 函数。
　　
　　要编写代码，使得单击主页按钮时将浏览器定向至某一个 URL，请执行下列操作：
　　在前面步骤中输入的代码的末尾添加两个空行。
　　
　　在脚本底部输入以下代码：
　　
　　function gotoAuthorPage(event:MouseEvent):void { var targetURL:URLRequest = new URLRequest("http://example.com/"); navigateToURL(targetURL); }
　　此代码定义一个名为 gotoAuthorPage() 的函数。此函数首先创建一个表示 URL http://example.com/ 的 URLRequest 实例，然后将该 URL 传递给 navigateToURL() 函数，使用户浏览器打开该 URL。
　　
　　在上一步中添加的代码的下一行中，输入以下代码行：
　　
　　homeButton.addEventListener(MouseEvent.CLICK, gotoAuthorPage);
　　此代码行将 gotoAuthorPage() 函数注册为 homeButton 的 click 事件的侦听器。也就是说，它使得只要单击名为 homeButton 的按钮，就会调用 gotoAuthorPage() 函数。
　　
　　测试应用程序
　　此时，该应用程序应完全可以工作了。让我们测试一下应用程序，看看到底是不是这样。
　　
　　要测试该应用程序，请执行下列操作：
　　从主菜单中，选择“控制”>“测试影片”。Flash 将创建 SWF 文件，并在 Flash Player 窗口中打开该文件。
　　
　　试用这两个按钮，确保它们按您预期的方式工作。
　　
　　如果按钮不起作用，请检查下列事项：
　　
　　这两个按钮是否具有不同的实例名？
　　addEventListener() 方法调用使用的名称是否与按钮的实例名相同？
　　addEventListener() 方法调用中使用的事件名称是否正确？
　　为各个函数指定的参数是否正确？（两个函数都应具有一个数据类型为 MouseEvent 的参数。）
　　
　　所有这些错误和大多数其它可能的错误都应在您选择“测试影片”命令或单击按钮时给出错误消息。在“编译器错误”面板中查看编译器错误（这些错误在您第一次选择“测试影片”时发生），并在“输出”面板中查看运行时错误（当 SWF 正在播放时，单击按钮等操作会导致发生这些错误）。