一个简单的应用程序

应用程序的设计
创建 Greetings 应用程序
开发和运行后续示例

本节将指导您使用 Flash 组件和 Flash 创作工具完成创建简单的 ActionScript 3.0 应用程序的步骤。提供的示例既有 FLA 文件（其时间轴上包含 ActionScript 代码），也有外部的 ActionScript 类文件（带有只包含“库”中组件的 FLA 文件）。通常，您会希望使用外部类文件开发较大的应用程序，以便在类和应用程序之间共享代码，并使应用程序更易维护。有关使用 ActionScript 3.0 编程的详细信息，请参阅 《ActionScript 3.0 编程》 。

应用程序的设计

我们的第一个 ActionScript 组件应用程序的示例是标准的“Hello World”应用程序的一个变体，因此其设计相当简单：

将此应用程序称为“Greetings”。
它使用 TextArea 显示最初为“Hello World”的一个问候。
使用 ColorPicker 允许您更改文本的颜色。
使用三个 RadioButton 允许您将文本的大小设置为小、较大或最大。
使用 ComboBox 允许您从下拉列表选择其他问候。
应用程序使用“组件”面板中的组件，而且还通过 ActionScript 代码创建应用程序元素。

完成这些定义后，您可以开始构建应用程序。

创建 Greetings 应用程序

下列步骤使用 Flash 创作工具创建 FLA 文件、将组件放置在“舞台”上、向“时间轴”添加 ActionScript 代码，从而创建 Greetings 应用程序。

在 FLA 文件中创建 Greetings 应用程序：

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

打开一个新的 Flash 窗口。
选择“文件”>“保存”，将 Flash 文件命名为 Greetings.fla ，然后单击“保存”按钮。
在 Flash 组件面板中，选择一个 TextArea 组件，并将其拖到“舞台”上。
在“属性”窗口中，选择舞台上的 TextArea 后，键入 aTa 作为实例名，然后输入下列信息：
- 输入 230 作为 W 值（宽）。
- 输入 44 作为 H 值（高）。
- 输入 165 作为 X 值（水平位置）。
- 输入 57 作为 Y 值（垂直位置）。
- 输入 Hello World! 作为文本参数（在“参数”选项卡上）。
将 ColorPicker 组件拖到舞台上，放在 TextArea 的左侧，并为其指定实例名称“txtCp”。在“属性”检查器中输入下列信息：
- 输入 96 作为 X 值。
- 输入 72 作为 Y 值。
将三个 RadioButton 组件拖到“舞台”上，分别为组件指定实例名称 smallRb 、 largerRb 和 largestRb 。在“属性”检查器中为它们输入下列信息：
- 为每个组件输入 100 作为 W 值，输入 22 作为 H 值。
- 输入 155 作为 X 值。
- 输入 120 作为 smallRb 的 Y 值，输入 148 作为 largerRb 的 Y 值，输入 175 作为 largestRb 的 Y 值。
- 输入 fontRbGrp 作为每个组件的 groupName 参数。
- 在组件的“参数”选项卡输入 Small 、 Larger 和 Largest 作为标签。
将一个 ComboBox 拖到“舞台”上，并为其指定实例名称 msgCb 。在“属性”检查器中为其输入下列信息：
- 输入 130 作为 W 值。
- 输入 265 作为 X 值。
- 输入 120 作为 Y 值。
- 在“参数”选项卡上，输入 Greetings 作为提示参数。
- 双击 dataProvider 参数的文本字段以打开“值”对话框。
- 单击加号，然后用 Hello World! 替换标签值
- 重复上一步骤，添加 Have a nice day! 和 Top of the Morning! 标签值
- 单击“确定”以关闭“值”对话框。
保存该文件。
如果尚未打开，请通过按 F9 或从“窗口”菜单选择“动作”以打开“动作”面板。单击主时间轴的第 1 帧，然后在“动作”面板中输入下面的代码：
```
import flash.events.Event; 
import fl.events.ComponentEvent; 
import fl.events.ColorPickerEvent; 
import fl.controls.RadioButtonGroup; 
 
var rbGrp:RadioButtonGroup = RadioButtonGroup.getGroup("fontRbGrp"); 
rbGrp.addEventListener(MouseEvent.CLICK, rbHandler); 
txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler); 
msgCb.addEventListener(Event.CHANGE, cbHandler);
```
前三行导入应用程序使用的事件类。用户与组件之一进行交互时，会发生事件。接下来的五行为应用程序希望侦听的事件注册事件处理函数。用户单击 RadioButton 时发生 click 事件。用户在 ColorPicker 中选择其他颜色时发生 change 事件。用户从 ComboBox 的下拉列表选择其他问候时发生 change 事件。

