创建 HTML 扩展

使用 HTML 扩展可以对 Animate 进行功能扩展。Adobe Extension Builder 3 允许您创建用于 Animate 的 HTML 扩展。在此之前，您只能使用 SWF 扩展对 Animate 进行功能扩展。不过，Adobe Extension Builder 3 允许您为 Creative Cloud 应用程序创建 HTML 扩展。要开始使用，您需要下载并安装 Eclipse 和 Extension Builder 3.0。

要创建 HTML 扩展，可执行以下操作：

1. 启动 Eclipse。 
2. 在 New Project（新建项目）向导中，创建一个新的应用程序扩展项目。为该项目提供一个有意义的名称，然后单击 Next（下一步）。
3. 在 New Adobe Application Extension Project（新建 Adobe 应用程序扩展项目）面板中，选择“Adobe Animate”。单击“下一步”。
4. 使用以下可用选项配置扩展：
   
   1. Bundle ID（绑定 ID）用于唯一标识扩展。
   2. Menu name（菜单名称）是扩展的显示名称。菜单名称显示在 Animate 的“窗口”>“扩展”菜单中。
      
   3. Window Details（窗口详情）这些选项用于自定义扩展的窗口类型和大小。
      
      单击 Next（下一步）。
5. 您可以在接下来的几个屏幕中进一步自定义扩展的引用库：
   1. CEP Interface Library（CEP 接口库）提供与主机应用程序实现交互的功能。此选项默认为选中。
   2. Frameworks（框架）用于常见的 Javascript 库，如 jQuery。
      
   3. Services（服务）包括 Adobe IPC Communication Toolkit，用于实现 Adobe 应用程序、扩展及外部应用程序之间的通信。它作为 Creative Cloud 通信的一个中枢，通过 CEP Service Manager 提供一个消息传送协议。
      
      单击 Finish（完成）将创建一个新的 Eclipse 项目。

在 Animate 中调试扩展

可以直接从 Eclipse 运行扩展：

1. 右键单击项目，并选择 Run As（运行作为）> Adobe Flash Extension（Adobe Flash 扩展）。这将启动 Animate。
2. 在 Animate 中，选择“窗口”>“扩展”菜单项。项。这将打开扩展面板。

导出扩展

要分发扩展，需要将其作为一个 ZXP 包导出。之后在 Creative Cloud 应用程序上由 Adobe Extension Manager 下载并运行该 ZXP 包：

1. 在 Eclipse 中，切换到 Script Explorer 视图，右键单击项目并选择 Export（导出）>Adobe Extension Builder 3 > Application Extension（应用程序扩展）。这将显示 Export Wizard（导出向导）。
2. 您必须具有证书才能对扩展包进行签名。浏览到现有证书，或单击 Create（创建），创建一个新的证书。
3. 单击 Finish（完成）。
4. 导出完成后，会在项目文件夹下找到该扩展的 ZXP 包，便可用来分发了。

注意：要安装扩展，需要访问 <extension>\.staged-extension\CSXS\manifest.xml 文件并更新 host 标记，以便将 Animate 的最低版本设为 13.0。

在 Animate 中安装扩展

您可以使用 Adobe Extension Manager，在 Animate 中安装 HTML 扩展。HTML 扩展可帮助您扩展 Animate 的功能。

向 HTML 扩展添加交互性

通过添加控件、定义行为，您可以构建一个 HTML 扩展与 Animate 实现交互，然后获取主机（包括 Animate 和操作系统）环境的有关信息。这可以通过两种方式来实现：

1. 使用 CEP 接口库：CEP 接口库提供一些用于获取主机环境信息的 API 和一个允许您运行 JSFL 的 eval 脚本。要了解有关 CEP 接口库的更多信息，可在 Eclipse 中打开 Help（帮助）> Help Contents（帮助内容）> Adobe Extension Builder > References（参考）。
2. 使用 JSFL：可以使用 CEP 接口库的 Eval 脚本 API 来运行 JSFL 脚本。
   
   除 JSFL 外，Animate 中的 CEP 架构还提供以下事件，这些事件仅可以用在 HTML 面板中。
   • com.adobe.events.flash.documentChanged：当前活动文档发生改变时触发。
   • com.adobe.events.flash.timelineChanged：对当前活动文档的时间轴进行更改时触发。
   • com.adobe.events.flash.documentSaved：保存当前文档时触发。
   • com.adobe.events.flash.documentOpened：打开新文档时触发。
   • com.adobe.events.flash.documentClosed：关闭当前活动文档时触发。
   • com.adobe.events.flash.documentNew：创建新文档时触发。
   • com.adobe.events.flash.layerChanged：选择另外的图层时触发。
   • com.adobe.events.flash.frameChanged：选择另外的帧时触发。
   • com.adobe.events.flash.selectionChanged：选择舞台上另外的对象时触发。
   • com.adobe.events.flash.mouseMove：在舞台上移动鼠标时触发。

示例

在上面的代码片段中：

• csinterface：CEP 接口库的对象。
• com.adobe.events.flash.selectionChanged：对象选择发生更改时触发的事件。也可以使用上述任一事件。
• CallbackFunction：侦听所触发事件的方法。