- 元数据:提供组件的有关信息,如显示名称、版本、可配置属性、图标等等。这些都放在一个名为 components.js 的文件中。可以将组件编组到一个类别中,而此文件允许您为一个类别中的所有组件提供元数据。
- 源:提供实际组件源的有关信息。这是在您预览或发布使用组件的影片时,在运行时嵌入的。
- 资源:提供运行时依赖的有关信息,如 JavaScript 库或 CSS 或运行时资源和图标。这些资源可以用在 Animate 创作环境中。
注意:
组件定义还具有本地化相关的资源。

注意:
上面的文件夹路径仅适用于美国英语版本。如果您使用的是任何其他语言的 Animate,请查找您的语言对应的文件夹名称来替换 en_US。

名称 |
必需 |
描述 |
ClassName |
是 |
|
Version |
否 |
|
Source |
是 |
组件的主源文件的相对路径。下一部分提供有关源文件 |
Icon |
否 |
组件图标的相对路径。在使用组件名称为组件创建任何实例 您可以指定要加载图标(通常为 32x32)的 png 名称。或者,如果希望对浅色 UI 和深色 UI 使用不同的图标,则可以提供两个 .png,并使用以下命名约定: custom_icon_N.png – 深色 UI 图标 custom_icon_D.png – 浅色 UI 图标 只需指定名称 custom_icon 作为此字段的值。系统会根据当前的用户设置自动追加后缀。 |
Dimensions |
否 |
|
Dependencies |
否 |
组件的相关项集。这是一组相关项,其中每一条目都提供本地源的相对路径(键为 src)和 CDN 路径(键为 cdn)。CDN 路径不是必需的。此路径用于当您在发布设置中使用托管库的时候。 请注意上例 (video) 中使用的相对路径。它从上面一级加载相关项,从而允许跨多个组件集共享某些相关项。 |
Properties |
是 |
这是一组属性。在舞台 每个属性条目包含以下键:
|
文件 anwidget.js 中提供了一个基类和一个实用程序函数,使得自定义组件的开发更为方便。以后将会增强此接口的功能,但会向后兼容。目前仅支持基于 DOM 的组件,但会扩展对基于 Canvas 组件的支持。目前仅支持小部件 (widget),但会增强框架功能以支持附加行为(非 UI 组件)。
文件 anwidget.js 位于初始文件夹的 HTML5Components/sdk 文件夹下。它为自定义组件提供一个基类 AnWidget 和一个用来注册自定义组件的实用程序方法 $.anwidget(<className>, {Object Prototype})。当前实现使用的是 jQuery,因此每当使用小部件提供的服务时,都将 jQuery 始终作为一个相关项来添加。但是,如果不想对 jQuery 添加隐式相关项,可能需要实现一个不带 jQuery 的组件类,它与小部件提供相同的接口。


注意:
不要更改 dom_overlay_container div 的 ID,因为在我们的第一个版本中,有几个功能(如代码片段)依赖此 ID。
如上图所示,dom_overlay_container div 叠加在画布的上面。要确保鼠标事件也能够正确传播到下面的画布,我们对此 div 使用 CSS 属性 {pointer-events: none},以便鼠标事件能够传播到下面的画布。您的项目中在 Animate 中配置的所有组件实例都会被实例化并作为子项附加到此 dom_overlay_container div。组件实例的相对顺序在运行时将保持不变,但当前所有组件实例始终显示为叠加。我们将在运行时对所有组件实例设置 {pointer-events: all},以便它们也能接收鼠标事件。

名称 |
必需 |
描述 |
getCreateOptions() |
否 |
返回想要在组件实例化期间应用组件的任何选项。典型的覆盖通常是使用 this 并利用 _widgetID 全局变量为每个实例分配一个唯一的 ID。下一部分中的示例将更为清楚地描述其使用方式。 |
getCreateString() |
是 |
返回 DOM 实例创建字符串。此字符串将传递给 jQuery 以创建实际的 DOM 元素,以后该元素会附加到基本 DOM。
例如,对于图像组件,应返回“<image>”。
元素在运行时创建,且对 jQuery 包装器的引用存储在组件实例中,如下所示:
this._element = $(this.getCreateElement())
// this._element – 用于下层创建的 DOM 元素的 jQuery 包装器。
我们还可以创建复合元素;详细信息将在示例部分中提供。 |
getProperties() |
否 |
返回一组可配置的 CSS 属性名。通常,它们与在 components.json 中配置的所有属性相匹配
例如,对于视频组件,此属性组包含以下条目:
["left", "top", "width", "height", "position", "transform-origin", "transform"] |
getAttributes() |
否 |
返回一组可配置的特性。通常,它们与允许您在 components.json 中配置的所有特性相匹配
例如,对于视频组件,此属性组包含以下条目:
["id", "src", "controls", "autoplay", "loop", "class"] |
attach(parent) |
否 |
每当组件实例即将附加到父 DOM 元素时,调用此函数。
默认实现完成以下工作(以及更多工作):
//将元素追加到父 DOM $(parent).append(this._element);
//将引用存储在 this._$this 中 this._$this = $(this._element);
//调用强制更新以应用所有属性 this.update(true); this._attached = true;
//对父项触发 attached 事件 $(parent).trigger("attached", this.getEventData("attached"))
无需覆盖此函数。但对于复合元素,可能需要覆盖。详细信息将在示例部分中提供。
注意: 可以使用 this._superApply(arguments) 调用任何覆盖中的任何基类方法。 |
detach() |
否 |
每当组件实例即将脱离父 DOM 时,调用此函数。默认实现完成以下工作:
//删除 DOM 中的元素 this._$this.remove(); //对父项触发 detached 事件 $(parent).trigger("detached", this.getEventData("detached")); |
setProperty(k,v) |
否 |
此函数用于为实例设置任一属性。在调用 update() 期间,对每一帧每一使用过的属性,会立即缓存并应用这些更改。 |
update(force) |
否 |
当组件是 DOM 的一部分且可见时,对每一帧调用此函数。默认实现(或 force 参数为 true 时)应用所有已经发生变化的 CSS 属性和特性。 |
show() |
否 |
显示元素实例。通常无需覆盖此方法,但对复合元素可能需要。 |
hide() |
否 |
隐藏元素实例。通常无需覆盖此方法,但对复合元素可能需要。 |
getEventData(e) |
否 |
返回名称带有 e 的事件的自定义数据。默认实现是为 attached 和 detached 事件传递数据 {id: instance_id}。 |
destroy() |
否 |
组件实例脱离 DOM 时释放内存。通常无需覆盖此方法。 |
applyProperties(e) |
否 |
辅助 API,用于对 jQuery 包装器 e 应用 CSS 属性。 |
applyAttributes(e) |
否 |
辅助 API,用于对 jQuery 包装器 e 应用特性。 |
类别字符串、组件显示名称和属性名称是可以本地化的。在 components 文件夹下的 locale 文件夹中创建一个名为 strings.json 的文件。对所有要本地化的字符串提供键值对并在 components.js 中使用这些键。对于其他语言,需要在 locale 文件夹下相应的文件夹中提供字符串。

<file source="jquery-ui-1.12.0" destination="$FLASH\HTML5Components\jQueryUI\" file-type="ordinary" />
-
ZXPSignCmd -selfSignedCert US NY MyCompany MyCommonName password FileName.p12
ZXPSignCmd -sign projectName projectName.zxp FileName.p12 password
注意:
Adobe 建议您通过 Adobe Add-ons 网站分发产品。您可以公开(免费或付费)或私下分发加载项。 了解关于私下共享产品的更多信息。
Animate 设计人员或开发人员可以使用“管理扩展”实用程序来安装分发的 ZXP 文件组件。
有关更多信息,请参阅安装分发的组件