创建 HTML 扩展

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

创建 HTML 扩展

要创建 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. 窗口详细信息使用这些选项自定义扩展窗口的类型和大小。
      
      单击下一步。
5. 您可以在接下来的几个屏幕中进一步自定义扩展的引用库：
   1. CEP Interface Library（CEP 接口库）提供与主机应用程序实现交互的功能。 此选项默认为选中。
   2. Frameworks（框架）用于常见的 Javascript 库，如 jQuery。
      
   3. Services（服务）包括 Adobe IPC Communication Toolkit，用于实现 Adobe 应用程序、扩展及外部应用程序之间的通信。 它通过CEP服务管理器提供消息传送协议，该服务管理器用作Creative Cloud通信中心。
      
      单击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.addEventListener("com.adobe.events.flash.selectionChanged"， CallbackFunction)

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