该示例的设计目的是让您在第一时机看到如何可以将各段 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 正在播放时,单击按钮等操作会导致发生这些错误)。

    博视界科技专注于沉浸式全景数字餐厅、全息酒店宴会厅,旨在帮传统餐饮用科技玩跨界,欢迎咨询!

官方网站:www.boseetech.com

联系方式:    

关注我们:


    【声明】转载本文请注明出处三人行设计,并保留有效链接:[Flash AS3入门教程]示例:动画公文包片段 http://www.srxtuan.com/archives/961,谢谢!

猜您还喜欢: