阅读本文可了解有关使用自定义组件的更多信息。

组件提供一种功能或一组相关的可重用自定义组件,可以提高广告创建者的工作效率。以前,Animate CC 支持与基于 Flash 的目标一起使用的 Flash 组件。从此版本开始,Animate 将支持 HTML5 Canvas。 

  1. 选择“文件”>“新建”

    “新建文档”对话框的屏幕顶部选项卡中选择“高级”,然后选择 HTML5 Canvas 选项。

    新建文档
    HTML5 Canvas
  2. 选择“窗口”>“组件”。

    默认组件
    默认组件

  3. 选择“组件”>“视频”。将相关组件拖放到画布中。 

  4. 选择舞台上的视频组件实例,然后可在属性检查器中查看和修改参数。“Source”参数允许您从本地位置选择视频文件,或提供一个 URL 来播放视频(mp4、ogg、ogv 或 webm 格式)。

    components_drag_drop
    拖放组件

  5. 选择“匹配源尺寸”可调整视频播放器的大小,以匹配输入视频的大小。此功能仅适用于 mp4 视频。对于其他视频类型,需手动调整舞台上视频实例的大小,以确保长宽比保持不变。

  6. 按 Ctrl + Enter(Cmd + Enter,对于 MAC 系统)可预览影片。视频在默认浏览器中播放。 控件默认是可见的,因此当鼠标悬停在浏览器中的视频上时,可以查看这些控件。

    可以使用同样的过程来使用其他组件。

    components_preview
    预览组件输出

注意:

组件作为 DOM 元素添加到 HTML 文档,因此请参阅组件代码片段(“代码片段”>“HTML5 Canvas”>“组件”)向组件添加交互性。

使用代码片段向组件添加交互性

  1. 选择“窗口”>“组件”。

  2. 要对组件添加交互性,请选择“窗口”>“代码片段”面板。您可以查看各种可用组件的行为映射。

  3. 在“代码片段”屏幕中,选择“HTML5 Canvas”>“组件”。

    component_snippets
    默认代码片段

  4. 基于您所选的组件,双击相应的代码片段可让其在“动作”面板中显示出来。 有关对代码片段添加交互性的信息,请参阅在 Animate CC 中为代码片段添加交互性。 

示例

使用以下示例可了解如何使用代码片段来控制视频的播放。

  1. 选择舞台上的视频实例,禁用属性检查器中的自动播放设置。 

  2. 双击“组件”面板中的“按钮”组件两次,以便在舞台上创建两个实例并放置按钮。还可以将它们从组件面板直接拖放到舞台上。

    Component_example_7
    放置按钮

  3. 选择第一个按钮实例并将标签更改为“在 PI 中播放”,将第二个按钮更改为“暂停”。 

  4. 单击“窗口”>“代码片段”,打开“代码片段”面板。导航到“HTML5 Canvas”>“组件”,展开“用户界面”部分。 

  5. 选择舞台上的“播放”按钮,双击“代码片段”面板中的“按钮单击事件”,然后单击“确定”。 Animate CC 会为选定按钮赋予一个实例名称。您可以在“动作”面板中查看新添加的代码。

    Component_example_4
    添加代码片段

  6. 选择舞台上的视频,并展开“代码片段”中的“视频”部分。双击“播放视频”。播放视频所需的代码即添加到“动作”面板中。

    Component_example_5
    添加到动作面板中的代码

  7. 若想在单击按钮时播放视频,需将代码移动到 <开始您的自定义代码> 和 <结束您的自定义代码> 部分之间。 

    Component_example_6
    将代码移动到标记之间

  8. 要添加代码来暂停视频,请选择暂停按钮,分配新的按钮单击处理函数,然后添加暂停视频代码。

  9. 预览影片。单击“播放”按钮可播放视频,单击“暂停”按钮可暂停视频。 

注意:

您可以在属性检查器中查看每个组件的 className 属性。使用这些类名可以通过 CSS 设置组件的外观。使用 CSS 组件可加载您的自定义 CSS。CSS 组件允许您选择影片中包含的任一本地 CSS 文件。

安装分发的组件

Animate 设计人员或开发人员可以使用“管理扩展”实用程序来安装分发的 ZXP 文件组件。

先决条件

管理扩展实用程序。要下载说明,请在 Animate CC 产品中单击“帮助”>“管理扩展”

安装组件

要安装分发的组件,可以执行下列步骤:

  1. 双击 ManageExtensions.exe 文件。此时会出现“管理扩展”对话框。

    ManageExtensions
  2. 单击“安装扩展”并选择要安装的扩展(.zxp 文件)。

  3. 要在 Animate CC 中查看安装的组件,请单击“窗口”>“组件”。 此时将出现“组件”弹出式对话框。

  4. 依次单击右上角的汉堡包图标和“重新加载组件”

    reloading-components

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略