示例:创建基本应用程序



可以使用 Flash、Flex Builder、Dreamweaver 或任何文本编辑器来创建一个扩展名为 .as 的外部 ActionScript 源文件。

ActionScript 3.0 可以用在许多应用程序开发环境(包括 Flash 创作工具和 Flex Builder 工具)中。

本节将引导您完成使用 Flash 创作工具或 Flex Builder 创建和增强一个简单的 ActionScript 3.0 应用程序的步骤。您构建的应用程序会呈现出一种在 Flash 和 Flex 应用程序中使用外部 ActionScript 3.0 类文件的简单模式。在本手册中该模式将会应用于其它所有应用程序范例。

设计 ActionScript 应用程序

您应先对要构建的应用程序有一些想法,然后再开始构建该应用程序。

设计的表示可以像应用程序的名称和应用程序用途的简要说明一样简单,也可以像一组包含许多统一建模语言 (UML) 图示的需求文档一样复杂。本手册不会详细讨论软件设计学科,但希望提醒读者记住应用程序设计是开发 ActionScript 应用程序的一个重要步骤。

我们的第一个 ActionScript 应用程序示例是一个标准的“Hello World”应用程序,该应用程序的设计非常简单:

  • 该应用程序将被称为 HelloWorld。

  • 这个应用程序将会显示一个包含“Hello World!”字样的文本字段。

  • 为了便于重用,该应用程序将使用一个名为 Greeter 的面向对象的类,该类既可以在 Flash 文档中使用,也可以在 Flex 应用程序中使用。

  • 在创建该应用程序的一个基本版本之后,您将添加新功能,让用户输入一个用户名并让应用程序对照已知用户列表来检查该用户名。

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

创建 HelloWorld 项目和 Greeter 类

Hello World 应用程序的设计说明指出该应用程序的代码应易于重用。为了实现此目标,该应用程序使用一个名为 Greeter 的面向对象的类,该类可以在 Flex Builder 或 Flash 创作工具创建的应用程序中使用。

要在 Flash 创作工具中创建 Greeter 类,请执行下列操作:

  1. 在 Flash 创作工具中,选择“文件”>“新建”。

  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 文档或 Flex 应用程序。

HelloWorld 应用程序创建 Greeter 类的一个新实例。下面说明如何将 Greeter 类附加到应用程序。

要使用 Flash 创作工具创建 ActionScript 应用程序,请执行下列操作:

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

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

    将显示一个新的 Flash 窗口。

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

  4. 在 Flash 的“工具”调色板中,选择“文本”文件,然后在舞台中拖动以定义一个新的文本字段,该字段宽约 300 像素,高约 100 像素。

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

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

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

    var myGreeter:Greeter = new Greeter(); 
    mainText.text = myGreeter.sayHello();
  8. 保存该文件。

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

发布和测试 ActionScript 应用程序

软件开发是一个重复的过程。编写一些代码,尝试编译这些代码,然后编辑代码,直到能够完全编译这些代码为止。运行编译后的应用程序,测试该应用程序以确定应用程序是否实现了预期的设计,如果没有,应再次编辑代码,直到实现预期的设计为止。Flash 和 Flex Builder 开发环境提供了多种发布、测试和调试应用程序的方法。

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

要使用 Flash 创作工具发布和测试 ActionScript 应用程序,请执行下列操作:

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

  2. 如果测试应用程序时“输出”窗口中显示任何错误或警告,请在 HelloWorld.fla 或 HelloWorld.as 文件中修复导致这些错误的根源,然后重新测试该应用程序。

  3. 如果没有编译错误,您将看到一个显示 Hello World 应用程序的 Flash Player 窗口。

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

改进 HelloWorld 应用程序

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

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

要更新 Greeter.as 文件,请执行以下操作:

  1. 打开 Greeter.as 文件。

  2. 将文件的内容更改为如下内容(新行和更改的行以粗体显示):

    package 
    { 
        public class Greeter 
        { 
            /** 
             * Defines the names that should 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 或 Flex 文件。

要使用 Flash 创作工具修改该应用程序,请执行下列操作:

  1. 打开 HelloWorld.fla 文件。

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

    var myGreeter:Greeter = new Greeter(); 
    mainText.text = myGreeter.sayHello("");
  3. 在“工具”调色板中选择“文本”工具,然后在舞台上创建两个新的文本字段,这两个字段直接并排放置在现有的 mainText 文本字段之下。

  4. 在第一个新文本字段中,键入文本 User Name: 作为标签。

  5. 选择另一个新文本字段,并在“属性”检查器中选择 InputText 作为该文本字段的类型。选择“单行”作为“行类型”。键入 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”确认消息。