第一部分：Flash Builder 4.7 简介

什么是 Flash Builder 4.7？

Flash Builder 4.7（原名 Flex Builder）是一个基于 Eclipse 的集成开发环境，专门用于使用 ActionScript 3.0 和 MXML（一种基于 XML 的标记语言）构建应用程序，它的核心是 Flex Framework，这是一个提供了大量预构建 UI 组件（如按钮、数据网格、图表等）的开源框架。

• 核心语言:
  • ActionScript 3.0 (AS3): 一种功能强大的面向对象编程语言，用于处理逻辑、数据、动画和交互。
  • MXML: 一种声明式语言，用于布局用户界面，它让开发者可以像写 HTML 一样快速构建复杂的界面，并与 AS3 代码紧密集成。
• 运行时环境:
  • Adobe Flash Player: 主要用于开发在浏览器中运行的 SWF 应用程序。
  • Adobe AIR: 用于开发跨平台的桌面应用程序（Windows, macOS, Linux）和移动应用程序（iOS, Android）。

谁还在使用 Flash Builder 4.7？

• 学习 ActionScript 3.0 的学生和开发者：它是学习 AS3 的标准工具之一。
• 维护遗留项目的工程师：许多企业系统（如后台管理界面、数据可视化应用）是用 Flex/Flash Builder 开发的，需要维护和更新。
• 特定领域的开发者：一些科学计算、模拟和数据可视化的应用仍然基于 Flex。

第二部分：环境搭建

下载和安装

由于 Adobe 已停止官方支持，你需要从可靠的第三方网站下载安装包，一个常见的来源是 OldVersion.com。

1. 下载:

   • 访问 OldVersion.com，搜索 "Adobe Flash Builder"。
   • 下载 Flash Builder 4.7 Premium for Windows 的安装包，通常它是一个 .exe 文件。
   • 注意: 你可能需要一个有效的序列号来激活，对于学习，可以寻找社区提供的试用版或序列号。

2. 安装:

   • 运行下载的 .exe 文件。
   • 按照安装向导的提示进行操作,安装过程相对简单，一路点击“下一步”即可。
   • 安装完成后,启动 Flash Builder。

3. 首次运行与配置:

   
   （图片来源网络，侵删）
   • 首次启动时,Flash Builder 会进行一些初始化配置。
   • 你可以选择工作空间,工作空间是存放你所有项目和设置的地方，建议创建一个专门的文件夹，D:\FlashBuilder_Workspace。

第三部分：创建你的第一个项目——“Hello, World!”

我们将创建一个简单的 Flex 项目，并在屏幕上显示 "Hello, Flash Builder 4.7!"。

步骤 1：创建新项目

1. 启动 Flash Builder。
2. 在欢迎界面,点击 "File" -> "New" -> "Flex Project"。
3. 在弹出的对话框中：
   • Project name: 输入 HelloWorld。
   • Application type: 选择 "Web (runs in Adobe Flash Player)"。
   • Output folder: 保持默认 HelloWorld/bin-debug。
   • 点击 "Finish"。

Flash Builder 会为你创建一个基本的项目结构，并自动打开主应用程序文件 HelloWorld.mxml。

步骤 2：编辑 MXML 代码

打开 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/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- 将非可视元素（如服务、值对象）放在此处 -->
    </fx:Declarations>
</s:Application>

• <s:Application>: 这是 Flex 应用的根容器，所有其他 UI 元素都必须放在它里面。
• xmlns:fx, xmlns:s, xmlns:mx: 这些是命名空间，定义了从哪里引入组件。
  • fx: 用于 MXML 的核心语言功能（如脚本、声明）。
  • s: Spark 组件库，是 Flex 4 引入的现代、可皮肤化的组件集（推荐使用）。
  • mx: Halo 组件库，是 Flex 3 及更早版本使用的经典组件集。

我们在 <s:Application> 标签内添加一个标签（Label）组件来显示文本。

<?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/mx" minWidth="955" minHeight="600">
    <!-- 添加一个 Label 组件 -->
    <s:Label text="Hello, Flash Builder 4.7!"
             fontSize="24"
             horizontalCenter="0"
             verticalCenter="0"/>
    <fx:Declarations>
        <!-- 将非可视元素（如服务、值对象）放在此处 -->
    </fx:Declarations>
</s:Application>

• <s:Label>: 这是一个文本标签组件。
• text: 属性，设置标签显示的文本内容。
• fontSize: 属性，设置字体大小。
• horizontalCenter="0" 和 verticalCenter="0": 这是 Spark 布局的一种方式，表示将此标签在父容器中水平和垂直居中。

步骤 3：运行项目

1. 在菜单栏选择 "Run" -> "Run HelloWorld"（或者直接按快捷键 Ctrl + F11）。
2. Flash Builder 会开始编译你的项目。
3. 编译成功后,会自动启动一个默认的浏览器（或 Flash Player 独立播放器），显示你的应用程序。

你应该能看到一个居中的、字体较大的 "Hello, Flash Builder 4.7!" 文本，恭喜你，你已经成功创建了第一个 Flex 应用！

第四部分：核心概念

MXML vs. ActionScript

• MXML (View): 负责 布局 和 外观，它像 HTML 一样，声明了界面由哪些组件组成以及它们如何排列，一个登录表单的界面。
• ActionScript (Controller/Model): 负责 逻辑 和 数据，它处理用户的点击事件、与服务器通信、数据验证、动画控制等，点击“登录”按钮后，验证用户名和密码，然后发送到服务器。

如何在 MXML 中嵌入 ActionScript？

在 <fx:Declarations> 标签内，你可以使用 <fx:Script> 标签来编写 ActionScript 代码。

示例：添加一个按钮，点击后改变标签文本

1. 修改 HelloWorld.mxml，添加一个按钮和一个 fx:Script 块。

<?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/mx" minWidth="955" minHeight="600">
    <!-- 引入一个事件类，方便使用 click 事件 -->
    <fx:Script>
        <![CDATA[
            import spark.events.MouseEvent;
            // 定义一个函数，用于处理按钮的点击事件
            private function onButtonClick(event:MouseEvent):void
            {
                myLabel.text = "Button was clicked!";
                myLabel.color = 0xFF0000; // 改变文字颜色为红色
            }
        ]]>
    </fx:Script>
    <s:VGroup horizontalAlign="center" verticalAlign="middle" gap="20">
        <s:Label id="myLabel" text="Hello, Flash Builder 4.7!" fontSize="24"/>
        <s:Button label="Click Me" click="onButtonClick(event)"/>
    </s:VGroup>
</s:Application>

代码解释:

• <s:VGroup>: 一个垂直布局的容器，里面的子组件会垂直排列。
• id="myLabel": 为 Label 组件指定一个唯一的 ID，这样我们就可以在 AS3 代码中通过 myLabel