使用 HTML5 Canvas 中的组件

Animate

Animate

打开应用程序
  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 中处理角色操纵
    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. 使用 Animate 绘制和创建对象
    9. 改变线条和形状
    10. Animate CC 中的笔触、填充和渐变
    11. 使用 Adobe Premiere Pro 和 After Effects
    12. Animate CC 中的颜色面板
    13. 使用 Animate 打开 Flash CS6 文件
    14. 在 Animate 中使用传统文本
    15. 向 Animate 中置入图稿
    16. 在 Animate 中导入的位图
    17. 3D 图形
    18. 在 Animate 中使用元件
    19. 使用 Adobe Animate 绘制线条和形状
    20. 在 Animate 中使用库
    21. 导出声音
    22. 在 Animate CC 中选择对象
    23. 在 Animate 中使用 Illustrator AI 文件
    24. 应用混合模式
    25. 排列对象
    26. 使用“命令”菜单自动处理任务
    27. 多语言文本
    28. 在 Animate 中使用摄像头
    29. 图形滤镜
    30. 声音和 ActionScript
    31. 绘制首选参数
    32. 用钢笔工具绘图
  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. Animate 工作区中的辅助功能
    12. 编写和管理脚本
    13. 启用自定义平台支持
    14. 自定义平台支持概述
    15. 使用自定义平台支持插件
    16. 调试 ActionScript 3.0
    17. 启用自定义平台支持
  8. 导出和发布
    1. 如何从 Animate CC 导出文件
    2. OAM 发布
    3. 导出 SVG 文件
    4. 使用 Animate 导出图形和视频
    5. 发布 AS3 文档
    6. 导出移动应用程序和游戏引擎的动画
    7. 导出声音
    8. 最佳做法 - 移动设备内容创建技巧
    9. 最佳做法 - 视频惯例
    10. 最佳做法 - SWF 应用程序创作指南
    11. 最佳做法 - 构造 FLA 文件
    12. 在 Animate 中优化 FLA 文件的最佳做法
    13. ActionScript 发布设置
    14. 指定 Animate 的发布设置
    15. 导出放映文件
    16. 导出图像和动画 GIF
    17. HTML 发布模板
    18. 使用 Adobe Premiere Pro 和 After Effects
    19. 快速分享和发布动画
  9. 故障排除
    1. 已修复的问题
    2. 已知问题

 

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

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

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

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

    新建文档
    HTML5 Canvas

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

    默认组件

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

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

    拖放组件

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

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

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

    预览组件输出

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

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

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

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

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

    默认代码片段

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

示例

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

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

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

    放置按钮

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

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

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

    添加代码片段

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

    添加到动作面板中的代码

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

    将代码移动到标记之间

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

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

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

有趣的 HTML5 组件

使用 HTML 5 组件将交互添加到内容不仅非常有趣，还可加入许多功能。想要了解如何在 Animate 中使用这些 HTML5 组件？ 在本示例结尾观看教程并按照这些步骤操作。

  1. 单击“窗口”并选择“组件”。

  2. 展开 Videos 文件夹，单击视频图标并将其拖动到舞台。

  3. 在“属性”中，展开“位置和大小”选项卡，然后设置所需的值。

如何使用 HTML5 组件增强 Animate 合成

观看视频，了解如何将更多组件加入到合成中。

安装分发的组件

Animate 设计人员或开发人员可以使用“管理扩展”实用程序来安装分发的 ZXP 文件组件。有关更多信息，请参阅安装扩展。

先决条件

安装组件

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

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

  2. 单击“安装扩展”并选择要安装的扩展（.zxp 文件）。 有关更多信息，请参阅安装扩展。

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

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

更多此类内容

更快、更轻松地获得帮助

新用户？

快速链接

查看您的所有计划 管理您的计划
查看快速链接
隐藏快速链接

法律声明    |    在线隐私政策

Copyright © 2024 Adobe。保留所有权利。