用户指南 取消(C)

创建自定义组件:示例

  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. 快速分享和发布动画

阅读本文可对一个 HTML5 自定义组件示例有所了解。

本文说明如何创建自定义组件。第一个示例说明图像组件(同时随 Animate CC 提供)的构成、框架的内容以及开发过程中涉及的步骤。第二个示例说明如何包装任一现有的 UI 组件(如 jQueryUI)并将其导入 Animate CC 中。

  1. 创建 DOM 图像组件

    创建一个名为“My Components”的类别。 

    a. 首先在 <HTML5Components> 文件夹下创建一个名为 mycomponents 的文件夹

    b. 下载附加的 myimage.zip 文件并解压缩

        mycomponents 文件夹下的内容。

    下载

    c. 重新启动 Animate。

mycomponents 文件夹内部的目录结构
mycomponents 文件夹内部的目录结构

现在,您应当可以在“组件”文件夹中看到一个名为“My Components”的新类别,在该类别下看到一个名为“My Image”的新组件。您可以将其拖放到舞台上,设置图像源属性,然后发布影片,便可以看到这个自定义组件生效了。 

组件元数据 - components.js

Components.js 代码
Components.js

请注意,该类别设置为 CATEGORY_ MY_ COMPONENTS。各属性的名称使用的键也类似。这些键用于类别名称的本地化字符串。如果打开 locale 文件夹中的 strings.json,将看到以下条目。

注意:

编辑此文件时最常见的错误是数组最后一个元素的尾部加上了不必要的逗号。

类别详细信息
类别详细信息

icon 字段的值设为 Sp_Image_Sm。如果转至 assets 文件夹,您会看到下面这两个 png 文件的前缀都是 Sp_Image_Sm。

icon 字段的值
icon 字段的值

它们分别是深色 UI 图标和浅色 UI 图标。

components.json 中 source 字段的值设为 src/myimage.js。 

(function($) {    

// Register a component with the className: my.Image,
 // and prototype with the following overrides 
 // getCreateOptions
 // getCreateString
 // getProperties
 // getAttributes
    $.anwidget("my.Image", {
         options: {
   'visible': true,
   'position': 'absolute'
         },
  _props: ["left", "top", "width", "height", "position", "transform-origin", "transform"],
  
_attrs: ["id", "src", "alt", "class", "border"],
  
// Return a unique ID with the prefix image
  // _widgetID is a global declared in anwidget
  // This id is used only if the user has not set any instance ID for the component in Animate CC
  // Otherwise the user configured name is used
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': "image" + _widgetID++ });
  },
  
// Return the string for creating the DOM element
  // For image we just need to create the <img> tag
  getCreateString: function() {
   return "<img>";
  },
  
// Set of configurable properties
  getProperties: function() {
   return this._props;
  },
  
// Set of configurable attributes
  getAttributes: function() {
   return this._attrs;
  }    
 });   
})(jQuery);

参照代码中的注释会更容易理解。 

您可以随意查看随 Animate 提供的其他组件的源代码。大多数情况下,您可以从其中一个着手,然后根据自己的需要进行配置。

包装 jQuery-UI 组件

这部分说明如何包装 jQuery-UI 小部件并在 Animate CC 中使用它。包装任何其他 UI 框架中的任何其他现有组件时,均可使用同样的概念。

我们来了解一下 Animate CC 附带的打包 DatePicker 组件,它是一个 jQuery UI 小部件。下载并解压缩下面这个归档文件的内容,将它作为参考。

下载

将内容解压缩后的结构
将内容解压缩后的结构

名为 jquery-ui-1.12.0 的文件夹是 jQuery UI 框架的源,其中包含原始 DatePicker 小部件及其图像和 css 等资源。像任何其他 HTML5 组件一样,可以在 Animate CC 中包装并使用这些组件。这仅对本地预览是必需的,在发布设置中使用“托管库”时,可以选择是否使用 cdn 下载相关的源。 

Components.js 代码
Components.js

有两个默认的相关项,jQuery 和 anwidget.js。由于 anwidget.js 不在 CDN 中,因此对同一资源没有任何 CDN 条目。

之后的条目用于从 jquery UI 加载 datepicker 小部件所需的其他资源。同样,如果要包装任何其他库中的任何小部件,可以为同一资源指定一组相关项。这些相关项将在组件初始化之前下载。

在 properties 部分中,我们只提供了一个名为 label 的属性,它绑定到 datepicker 组件的 label 属性。同样,我们还可以提供其他属性以便用户能够在 Animate 创作环境中进行配置。在运行时,每个这样的属性将作为实例的 options 数组中的一个键/值对来提供。我们可以提取出配置好的值然后在运行时应用它。

主源文件:src/datepicker.js
主源文件:src/datepicker.js

与本示例不同的部分

  1. getCreateString:

    来自 jQuery-UI 的 datepicker 小部件接受这样一个输入文本元素,然后在运行时将其转换为一个 datepicker 元素。因此,我们会相应地初始化 DOM。

  2. attach:

    对于这个小部件需要覆盖此函数。每当有元素附加到 DOM 时,便会调用此 API。但是,由于下层运行时(本例为 createjs)的工作方式,此 API 在某个帧范围内可能会被多次调用。

    我们会记住下层元素的附加状态,然后调用基类的附加 API(使用 this._superApply(arguments))。如果这是第一次将元素附加到父 DOM,我们将使用下层的 jQuery-UI 小部件的调用,将组件的 DOM 转换为一个 datepicker。请参阅 - https://jqueryui.com/datepicker/

    大多数 javascript 小部件的工作方式都类似。您可以使用同一方法来包装选择的任一组件,然后再以同一方式将其引入 Animate CC 中。

  3. Update:我们会覆盖 update,将 css 属性 (properties) 应用于容器 div,将特性 (attributes) 应用于真正的 DOM 元素。

    注意:

    在覆盖 attach、detach 或 update 这样的 API 时,需评估基类的默认实现并在适当时候调用基础实现,否则组件初始化可能会失败。

Adobe 徽标

登录到您的帐户