第四行导入 RadioButtonGroup 类以便应用程序可以为一组 RadioButton 分配事件侦听器，而不是分别为每个按钮分配侦听器。
将下面一行代码添加到“动作”面板以创建 tf TextFormat 对象，应用程序使用此对象更改 TextArea 中文本的 size 和 color 样式属性。
```
var tf:TextFormat = new TextFormat();
```
添加下列代码以创建 rbHandler 事件处理函数。在用户单击其中一个 RadioButton 组件时，此函数处理 click 事件。
```
function rbHandler(event:MouseEvent):void { 
    switch(event.target.selection.name) { 
        case "smallRb": 
            tf.size = 14; 
            break; 
        case "largerRb": 
            tf.size = 18; 
            break; 
        case "largestRb": 
            tf.size = 24; 
            break; 
        } 
        aTa.setStyle("textFormat", tf); 
}
```
此函数使用 switch 语句检查 event 对象的 target 属性，以确定哪个 RadioButton 触发了事件。 currentTarget 属性包含触发事件的对象名称。根据用户单击的是哪个 RadioButton，应用程序将 TextArea 中文本的大小更改为 14、18 或 24 点。
添加下列代码以实现 cpHandler() 函数，此函数处理 ColorPicker 中的值的更改：
```
function cpHandler(event:ColorPickerEvent):void { 
    tf.color = event.target.selectedColor; 
    aTa.setStyle("textFormat", tf); 
}
```
此函数将 tf TextFormat 对象的 color 属性设置为 ColorPicker 中选定的颜色，然后调用 setStyle() 将此颜色应用到 aTa TextArea 实例中的文本。
添加下列代码以实现 cbHandler() 函数，此函数处理 ComboBox 中选择的更改：
```
function cbHandler(event:Event):void { 
    aTa.text = event.target.selectedItem.label; 
}
```
此函数只是将 TextArea 中的文本替换为 ComboBox 中选择的文本 ( event.target.selectedItem.label )。
选择“控制”>“测试影片”或按 Ctrl+Enter 编译代码，然后测试 Greetings 应用程序。

下面的部分向您演示如何使用外部的 ActionScript 类，以及其“库”中只有必需组件的 FLA 文件构建相同的应用程序。

使用外部类文件创建 Greetings2 应用程序：

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

打开一个新的 Flash 窗口。
选择“文件”>“保存”，将 Flash 文件命名为 Greetings2.fla ，然后单击“保存”按钮。
将下列各个组件从“组件”面板拖到“库”中：
- ColorPicker
- ComboBox
- RadioButton
- TextArea
  
  因为编译的 SWF 文件会使用所有资源，所以您需要将资源都添加到“库”中。将组件拖到“库”面板的底部。在您将这些组件添加到“库”中时，会自动添加其他资源（List、TextInput 和 UIScrollBox）。
在“属性”窗口中，为“文档类”键入 Greetings2 。

如果 Flash 显示警告“无法找到该文档类的定义”，请忽略该警告。您将按下面步骤定义 Greetings2 类。此类定义应用程序的主要功能。
保存 Greetings2.fla 文件。
选择“文件”>“新建”。
在“新建文档”对话框中，选择“ActionScript 文件”，然后单击“确定”。

打开一个新的脚本窗口。

在脚本窗口中添加下列代码：

