示例：创建基本应用程序

ActionScript 3.0 可以在许多应用程序开发环境中使用，这些环境包括 Flash Professional、Flash Builder 工具或任意文本编辑器。

本示例将引导您完成使用 Flash Professional 或 Flash Builder 创建并增强一个简单的 ActionScript 3.0 应用程序的步骤。您构建的应用程序体现了一种在 Flash Professional 和 Flex 中使用外部 ActionScript 3.0 类文件的简单模式。

设计 ActionScript 应用程序

本示例 ActionScript 应用程序是一个标准“Hello World”应用程序，设计非常简单：

  • 此应用程序名为 HelloWorld，

  • 将显示一个包含“Hello World!”字样的文本字段。

  • 此应用程序使用一个名为 Greeter 的面向对象的类。这种设计允许在 Flash Professional 或 Flex 项目中使用该类。

  • 在本示例中，首先创建该应用程序的基本版本。然后添加功能，使用户可以输入用户名，使应用程序可以对照已知用户列表检查名称。

有了这一简明的定义之后，您可以开始构建该应用程序了。

创建 HelloWorld 项目和 Greeter 类

Hello World 应用程序的设计说明指出该应用程序的代码易于重用。为了达到这个目标，应用程序使用一个名为 Greeter 的面向对象的类。在您于 Flash Builder 或 Flash Professional 中创建的应用程序中使用该类。

要在 Flex 中创建 HelloWorld 项目和 Greeter 类，请执行以下操作：

  1. 在 Flash Builder 中，选择“文件”>“新建”>“Flex 项目”，

  2. 键入 HelloWorld 作为项目名称。确保应用程序类型设置为“Web (在 Adobe Flash Player 中运行)”，然后单击“完成”。

    Flash Builder 将创建项目，然后在包资源管理器中显示该项目。默认情况下，此项目中已有一个名为 HelloWorld.mxml 的文件，并且该文件已在编辑器中打开。

  3. 现在开始在 Flash Builder 中创建一个自定义 ActionScript 类文件。请选择“文件”>“新建”>“ActionScript 类”。

  4. 在“新建 ActionScript 类”对话框的“名称”字段中，键入 Greeter 作为类名称，然后单击“完成”。

    将显示一个新的 ActionScript 编辑窗口。

    继续完成在 Greeter 类中添加代码。

要在 Flash Professional 中创建 Greeter 类，请执行以下操作：

  1. 在 Flash Professional 中，选择“文件”>“新建”。

  2. 在“新建文档”对话框中，选择“ActionScript 文件”，然后单击“确定”。

    将显示一个新的 ActionScript 编辑窗口。

  3. 选择“文件”>“保存”。选择一个文件夹以包含您的应用程序，将 ActionScript 文件命名为 Greeter.as ，然后单击“确定”。

    继续完成在 Greeter 类中添加代码。

在 Greeter 类中添加代码

Greeter 类定义一个对象 Greeter ，您将在 HelloWorld 应用程序中使用该对象。

要向 Greeter 类中添加代码，请执行以下操作：

  1. 在新文件中键入下列代码（有些代码可能已添加）： 

    package 
{ 
    public class Greeter 
    { 
        public function sayHello():String 
        { 
            var greeting:String; 
            greeting = "Hello World!"; 
            return greeting; 
        } 
    } 
}

    Greeter 类包含一个 sayHello() 方法，该方法返回字符串“Hello World!”。

  2. 选择“文件”>“保存”保存此 ActionScript 文件。

Greeter 类准备就绪，可在应用程序中使用。

创建使用 ActionScript 代码的应用程序

您构建的 Greeter 类定义一组自包含的软件功能，但它不表示完整的应用程序。为使用该类，创建一个 Flash Professional 文档或 Flex 项目。

该代码需要 Greeter 类的实例。下面说明如何在应用程序中使用 Greeter 类。

要使用 Flash Professional 创建 ActionScript 应用程序，请执行以下操作：

  1. 选择“文件”>“新建”。

  2. 在“新建文档”对话框中，选择“Flash 文件 (ActionScript 3.0)”，然后单击“确定”。

    将显示一个新的文档窗口。

  3. 选择“文件”>“保存”。选择包含该 Greeter.as 类文件的同一文件夹，将 Flash 文档命名为 HelloWorld.fla ，然后单击“确定”。

  4. 在 Flash Professional 工具调板中，选择“文本”工具。在舞台上拖动来定义一个大约 300 像素宽、100 像素高的新文本字段。

  5. 在“属性”面板中，在仍然选中舞台中的文本字段时，将文本类型设置为“动态文本”。键入 mainText 作为该文本字段的实例名称。

  6. 单击主时间轴的第 1 帧。选择“窗口”>“动作”来打开“动作”面板。

  7. 在“动作”面板中键入以下脚本： 

    var myGreeter:Greeter = new Greeter(); 
mainText.text = myGreeter.sayHello();

  8. 保存该文件。

继续完成发布和测试 ActionScript 应用程序。

