Adobe Animate CC(以前名为 Flash Professional CC)和 Flex® 可按多种方式结合使用,包括在 Animate 中创建用于 Flex® 的自定义图形和组件。下列教程演示了多种将 Animate® 和 Flex® 结合使用的方式。

注意:Animate 和 Flash Builder 之间的“设计视图”工作流程已弃用。若从 Flash Builder 4.6 启动此工作流程,将在 Animate 中引发异常。

Flash Builder 的部分工作流程可能无法与最新版本的 Animate CC(2017 及更高版本)互操作。 

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

准备事项

要启用这些 Animate/Flash Builder 工作流程,请确保满足下列条件:

  • 已安装 Flash CS5 和 Flash Builder 4。

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

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

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

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

要在 Animate 中测试或调试在 Flash Builder 4 中编辑的文件,请执行下列操作:

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

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

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

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

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

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

    新建文档
    新建文档
  2. 从屏幕顶部的选项卡(如“角色动画”、“社交”、“游戏”、“教育”、“广告”、“Web”和“高级”)中选择目标。在“新建文档”对话框中,选择 ActionScript 3.0 类或 ActionScript 3.0 接口。

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

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

要在 Flash Builder 中打开并编辑来自 Animate 的 AS 文件,请执行下列操作:

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

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

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

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

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

创建 Flex 组件

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

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

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

有关结合使用 Flex 和 Animate 的详细信息,请参阅 Adobe 网站上的 Flex 文档,网址为:www.adobe.com/go/learn_flexresources

在 Animate 中创建 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。安装组件工具包之前,请务必退出 Animate。有关安装 Adobe Extension Manager 扩展的信息,请参阅 www.adobe.com/go/learn_extension_manager_cn

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

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

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

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

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

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

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

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

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

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

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

    • 从 Animate 中复制 SWC 文件,将其粘贴到 Flex 项目的 bin 文件夹中。

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

使用 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

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

其他资源

下列资源提供有关将 Animate 与 Flash Builder 集成的更多信息和示例:

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略