使用 HTML5 Canvas 中的组件

搜索

上次更新日期： 2021年4月29日

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

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

选择“文件”>“新建”。

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

HTML5 Canvas
选择“窗口”>“组件”。

默认组件
选择“组件”>“视频”。将相关组件拖放到画布中。
选择舞台上的视频组件实例，然后可在属性检查器中查看和修改参数。“Source”参数允许您从本地位置选择视频文件，或提供一个 URL 来播放视频（mp4、ogg、ogv 或 webm 格式）。

拖放组件
选择“匹配源尺寸”可调整视频播放器的大小，以匹配输入视频的大小。此功能仅适用于 mp4 视频。对于其他视频类型，需手动调整舞台上视频实例的大小，以确保长宽比保持不变。
按 Ctrl + Enter（Cmd + Enter，对于 MAC 系统）可预览影片。视频在默认浏览器中播放。控件默认是可见的，因此当鼠标悬停在浏览器中的视频上时，可以查看这些控件。

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

预览组件输出

注意:

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

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

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

选择舞台上的视频实例，禁用属性检查器中的自动播放设置。
双击“组件”面板中的“按钮”组件两次，以便在舞台上创建两个实例并放置按钮。还可以将它们从组件面板直接拖放到舞台上。

放置按钮
选择第一个按钮实例并将标签更改为“在 PI 中播放”，将第二个按钮更改为“暂停”。
单击“窗口”>“代码片段”，打开“代码片段”面板。导航到“HTML5 Canvas”>“组件”，展开“用户界面”部分。
选择舞台上的“播放”按钮，双击“代码片段”面板中的“按钮单击事件”，然后单击“确定”。 Animate 会为选定按钮赋予一个实例名称。您可以在“动作”面板中查看新添加的代码。

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

添加到动作面板中的代码
若想在单击按钮时播放视频，需将代码移动到 <开始您的自定义代码> 和 <结束您的自定义代码> 部分之间。

将代码移动到标记之间
要添加代码来暂停视频，请选择暂停按钮，分配新的按钮单击处理函数，然后添加暂停视频代码。
预览影片。单击“播放”按钮可播放视频，单击“暂停”按钮可暂停视频。