要使用 Flash Builder 创建 ActionScript 应用程序，请执行以下操作：

  1. 打开 HelloWorld.mxml 文件，添加代码来匹配下列列表： 

    <?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    minWidth="1024" 
    minHeight="768"" 
    creationComplete="initApp()"> 
     
    <fx:Script> 
        <![CDATA[ 
            private var myGreeter:Greeter = new Greeter(); 
             
            public function initApp():void 
            { 
                // says hello at the start, and asks for the user's name 
                mainTxt.text = myGreeter.sayHello(); 
            } 
        ]]> 
    </fx:Script> 
     
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
     
    <s:TextArea id="mainTxt" width="400"/>         
     
</s:Application>

    此 Flex 项目包括四个 MXML 标签：

    • 一个 <s:Application> 标签，该标签定义 Application 容器

    • 一个 <s:layout> 标签，定义 Application 标签的布局样式（垂直布局）

    • 包含一些 ActionScript 代码的 <fx:Script> 标签

    • 一个 <s:TextArea> 标签，该标签定义用以向用户显示文本消息的一个字段

    <fx:Script> 标签中的代码，定义一个在加载应用程序时调用的 initApp() 方法。 initApp() 方法将 mainTxt TextArea 的文本值设置为刚刚编写的自定义类 Greeter 的 sayHello() 方法所返回的字符串“Hello World!”。

  2. 选择“文件”>“保存”以保存应用程序。

继续完成发布和测试 ActionScript 应用程序。

发布和测试 ActionScript 应用程序

软件开发是一个重复的过程。编写一些代码，尝试编译这些代码，然后编辑代码，直到能够完全编译这些代码为止。运行已编译的应用程序，测试该应用程序是否符合设计预期。如果不符合，则再次编辑代码，直到符合设计预期。Flash Professional 和 Flash Builder 开发环境提供了多种发布、测试和调试应用程序的方式。

下面是在每种环境中测试 HelloWorld 应用程序的基本步骤。

要使用 Flash Professional 发布和测试 ActionScript 应用程序，请执行以下操作：

  1. 发布您的应用程序并观察编译错误。在 Flash Professional 中，选择“控制”>“测试影片”，编译您的 ActionScript 代码并运行 HelloWorld 应用程序。

  2. 如果测试应用程序时“输出”窗口中显示任何错误或警告，则在 HelloWorld.fla 或 HelloWorld.as 文件中修复这些错误。然后尝试再次测试该应用程序。

  3. 如果没有编译错误，则会显示一个显示 Hello World 应用程序的 Flash Player 窗口。

您已经创建了一个简单但完整的面向对象的应用程序，该应用程序使用 ActionScript 3.0。继续改进 HelloWorld 应用程序。

要使用 Flash Builder 发布和测试 ActionScript 应用程序，请执行以下操作：

  1. 选择“运行” >“运行 HelloWorld”。

  2. HelloWorld 应用程序启动。

    • 如果测试应用程序时“输出”窗口中显示任何错误或警告，则在 HelloWorld.mxml 或 Greeter.as 文件中修复这些错误。然后尝试再次测试该应用程序。

    • 如果没有任何编译错误，则会打开一个显示 Hello World 应用程序的浏览器窗口。应当显示文本“Hello World!”。

    您已经创建了一个简单但完整的面向对象的应用程序，该应用程序使用 ActionScript 3.0。继续完成改进 HelloWorld 应用程序。

改进 HelloWorld 应用程序

若要使该应用程序更有趣，现在可让应用程序要求用户输入用户名并对照预定义的名称列表来验证该用户名。

首先，更新 Greeter 类以添加新功能。然后更新应用程序以使用新功能。

要更新 Greeter.as 文件，请执行以下操作：

  1. 打开 Greeter.as 文件。

  2. 将文件的内容更改为如下内容（新行和更改的行以粗体显示）： 

    package 
{ 
    public class Greeter 
    { 
        /** 
         * Defines the names that receive a proper greeting. 
         */ 
        public static var validNames:Array = ["Sammy", "Frank", "Dean"]; 
 
        /** 
         * Builds a greeting string using the given name. 
         */ 
        public function sayHello(userName:String = ""):String 
        { 
            var greeting:String; 
            if (userName == "")  
            { 
                greeting = "Hello. Please type your user name, and then press " 
                            + "the Enter key."; 
            }  
            else if (validName(userName))  
            { 
                greeting = "Hello, " + userName + "."; 
            }  
            else  
            { 
                greeting = "Sorry " + userName + ", you are not on the list."; 
            } 
            return greeting; 
        } 
         
        /** 
         * Checks whether a name is in the validNames list. 
         */ 
        public static function validName(inputName:String = ""):Boolean  
        { 
            if (validNames.indexOf(inputName) > -1)  
            { 
                return true; 
            }  
            else  
            { 
                return false; 
            } 
        } 
    } 
}