package { 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.events.MouseEvent; 
    import flash.text.TextFormat; 
    import fl.events.ComponentEvent; 
    import fl.events.ColorPickerEvent; 
    import fl.controls.ColorPicker; 
    import fl.controls.ComboBox; 
    import fl.controls.RadioButtonGroup; 
    import fl.controls.RadioButton; 
    import fl.controls.TextArea; 
    public class Greetings2 extends Sprite { 
        private var aTa:TextArea; 
        private var msgCb:ComboBox; 
        private var smallRb:RadioButton; 
        private var largerRb:RadioButton; 
        private var largestRb:RadioButton; 
        private var rbGrp:RadioButtonGroup; 
        private var txtCp:ColorPicker; 
        private var tf:TextFormat = new TextFormat(); 
        public function Greetings2() {

脚本定义一个名为 Greetings2 的 ActionScript 3.0 类。脚本进行以下操作：

导入我们将要在文件中使用的类。通常情况下，您可以在代码中引用其他类时添加这些 import 语句，但为了简便起见，此示例将所有这些语句在一个步骤中导入。
声明变量以表示我们将要添加到代码中的组件对象的不同类型。另一个变量创建 tf TextFormat 对象。
为类定义构造函数 Greetings2() 。我们将这些行添加到此函数中，并按下列步骤向类添加其他方法。

选择“文件”>“保存”，将文件命名为 Greetings2.as ，然后单击“保存”按钮。

向 Greeting2() 函数添加下列代码行：

    createUI(); 
    setUpHandlers(); 
}

此函数现在应该如下所示：

public function Greetings2() { 
    createUI(); 
    setUpHandlers(); 
}

在 Greeting2() 方法的右括号后添加下列代码行：

private function createUI() { 
    bldTxtArea(); 
    bldColorPicker(); 
    bldComboBox(); 
    bldRadioButtons(); 
} 
private function bldTxtArea() { 
    aTa = new TextArea(); 
    aTa.setSize(230, 44); 
    aTa.text = "Hello World!"; 
    aTa.move(165, 57); 
    addChild(aTa); 
} 
private function bldColorPicker() { 
    txtCp = new ColorPicker(); 
    txtCp.move(96, 72); 
    addChild(txtCp); 
} 
private function bldComboBox() { 
    msgCb = new ComboBox(); 
    msgCb.width = 130; 
    msgCb.move(265, 120); 
    msgCb.prompt = "Greetings"; 
    msgCb.addItem({data:"Hello.", label:"English"});             
    msgCb.addItem({data:"Bonjour.", label:"Français"});             
    msgCb.addItem({data:"¡Hola!", label:"Español"});             
    addChild(msgCb); 
} 
private function bldRadioButtons() { 
    rbGrp = new RadioButtonGroup("fontRbGrp"); 
    smallRb = new RadioButton(); 
    smallRb.setSize(100, 22); 
    smallRb.move(155, 120); 
    smallRb.group = rbGrp; //"fontRbGrp"; 
    smallRb.label = "Small"; 
    smallRb.name = "smallRb"; 
    addChild(smallRb); 
    largerRb = new RadioButton(); 
    largerRb.setSize(100, 22); 
    largerRb.move(155, 148); 
    largerRb.group = rbGrp; 
    largerRb.label = "Larger"; 
    largerRb.name = "largerRb"; 
    addChild(largerRb); 
    largestRb = new RadioButton(); 
    largestRb.setSize(100, 22); 
    largestRb.move(155, 175); 
    largestRb.group = rbGrp; 
    largestRb.label = "Largest"; 
    largestRb.name = "largestRb"; 
    addChild(largestRb); 
}

这些行执行下列操作：

实例化应用程序中使用的组件。
设置每个组件的大小、位置和属性。
使用 addChild() 方法将各个组件添加到舞台上。

在 bldRadioButtons() 方法的右括号后，添加 setUpHandlers() 方法的下列代码：

private function setUpHandlers():void { 
    rbGrp.addEventListener(MouseEvent.CLICK, rbHandler); 
    txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler); 
    msgCb.addEventListener(Event.CHANGE, cbHandler); 
} 
private function rbHandler(event:MouseEvent):void { 
    switch(event.target.selection.name) { 
        case "smallRb": 
            tf.size = 14; 
            break; 
        case "largerRb": 
            tf.size = 18; 
            break; 
        case "largestRb": 
            tf.size = 24; 
            break; 
    } 
    aTa.setStyle("textFormat", tf); 
} 
private function cpHandler(event:ColorPickerEvent):void { 
    tf.color = event.target.selectedColor; 
    aTa.setStyle("textFormat", tf); 
} 
private function cbHandler(event:Event):void { 
    aTa.text = event.target.selectedItem.data; 
} 
} 
}

这些函数定义组件的事件侦听器。

选择“文件”>“保存”以保存文件。
选择“控制”>“测试影片”或按 Ctrl+Enter 编译代码，然后测试 Greetings2 应用程序。

开发和运行后续示例

在开发及运行 Greetings 应用程序后，您应当已具备运行本书中介绍的其他代码示例所需的基本知识。每个示例中相关的 ActionScript 3.0 代码都会高亮显示并加以讨论，而您应当能够将本书中的每个示例剪切并粘贴到 FLA 文件中，进行编译，然后加以运行。