Adobe Flash Professional 和 Flex? 可按多种方式结合使用，包括在 FlashProfessional 中创建用于 Flex 的自定义图形和组件。下列教程演示了多种将 Flash 和 Flex 结合使用的方式。

注：   （仅限 Flash Professional CC）Flash Professional 和 Flash Builder 之间的“设计视图”工作流已弃用。若从 Flash Builder 4.6 启动此工作流，将在 Flash Pro 中引发异常。

  • 视频：Flash Professional CS5.5 - 使用 Flash Builder (2:52) (Adobe TV)

  • 教程：在 Flash Pro 和 Flash Builder 之间共享项目 (Adobe.com)

  • 视频：使用 Flash CS3 创建自定义 Flex 组件 (7:10)

  • 视频：在 Flash 中创建 Flex 容器 (4:33)

  • 视频：创建 Flex 应用程序的自定义外观 (4:58)

  • 视频：Flex 组件中的自定义 Flash 图形 (6:42)

  • 视频：在 Flash 中使用 Flex Web 服务组件 (8:53)

  • 视频：在 Flex 应用程序中使用滤镜并对其进行动画处理 (4:35)

  • 视频：了解 Flash 计时器 (4:28)

使用 Flash Professional 和 Flash Builder 编辑和调试 ActionScript

Flash Professional CS5 增强了 Flash Pro 和 Flash Builder 4 之间的工作流程。

启用的工作流程包括：

  • 在 Flash Builder 4 中编辑 ActionScript 3.0 并在 Flash Pro CS5 中测试、调试或发布。

  • 从 Flash Professional 中启动要在 Flash Builder 4 中编辑的 ActionScript 3.0 文件。

www.adobe.com/go/lrvid5303_fl_cn 上提供了有关 Flash Pro/Flash Builder 工作流的视频教程。

准备事项

要启用这些 Flash Pro/Flash Builder 工作流程，请确保满足下列条件：

  • 已安装 Flash Professional CS5 和 Flash Builder 4。

  • 要从 Flash Builder 启动 FLA 文件，必须在“包资源管理器”面板中为您的项目分配 Flash Professional 项目性质。

    有关在 Flash Builder 中分配项目性质的详细信息，请参阅 Flash Builder 帮助。

  • 要从 Flash Builder 启动 FLA 文件，您的项目中必须分配一个 FLA 文件，用于在此项目的 Flash Professional 属性中测试和调试。

其他资源

  • 教程：在 Flash Builder 中创建 Flash Professional 项目 - 第 1 部分 (flashauthoring.blogspot.com)

  • 教程：在 Flash Builder 中创建 Flash Professional 项目 - 第 2 部分 (flashauthoring.blogspot.com)

  • 教程：使用 Flash Builder 4 调试器调试 Flash Professional 项目 (flashauthoring.blogspot.com)

在 Flash Pro 中测试、调试和发布 Flash Builder 中的文件

要在 Flash Pro 中测试或调试在 Flash Builder 4 中编辑的文件，请执行下列操作：

  • 从 Flash Builder 开发透视图中，选择“运行”>“测试影片”或“运行”>“调试影片”。请注意，每个菜单项旁边都有一个 Flash Pro 图标。SWF 窗口或调试会话关闭后，焦点将返回到 Flash Builder，除非在与此项目关联的 FLA 文件内的帧脚本中出现编译器错误。所有错误的相关信息都将发送到 Flash Builder 中的“错误”面板。

要发布与 Flash Builder 中当前项目关联的 FLA 文件，请执行下列操作：

  • 从 Flash Builder 开发透视图中，选择“项目”>“发布影片”。请注意此菜单命令旁边的 Flash Pro 图标。

在 Flash Builder 中编辑来自 Flash Pro 的 AS 文件

要创建新的 ActionScript 3.0 类或接口并分配 Flash Builder 作为编辑器，请执行下列操作：

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

  2. 在“新建文档”对话框中，选择 ActionScript 3.0 类或 ActionScript 3.0 接口。

  3. 在“创建 ActionScxript 3.0”对话框中，选择 Flash Builder 作为创建文件的应用程序并单击“确定”。Flash Builder 随即打开。

  4. 在 Flash Builder 中，选择要与 ActionScript 文件关联的 FLA 文件或 XFL 文件，并单击“完成”。

要在 Flash Builder 中打开并编辑来自 Flash Pro 的 AS 文件，请执行下列操作：

  1. 在“库”面板中，右键单击与此类或此接口关联的元件，并选择“属性”。

  2. 在“元件属性”对话框中，单击“编辑类定义”。

  3. 在出现的“编辑 ActionScript 3.0”对话框中，请验证分配给 AS 文件的编辑器是 Flash Builder，并单击“确定”。

    如果没有分配 Flash Builder 来编辑该文件，则选择 Flash Builder 作为编辑此类文件的应用程序，并单击“确定”。

    Flash Builder 随即打开以编辑此文件。

创建 Flex 组件

在 Adobe? Flash? Professional 中，您可以创建在 Adobe? Flex? 应用程序中用作组件的内容。这类内容可以包括可视元素和 Adobe? ActionScript? 3.0 代码。