现在，Greeter 类拥有许多新功能：

  • validNames 数组列出了有效的用户名。在加载 Greeter 类时该数组将初始化为包含三个名称的列表。

  • sayHello() 方法现在接受一个用户名并根据一些条件来更改问候语。如果 userName 是一个空字符串 ( "" )，则 greeting 属性将设置为提示用户输入用户名的语句。如果用户名有效，则问候语会是“ Hello, userName "。 最后，如果这两个条件都不满足，则 greeting 变量设置为 "Sorry userName , you are not on the list" 。

  • 如果在 validNames 数组中找到 inputName ，则 validName() 方法将返回 true ；否则，返回 false 。语句 validNames.indexOf(inputName) 对照 inputName 字符串检查 validNames 数组中的每个字符串。 Array.indexOf() 方法返回数组中某个对象的第一个实例的索引位置。如果在数组中找不到对象，则返回值 -1。

接下来，编辑引用此 ActionScript 类的应用程序文件。

要使用 Flash Professional 修改应用程序，请执行以下操作：

  1. 打开 HelloWorld.fla 文件。

  2. 修改第 1 帧中的脚本，将一个空字符串 ( "" ) 传递到 Greeter 类的 sayHello() 方法： 

    var myGreeter:Greeter = new Greeter(); 
mainText.text = myGreeter.sayHello("");

  3. 从工具调板中选择文本工具。在舞台上新建两个文本字段。将这两个文本字段直接并排放在现有的 mainText 文本字段下面。

  4. 第一个新文本字段是标签，在其中键入文本 User Name: 。

  5. 选择另一个新文本字段，并在“属性”检查器中选择 Input Text 作为该文本字段的类型。选择“单行”作为“行类型”。键入 textIn 作为实例名。

  6. 单击主时间轴的第 1 帧。

  7. 在“动作”面板中，在现有脚本的末尾添加以下行： 

    mainText.border = true; 
textIn.border = true; 
 
textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); 
 
function keyPressed(event:KeyboardEvent):void 
{ 
    if (event.keyCode == Keyboard.ENTER) 
    { 
        mainText.text = myGreeter.sayHello(textIn.text); 
    } 
}

    新代码添加以下功能：

    • 前两行只定义两个文本字段的边框。

    • 输入文本字段（例如 textIn 字段）具有一组可以调度的事件。使用 addEventListener() 方法可以定义一个函数，该函数在发生某一类型的事件时运行。在本例中，该事件指的是按键盘上的某个键。

    • keyPressed() 自定义函数会检查按下的键是否为 Enter 键。如果是，则该函数调用 myGreeter 对象的 sayHello() 方法，同时传递 textIn 文本字段中的文本作为参数。该方法基于传入的值返回字符串“greeting”。返回的字符串随后分配给 mainText 文本字段的 text 属性。

    第 1 帧的完整脚本如下所示： 

    var myGreeter:Greeter = new Greeter(); 
mainText.text = myGreeter.sayHello(""); 
 
mainText.border = true; 
textIn.border = true; 
 
textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); 
 
function keyPressed(event:KeyboardEvent):void 
{ 
    if (event.keyCode == Keyboard.ENTER) 
    { 
        mainText.text = myGreeter.sayHello(textIn.text); 
    } 
}

  8. 保存该文件。

  9. 选择“控制”>“测试影片”以运行此应用程序。

    运行该应用程序时，它会提示您输入用户名。如果用户名有效（Sammy、Frank 或 Dean），应用程序则会显示“hello”确认消息。

要使用 Flash Builder 修改应用程序，请执行以下操作：

  1. 打开 HelloWorld.mxml 文件。

  2. 接下来，修改 <mx:TextArea> 标签，告诉用户它只用于显示。将背景颜色更改为浅灰色，将 editable 属性设为 false ： 

        <s:TextArea id="mainTxt" width="400" backgroundColor="#DDDDDD" editable="false" />

  3. 现在，将以下各行添加到与 <s:TextArea> 结束标签紧邻的后面。这些行将创建一个 TextInput 组件，用户利用此组件可以输入用户名值： 

        <s:HGroup width="400"> 
        <mx:Label text="User Name:"/>     
        <s:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" /> 
    </s:HGroup>

    enter 属性定义用户在 userNameTxt 字段中按下 Enter 键会发生什么情况。在本示例中，代码会将字段中的文本传递到 Greeter.sayHello() 方法。 mainTxt 字段中的问候语会随之更改。

    HelloWorld.mxml 文件如下所示： 

    <?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    minWidth="1024" 
    minHeight="768"" 
    creationComplete="initApp()"> 
     
    <fx:Script> 
        <![CDATA[ 
            private var myGreeter:Greeter = new Greeter(); 
             
            public function initApp():void 
            { 
                // says hello at the start, and asks for the user's name 
                mainTxt.text = myGreeter.sayHello(); 
            } 
        ]]> 
    </fx:Script> 
     
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
     
    <s:TextArea id="mainTxt" width="400" backgroundColor="#DDDDDD" editable="false"/>     
 
    <s:HGroup width="400">     
        <mx:Label text="User Name:"/>     
        <s:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" /> 
    </s:HGroup> 
     
</s:Application>

  4. 保存经过编辑的 HelloWorld.mxml 文件。选择“运行” >“运行 HelloWorld”来运行应用程序。

    运行该应用程序时，应用程序会提示您输入用户名。如果用户名有效（Sammy、Frank 或 Dean），应用程序会显示“ Hello, userName ”确认消息。