用户指南 取消(C)

创建 HTML 扩展

  1. Adobe Animate 用户指南
  2. Animate 简介
    1. Animate 新增功能
    2. 图示术语表
    3. Animate 系统要求
    4. Animate 键盘快捷键
    5. 在 Animate 中使用多种文件类型
  3. 动画
    1. Animate 动画基础知识
    2. 如何在 Animate 中使用帧和关键帧
    3. 在 Animate 中使用逐帧动画
    4. 如何在 Animate 中使用传统补间动画
    5. 画笔工具
    6. 运动辅助线
    7. 补间动画和 ActionScript 3.0
    8. 关于补间动画
    9. 补间动画
    10. 创建补间动画
    11. 使用属性关键帧
    12. 用补间对位置进行动画处理
    13. 如何使用动画编辑器编辑补间动画
    14. 编辑补间动画的运动路径
    15. 处理补间动画
    16. 添加自定义缓动
    17. 创建和应用动画预设
    18. 设置动画的补间范围
    19. 处理另存为 XML 文件的补间动画
    20. 补间动画与传统补间
    21. 形状补间
    22. 在 Animate 中使用骨骼工具动画
    23. 在 Animate 中处理角色 Rig
    24. 如何在 Adobe Animate 中使用遮罩层
    25. 如何在 Animate 中使用场景
  4. 交互性
    1. 如何使用 Animate 创建按钮
    2. 将 Animate 项目转换为其它文档类型格式
    3. 在 Animate 中创建和发布 HTML5 Canvas 文档
    4. 在 Animate 中通过代码片段添加交互性
    5. 创建自定义 HTML5 组件
    6. 使用 HTML5 Canvas 中的组件
    7. 创建自定义组件:示例
    8. 自定义组件的代码片段
    9. 最佳做法 - 使用 Animate 制作广告
    10. 虚拟现实创作和发布
  5. 工作区和工作流
    1. 创建和管理画笔
    2. 在 HTML5 Canvas 文档中使用 Google 字体
    3. 使用 Creative Cloud Libraries 和 Adobe Animate
    4. 使用 Animate 的舞台和工具面板
    5. Animate 工作流程和工作区
    6. 在 HTML5 Canvas 文档中使用 Web 字体
    7. 时间轴和 ActionScript
    8. 使用多个时间轴
    9. 设置首选参数
    10. 使用 Animate 创作面板
    11. 使用 Animate 创建时间轴图层
    12. 导出移动应用程序和游戏引擎的动画
    13. 移动和复制对象
    14. 模板
    15. 在 Animate 中查找和替换
    16. 撤消、重做和历史记录面板
    17. 键盘快捷键
    18. 如何在 Animate 中使用时间轴
    19. 创建 HTML 扩展
    20. 图像和动画 GIF 的优化选项
    21. 图像和 GIF 的导出设置
    22. Animate 中的资源面板
  6. 多媒体与视频
    1. 在 Animate 中变形和合并图形对象
    2. 在 Animate 中创建并使用元件实例
    3. 图像描摹
    4. 如何在 Adobe Animate 中使用声音
    5. 导出 SVG 文件
    6. 创建用于 Animate 中的视频文件
    7. 如何在 Animate 中添加视频
    8. 使用视频提示点
    9. 使用 Animate 绘制和创建对象
    10. 改变线条和形状
    11. Animate CC 中的笔触、填充和渐变
    12. 使用 Adobe Premiere Pro 和 After Effects
    13. Animate CC 中的颜色面板
    14. 使用 Animate 打开 Flash CS6 文件
    15. 在 Animate 中使用传统文本
    16. 向 Animate 中置入图稿
    17. 在 Animate 中导入的位图
    18. 3D 图形
    19. 在 Animate 中使用元件
    20. 使用 Adobe Animate 绘制线条和形状
    21. 在 Animate 中使用库
    22. 导出声音
    23. 在 Animate CC 中选择对象
    24. 在 Animate 中使用 Illustrator AI 文件
    25. 使用喷涂刷工具应用图案
    26. 应用混合模式
    27. 排列对象
    28. 使用“命令”菜单自动处理任务
    29. 多语言文本
    30. 在 Animate 中使用摄像头
    31. 将 Animate 与 Adobe Scout 一起使用
    32. 使用 Fireworks 文件
    33. 图形滤镜
    34. 声音和 ActionScript
    35. 绘制首选参数
    36. 用钢笔工具绘图
  7. 平台
    1. 将 Animate 项目转换为其它文档类型格式
    2. 自定义平台支持
    3. 在 Animate 中创建和发布 HTML5 Canvas 文档
    4. 创建和发布 WebGL 文档
    5. 如何打包 AIR for iOS 应用程序
    6. 发布 AIR for Android 应用程序
    7. 发布用于桌面的 Adobe AIR
    8. ActionScript 发布设置
    9. 最佳做法 - 管理应用程序中的 ActionScript
    10. 如何在 Animate 中使用 ActionScript
    11. 最佳做法 - 辅助功能指南
    12. Animate 工作区中的辅助功能
    13. 编写和管理脚本
    14. 启用自定义平台支持
    15. 自定义平台支持概述
    16. 创建辅助内容
    17. 使用自定义平台支持插件
    18. 调试 ActionScript 3.0
    19. 启用自定义平台支持
  8. 导出和发布
    1. 如何从 Animate CC 导出文件
    2. OAM 发布
    3. 导出 SVG 文件
    4. 使用 Animate 导出图形和视频
    5. 发布 AS3 文档
    6. 导出移动应用程序和游戏引擎的动画
    7. 导出声音
    8. 导出 QuickTime 视频文件
    9. 使用 ActionScript 控制外部视频播放
    10. 最佳做法 - 移动设备内容创建技巧
    11. 最佳做法 - 视频惯例
    12. 最佳做法 - SWF 应用程序创作指南
    13. 最佳做法 - 构造 FLA 文件
    14. 在 Animate 中优化 FLA 文件的最佳做法
    15. ActionScript 发布设置
    16. 指定 Animate 的发布设置
    17. 导出放映文件
    18. 导出图像和动画 GIF
    19. HTML 发布模板
    20. 使用 Adobe Premiere Pro 和 After Effects
    21. 快速分享和发布动画

使用 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. 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.addEventListener(&quot;com.adobe.events.flash.selectionChanged&quot;, CallbackFunction)

在上面的代码片段中:

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

登录到您的帐户