在 FlashProfessional 中创建用于 Flex 的组件，这可帮助您利用 FlashProfessional 灵活的图形设计功能，同时发挥 Flex 的功能。

要在 FlashProfessional 中创建 Flex 组件，必须为 FlashProfessional 安装 Flex 组件工具包。可使用 Adobe Extension Manager 来安装该组件工具包。组件工具包的某些版本可能不支持 Adobe? Flash? Professional 的所有功能，因此请务必从 www.adobe.com/go/flex_ck_cn 下载组件工具包的最新版本。

有关结合使用 Flex 和 FlashProfessional 的详细信息，请参阅 Adobe 网站上的 Flex 文档，网址为：www.adobe.com/go/learn_flexresources_cn。

在 Flash 中创建 Flex 组件：

  1. 确保已安装 Adobe Extension Manager。若要下载 Extension Manager，请访问 Extension Manager 下载页，网址为：www.adobe.com/go/extension_manager_dl_cn。

    默认情况下，Extension Manager 随 Adobe Creative Suite 应用程序一起安装。

  2. 下载并安装 Flex 组件工具包，网址为：www.adobe.com/go/flex_ck_cn。安装组件工具包之前，请务必退出 FlashProfessional。有关使用 Adobe Extension Manager 来安装扩展的信息，请访问 www.adobe.com/go/learn_extension_manager_cn。

  3. 启动 FlashProfessional。“命令”菜单中将出现两个新命令，即“将元件转换为 Flex 组件”和“将元件转换为 Flex 容器”。

  4. 在 FlashProfessional 中，创建一个影片剪辑元件，在其中包含要用在 Flex 组件中的插图和 ActionScript 3.0 代码。在转换为 Flex 组件之前，必须将这些内容包含在影片剪辑元件中。

  5. 在将影片剪辑转换为 Flex 组件之前，请确保它满足下列要求，以便与 Flex 兼容：

    • FLA 文件的帧速率应为 24 fps，且应匹配将使用此组件的所有 Flex 项目的帧速率。

    • 影片剪辑中的注册点应位于 0, 0 点。

      注：  若要确保影片剪辑中所有内容的注册点均为 0, 0，请单击时间轴底部的“编辑多个帧”按钮，选择影片剪辑时间轴中的所有帧，选择所有帧中的所有内容，然后在属性检查器中将其移至 0, 0 点。

  6. 在“库”面板中选择影片剪辑，然后选择“命令”>“将元件转换为 Flex 组件”。

    FlashProfessional 会将影片剪辑转换为 Flex 组件，将其在库中的图标更改为 Flex 图标，然后将 FlexComponentBase 类编译剪辑导入库中。FlashProfessional 将 FlexComponentBase 嵌入下一步中创建的 Flex 组件 SCW 文件。

    在 FlashProfessional 转换影片剪辑时，请注意在“输出”面板中显示的进度消息。

  7. 选择“文件”>“发布”，创建包含编译 Flex 组件的 SWC 文件。FlashProfessional 还会从主 FLA 文件创建一个 SWF 文件，但您可以选择忽略该 SWF 文件。现在，发布的组件 SWC 文件可以在 Flex 中使用了。

  8. 若要在 Flex 中使用 SWC 文件，请执行下列任一操作：

    • 从 FlashProfessional 中复制 SWC 文件，然后粘贴到 Flex 项目的 bin 文件夹中。

    • 将 SWC 文件添加到 Flex 项目的库路径中。有关详细信息，请参阅 Flex Builder 文档，网址为：www.adobe.com/go/learn_flexresources_cn。

使用 Flex 元数据

如果要编写在 Flex 中使用的 ActionScript 3.0 代码，可以将元数据置入代码，从而在包含 ActionScript 代码的任何已发布 SWF 中嵌入外部文件。这些 [Embed] 元数据声明通常用于将图像文件、字体、单个元件或其他 SWF 文件嵌入 SWF。

请记住，元数据是“关于数据的数据”。添加到 ActionScript 的元数据应位于应用该元数据的代码行的前一行。这样，编辑器在编译元数据行之后的代码行时，会参考该元数据。

例如，若要嵌入存储在 ActionScript 文件上一级目录中的图像 button_up.png，应使用以下 ActionScript：

[Embed("../button_up.png")]

private var buttonUpImage:Class;

[Embed] 元数据标记指示编辑器将名为 button_up.png 的文件嵌入 SWF 文件，且该文件应与名为 buttonUpImage 的变量进行关联。

有关在 Flex 中使用元数据嵌入资源的详细信息，请参阅《Flex 3 开发人员指南》中的“嵌入资源”，网址为：www.adobe.com/go/learn_flexresources_cn。

如果使用了需要 Flex SDK 的功能（如 [Embed] 元数据），FlashProfessional 会在编译时提示您将 Flex.SWC 文件添加到 FLA 文件的库路径中。Flex.SWC 文件包含支持 Flex 元数据所需的编译类。单击对话框中的“更新库路径”，将 Flex.SWC 添加到库路径中。也可以过后在 ActionScript 发布设置中，将 Flex.SWC 文件添加到库路径。

,