设计 ActionScript 应用程序
您应先对要构建的应用程序有一些想法,然后再开始构建该应用程序。
设计的表示可以像应用程序的名称和应用程序用途的简要说明一样简单,也可以像一组包含许多统一建模语言 (UML) 图示的需求文档一样复杂。我们的第一个 ActionScript 应用程序示例是一个标准的"Hello World"应用程序,它的设计非常简单:
- 该应用程序将被称为 HelloWorld。
- 它显示包含"Hello World!"字样的单个文本字段。
- 为了便于重用,该应用程序将使用一个名为 Greeter 的面向对象的类,该类既可以在 Flash 文档中使用,也可以在 Flex 应用程序中使用。
- 在创建该应用程序的一个基本版本之后,您将添加新功能,让用户输入一个用户名并让应用程序对照已知用户列表来检查该用户名。
有了这一简明的定义之后,您可以开始构建该应用程序了。
创建 HelloWorld 项目和 Greeter 类
Hello World 应用程序的设计说明指出该应用程序的代码应易于重用。为了实现此目标,该应用程序使用一个名为 Greeter 的面向对象的类。
要在 Flash 创作工具中创建 Greeter 类,请执行下列操作:
- 在 Flash 创作工具中,选择"文件">"新建"。
- 在"新建文档"对话框中,选择"ActionScript 文件",然后单击"确定"。
将显示一个新的 ActionScript 编辑窗口。
- 选择"文件">"保存"。选择一个文件夹以包含您的应用程序,将 ActionScript 文件命名为 Greeter.as,然后单击"确定"。
继续执行在 Greeter 类中添加代码。
在 Greeter 类中添加代码
Greeter 类定义一个对象 Greeter
,您可以在 HelloWorld 应用程序中使用该对象。
要向 Greeter 类中添加代码,请执行以下操作:
- 将以下代码键入该新文件中:
package { public class Greeter { public function sayHello():String { var greeting:String = "Hello World!"; return greeting; } } }
Greeter 类包括一个
sayHello()
方法,它为指定的用户名返回字符串"Hello World!"。 - 选择"文件">"保存"保存此 ActionScript 文件。
现在 Greeter 类可以在 Flash 或 Flex 应用程序中使用了。
创建使用 ActionScript 代码的应用程序
您构建的 Greeter 类定义一组自包含的软件功能,但它不表示完整的应用程序。要使用该类,需要创建一个 Flash 文档或 Flex 应用程序。
HelloWorld 应用程序创建 Greeter 类的一个新实例。下面说明了如何将 Greeter 类附加到应用程序。
要使用 Flash 创作工具创建 ActionScript 应用程序,请执行下列操作:
- 选择"文件">"新建"。
- 在"新建文档"对话框中,选择"Flash 文档",然后单击"确定"。
将显示一个新的 Flash 窗口。
- 选择"文件">"保存"。选择包含该 Greeter.as 类文件的同一文件夹,将 Flash 文档命名为 HelloWorld.fla,然后单击"确定"。
- 在 Flash 的"工具"调色板中,选择"文本"文件,然后在舞台中拖动以定义一个新的文本字段,该字段宽约 300 像素,高约 100 像素。
- 在"属性"窗口中,保持选中舞台上的文本字段,键入
mainText
作为该文本字段的实例名。 - 单击主时间轴的第 1 帧。
- 在"动作"面板中键入以下脚本:
var myGreeter:Greeter = new Greeter(); mainText.text = myGreeter.sayHello("Bob");
- 保存该文件。
发布和测试 ActionScript 应用程序
软件开发是一个重复的过程。编写一些代码,尝试编译这些代码,然后编辑代码,直到能够完全编译这些代码为止。运行编译后的应用程序,测试该应用程序,看它是否实现了预期的设计,如果没有,应再次编辑代码,直到实现预期的设计为止。Flash 和 Flex Builder 开发环境提供了多种发布、测试和调试应用程序的方法。
下面是在每种环境中测试 HelloWorld 应用程序的基本步骤。
要使用 Flash 创作工具发布和测试 ActionScript 应用程序,请执行下列操作:
- 发布您的应用程序并观察编译错误。在 Flash 创作工具中,选择"控制">"测试影片",编译您的 ActionScript 代码并运行 HelloWorld 应用程序。
- 如果测试应用程序时"输出"窗口中显示任何错误或警告,请在 HelloWorld.fla 或 HelloWorld.as 文件中修复导致这些错误的根源,然后重新测试该应用程序。
- 如果没有编译错误,您将看到一个显示 Hello World 应用程序的 Flash Player 窗口。其中显示"Hello, Bob"文本。
您刚才创建了一个简单但完整的面向对象的应用程序,该应用程序使用 ActionScript 3.0。继续执行改进 HelloWorld 应用程序。
改进 HelloWorld 应用程序
要使该应用程序更有趣,现在让应用程序要求用户输入用户名并对照预定义的名称列表来验证该用户名。
首先,更新 Greeter 类以添加新功能。然后更新 Flex 或 Flash 应用程序以使用新功能。
要更新 Greeter.as 文件,请执行以下操作:
- 打开 Greeter.as 文件。
- 将文件的内容更改为如下内容(新行和更改的行以粗体显示):
package { public class Greeter { /** * 定义名字以获取适当的问候. */ public static var validNames:Array = ["Sammy", "Frank", "Dean"]; /** * 建立一个greeting串用来存放用户名 */
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;
}
现在,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 创作工具修改该应用程序,请执行下列操作:
- 打开 HelloWorld.fla 文件。
- 修改第 1 帧中的脚本,将一个空字符串 (
""
) 传递到 Greeter 类的sayHello()
方法:var myGreeter:Greeter = new Greeter(); mainText.text = myGreeter.sayHello("");
- 在"工具"调色板中选择"文本"工具,然后在舞台上创建两个新的文本字段,这两个字段并排放置在现有的
mainText
文本字段之下。 - 在第一个新文本字段中,键入文本 User Name: 作为标签。
- 选择另一个新文本字段,并在"属性"检查器中选择 InputText 作为该文本字段的类型。键入
textIn
作为实例名。 - 单击主时间轴的第 1 帧。
- 在"动作"面板中,在现有脚本的末尾添加以下行:
function www(event:MouseEvent):void
{
mainText.text = myGreeter.sayHello(textIn.text);
}
bn.addEventListener(MouseEvent.CLICK,www); -
新代码添加以下功能:
- 前两行只定义两个文本字段的边框。
- 输入文本字段(例如
textIn
字段)具有一组可以调度的事件。使用addEventListener()
方法可以定义一个函数,该函数在发生某一类型的事件时运行。在本例中,该事件指的是按键盘上的 Enter 键。 keyPressed()
自定义函数调用myGreeter
对象的sayHello()
方法,传递textIn
文本字段中的文本作为参数。该方法基于传入的值返回字符串"greeting"。返回的字符串随后分配给mainText
文本字段的text
属性。
第 1 帧的完整脚本如下所示:
mainText.border = true;
textIn.border = true;var myGreeter:Greeter = new Greeter();
mainText.text = myGreeter.sayHello("");
function www(event:MouseEvent):void
{
mainText.text = myGreeter.sayHello(textIn.text);
}
bn.addEventListener(MouseEvent.CLICK,www);
保存该文件。
- 选择"控制">"测试影片",运行应用程序。
运行该应用程序时,将提示您输入用户名。如果用户名有效(Sammy、Frank 或 Dean),该应用程序将显示"hello"确认消息。