注意:

  Typekit 现已更名为 Adobe Fonts,包含在 Creative Cloud 和其他订阅中。了解详情

HTML5 Canvas 是什么?

Canvas 是 HTML5 中的一个新元素,它提供了多个 API,可以让您动态生成及渲染图形、图表、图像及动画。HTML5 的 Canvas API 提供二维绘制能力,它的出现使得 HTML5 平台更为强大。如今的大多数操作系统和浏览器都支持这些功能。

Canvas 本质上是一个位图渲染引擎,其最终结果是生成绘图,且绘图大小不可调整。另外,在 Canvas 上绘制的对象并不属于网页 DOM 的一部分。

在网页中,您可以使用 <Canvas> 标签添加 Canvas 元素。然后便可以使用 JavaScript 来增强这些元素以便构建交互性。有关详细信息,请参阅此链接

新文档类型 HTML5 Canvas

Animate CC 允许您创建具有图稿、图形及动画等丰富内容的 HTML5 Canvas 文档。Animate 中新增了一种文档类型 HTML5 Canvas,它对创建丰富的交互性 HTML5 内容提供本地支持。这意味着您可以使用传统的 Animate 时间轴、工作区及工具来创建内容,而生成的是 HTML5 输出。您只需单击几次鼠标,即可创建 HTML5 Canvas 文档并生成功能完善的输出。粗略地讲,在 Animate 中,文档和发布选项会经过预设以便生成 HTML5 输出。

Animate CC 集成了 CreateJS,后者支持通过 HTML5 开放的 Web 技术创建丰富的交互性内容。Animate CC 可以为舞台上创建的内容(包括位图、矢量、形状、声音、补间等等)生成 HTML 和 JavaScript。其输出可以在支持 HTML5 Canvas 的任何设备或浏览器上运行。

Animate 和 Canvas API

Animate 利用 Canvas API 发布到 HTML5。它可以将舞台上创建的对象无缝地转换成 Canvas 的对应项。Animate 中的功能与 Canvas 中的 API 是一一对应的,因此允许您将复杂的内容发布到 HTML5。

创建 HTML5 Canvas 文档

要创建 HTML5 Canvas 文档,可执行以下操作:

  1. 选择“文件”>“新建”以显示“新建文档”对话框。从屏幕顶部选择“高级”选项卡,然后单击“HTML5 Canvas”选项。这将打开一个新的 FLA,且“发布设置”已经过修改,以生成 HTML5 输出。
新建文档
新建文档

现在便可使用 Animate 中的工具开始创建 HTML5 内容了。初始使用 HTML5 Canvas 文档时,您会注意到某些功能和工具是不支持和禁用的。这是因为 Animate 支持那些反之也受 HTML5 中的 Canvas 元素支持的功能。例如,不支持 3D 转换、虚线、斜角效果。

在 HTML5 Canvas 文档中添加交互性

Animate CC 使用 CreateJS 库发布 HTML5 内容。CreateJS 是一个模块化的库和工具套件,它支持通过 HTML5 开放的 Web 技术创建丰富的交互性内容。CreateJS 套件包括:EaselJS、TweenJS、SoundJS 和 PreloadJS。CreateJS 可分别使用这些库将舞台上创建的内容转换为 HTML5,从而生成 HTML 和 JavaScript 输出文件。您还可以对这个 JavaScript 文件进行操作来增强内容的表现力。

不过,Animate CC 允许您为舞台上针对 HTML5 Canvas 创建的对象添加交互性。这意味着,实际上在 Animate 中,您就可以为舞台上的各个对象添加 JavaScript 代码,并在编写期间进行预览。反过来,Animate 通过代码编辑器中的有用功能对 JavaScript 提供本地支持,从而帮助提高编程人员的工作流效率。

您可以选择时间轴上的各个帧和关键帧来为内容添加交互性。对于 HTML5 Canvas 文档,可以使用 JavaScript 添加交互性。有关编写 JavaScript 代码的详细信息,请参阅此链接

可以直接在动作面板中编写 JavaScript 代码,编写时 JavaScript 代码支持以下功能:

代码提示

允许您快速插入和编辑 JavaScript 代码而不会发生错误。在动作面板中键入字符时,您会看到一个可能完成输入的候选项列表。

此外,在使用 HTML5 Canvas 时,Animate 还支持动作面板的一些固有功能。在为舞台上的对象添加交互性时,这些功能有助于提高工作流效率。它们是:

语法加亮显示

按照语法以不同的字体或颜色显示代码。此功能使您可以采用结构化方式编写代码,从而帮助您清楚地区分正确代码和语法错误。

代码着色

按照语法以不同颜色显示代码。使您可以清楚区分语法的各个部分。

加括号

编写 JavaScript 代码时自动添加右方括号和圆括号以对应左括号。

Code_Aspects
(A) 语法加亮显示 (B) 代码着色 (C) 加括号

您可以使用 JavaScript 为舞台上的形状或对象添加交互性。您可以为单独的帧和关键帧添加 JavaScript。

  1. 选择要对其添加 JavaScript 的帧。
  2. 选择“窗口”>“动作”以打开动作面板。

使用 JavaScript 代码片段

您可以使用 Animate CC 中提供的 JavaScript 代码片段来添加交互性。要访问并使用代码片段,请选择“窗口”>“代码片段”。有关添加 JavaScript 代码片段的详细信息,请参阅此文章

CreateJS 文档参考

将动画发布到 HTML5

要将舞台上的内容发布到 HTML5,可执行以下操作:

  1. 选择“文件”>“发布设置”。
  2. 在“发布设置”对话框中,指定以下设置:

基本设置

publish-settings-basics

输出

将 FLA 发布到此目录。默认为 FLA 所在的目录,但可通过单击浏览按钮“...”进行更改。

循环时间轴

如果选中,则时间轴循环;如果未选中,则在播放到结尾时时间轴停止。

包括隐藏图层

如果未选中,则不会将隐藏图层包含在输出中。

舞台居中

允许用户选择是将舞台“水平居中”、“垂直居中”或“同时居中”。默认情况下,HTML 画布/舞台显示在浏览器窗口的中间。

做出响应

允许用户选择动画是否应响应高度、宽度或这两者的变化,并根据不同的比例因子调整所发布输出的大小。结果将是遵从 HiDPI 的更为清晰鲜明的响应式输出。

输出还会拉伸,不带边框覆盖整个屏幕区域,不过会保持原高宽比不变,尽管画布的某些部分可能不适合视图。

  • 宽度、高度或两者选项确保整个内容会根据画布大小按比例缩小,因此即使是在小屏幕上查看(如移动设备或平板电脑),内容也都可见。如果屏幕大小大于创作的舞台大小,画布将以原始大小显示。

启用缩放以填充可见区域

允许用户选择是在全屏模式下查看动画输出,还是应拉伸以适合屏幕。默认情况下,此选项为禁用状态。

符合视图大小:全屏模式下以整个屏幕空间显示输出,同时保持长宽比。

拉伸以适合:拉伸动画以便输出中不带边框。

包括预加载器:

允许用户选择是使用默认的预加载器还是从文档库中自行选择预加载器。

预加载器是在加载呈现动画所需的脚本和资源时以动画 GIF 格式显示的一个可视指示符。资源加载之后,预加载器即隐藏,而显示真正的动画。

默认情况下,预加载器选项为未选中状态。

  • 默认选项:使用默认的预加载器
  • 浏览选项:使用自行选择的预加载器 GIF。预加载器 GIF 将复制到在“导出图像资源”中配置的图像文件夹中。
  • 使用“预览”选项可预览选定的 GIF。

Publish settings
发布设置

使用切换选项可选择是发布在根文件夹级别还是子文件夹级别。默认情况下,此按钮为开启状态。切换为关闭状态将禁用文件夹字段,将资源导出到输出文件所在的文件夹。

Publish_settings_root
将 Canvas 资源发布到根文件夹

导出图像资源

供放入和从中引用图像资源的文件夹。

合并到 Sprite 表中:选择该选项可将所有图像资源合并到一个 Sprite 表中。有关 Sprite 表选项的更多信息,请参阅“将位图导出为 Sprite 表”

导出声音资源

供放入和从中引用文档中声音资源的文件夹。

导出 CreateJS 资源

供放入和从中引用 CreateJS 库的文件夹。

注意:

默认设置是继续发布被分离到几个逻辑子文件夹中的文件。

高级设置

publish_settings_output

资源导出选项

相对 URL,将图像、声音及支持的 CreateJS JavaScript 库导出到此处。如果未选中右侧的复选框,则不会从 FLA 导出那些资源,但仍会使用指定路径作为其 URL。这会加快从具有许多媒体资源的 FLA 发布的过程,因为不会覆盖修改过的 JavaScript 库。

“将所有位图导出为 Sprite 表”选项允许您将 Canvas 文档中的所有位图打包在一个 sprite 表中,这将减少服务器请求次数,从而提高性能。可以通过给定高度值和宽度值来指定 sprite 表的最大大小。

JSEmbed23
Export-spritesheets
Publish_Settings_JavaScript_Namespaces

HTML 发布模板:

 

使用默认值:使用默认模板发布 HTML5 输出。

导入新模板:为 HTML5 文档导入一个新模板。

导出:将 HTML5 文档导出为模板。

托管的库:

如果选中,将使用在 CreateJS CDN (code.createjs.com) 上托管的库的副本。这将允许对库进行缓存并在各个站点之间实现共享。

包括隐藏图层:

如果未选中,则不会将隐藏图层包含在输出中。

压缩形状:

如果选中,将以精简格式输出矢量说明。如果未选中,则导出可读的详细说明(用于学习目的)。

多帧边界:

如果选中,则时间轴元件包括一个 frameBounds 属性,该属性包含一个对应于时间轴中每个帧的边界的 Rectangle 数组。多帧边界会大幅增加发布时间。

“发布时覆盖 HTML 文件”和“在 HTML 中包含 JavaScript”:

如果选中“在 HTML 中包含 JavaScript”,则“发布时覆盖 HTML 文件”复选框为选中并禁用状态。如果不选中“发布时覆盖 HTML 文件”复选框,则“在 HTML 中包含 JavaScript”为不选中并禁用状态。

  1. 单击“发布”,将内容发布到指定位置。

注意:

使用嵌套时间轴设计的具有单个帧的动画是不能循环播放的。

HTML 模板变量

导入新的自定义 HTML 模板后,在发布期间,系统会基于您的 FLA 文件的组件将默认变量替换为自定义的代码片段。 

下表列出了 Animate 当前可识别和替换的模板变量:

属性参数 模板变量
HTML 文档的标题 $TITLE
用以包括 CreateJS 脚本的占位符 $CREATEJS_LIBRARY_SCRIPTS
用以包括生成的脚本(包括 Web 字体脚本)的占位符 $ANIMATE_CC_SCRIPTS
用以表示客户端脚本开始的 HTML 标签                                                                                                               $SCRIPT_START
用以创建加载器 (CreateJS LoadQueue) 的代码占位符 $CREATE_LOADER
用以加载清单中当前资源的代码占位符 $LOAD_MANIFEST
用以定义文件加载方法的代码占位符 $HANDLE_FILE_LOAD_START
用以处理文件加载事件的代码占位符 $HANDLE_FILE_LOAD_BODY
用以结束文件加载方法的代码占位符 $HANDLE_FILE_LOAD_END
用以定义加载资源之后调用的 handle Complete 方法的代码占位符 $HANDLE_COMPLETE_START
用以创建舞台的代码占位符 $CREATE_STAGE
用以注册 tick 事件(之后动画开始)的代码占位符 $START_ANIMATION
用以支持响应式缩放和 hidpi 显示的代码占位符 $RESP_HIDPI
用以结束方法 handle Complete 的代码占位符 $HANDLE_COMPLETE_END
用以处理带有
声音的内容的函数占位符                                                                            
$PLAYSOUND
用以支持画布居中的样式段占位符 $CENTER_STYLE
用以支持预加载器的画布显示样式属性占位符 $CANVAS_DISP
用以显示预加载器的代码占位符 $PRELOADER_DIV
表示客户端脚本结束的 HTML 标签                                                                                                                $SCRIPT_END
画布元素 ID                                                                                                                                                  $CANVAS_ID
舞台或画布元素的宽度                                                                                                              $WT
舞台或画布元素的高度                                                                                                                 $HT
舞台或画布元素的背景颜色                                                                                          $BG
用于生成
内容的 Animate CC 版本                                                                                     
$VERSION

以下标记来自以前的版本,在当前版本中已弃用:

属性参数 模板变量
用以包括脚本(CreateJS 和生成的 JavaScript)的占位符 $CREATEJS_SCRIPTS
用以初始化 CreateJS 库、加载媒体、创建和更新舞台的代码占位符 $CJS_INIT*

注意:

这些标记已模块化并由其他标记取代。

对导入和导出 Canvas 文档的 HTML 模板的 JSAPI 支持

以下 JSAPI 支持 Canvas 文档的 HTML 模板的导入和导出:

  • 在指定位置对指定文档导出 HTML5 Canvas 发布模板:

bool document::exportCanvasPublishTemplate(pathURI)

  • 示例:

var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html” 

var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Template could not be exported”);

  • 从指定位置 pathURI 为指定文档导入和设置 HTML5 Canvas 发布模板:

bool document::importCanvasPublishTemplate(pathURI)

  • 示例:

var pathURI= “file:///C|/Users/username/desktop/CanvasTemplate.html”;

var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Template could not be imported”);

将 JavaScript 嵌入 HTML

Animate 引入了在画布发布期间可以在 HTML 文件中包含 JS 文件的功能。

  1. “发布设置”菜单中,切换到“高级”选项卡,然后选择“在 HTML 中包含 JavaScript”
  2. “发布时在 HTML 中包含 JavaScript”对话框中选择“确定”,以重新发布覆盖 HTML 的内容。
  3. 这将禁用“发布时覆盖 HTML 文件”复选框,在任何事件发布期间,都会生成 HTML,但会覆盖它。
  4. “选择停止在 HTML 中包含 JavaScript”中,选择“确定”,以便不包含 JavaScript 而重新发布 HTML 文件。
  5. 如果未选中“发布时覆盖 HTML 文件”,将自动禁用“在 HTML 中包含 JavaScript”选项。

注意:

如果不希望覆盖 HTML,则“发布时覆盖 HTML 文件”“在 HTML 中嵌入 JS”选项不能同时存在。

Mering Json
将 Js 与 HTML 合并

添加全局和第三方脚本

动画制作人员经常会使用适用于整个动画的 JavaScript 代码。借助此功能,您可以添加并非特定于帧的全局和第三方脚本,这些脚本可以应用于 Animate 中的整个动画。 

若要添加和使用全局脚本:

  1. 选择“窗口”>“动作”

    actions-add-script
  2. 在“动作”面板中,在全局层次结构中选择“脚本”

    使用全局脚本部分可以编写适用于 Animate 中多个文档的脚本,或外部脚本。

    作为外部脚本:在“包含”屏幕中,按如下部分所述选择包含的特定脚本。

添加第三方脚本

动画制作人员经常会并入第三方 JavaScript 库,但不得不手动修改 Animate CC 生成的代码。此功能为动画制作人员提供了更大的灵活性,允许其利用动画的最新 JavaScript 库或代码。

若要添加第三方脚本: 

  1. 选择“窗口”>“动作”

  2. 在“动作”面板中,在全局层次结构中选择“包含”

  3. 单击 “+” 按钮从外部托管的 URL 添加一个脚本,或浏览本地库来添加一个文件。

    actions-include

    某些对象依赖于其他现有库,因此还可以根据脚本的相互依赖性对其重新排序。

将 JSON 数据合并到 JS 中

根据客户反馈并鉴于 JSON 文件固有的不安全性,我们将相关数据与 JS 文件进行了合并,因而不会创建单独的 JSON 文件。

优化 HTML5 Canvas 输出

Animate 通过以下方式优化 HTML5 Canvas 输出大小和性能:

  • 使用“发布设置”的“Sprite 表”选项卡中的选项将位图导出为 Sprite 表。
  • 使得发布的输出中不包括隐藏层(不选择“包含隐藏图层”复选框)。
  • 不包括所有未使用的资源(如声音和位图)和未使用帧的所有资源(默认)。
  • 指定不从 FLA 导出资源,方法是对于图像、声音和支持的 CreateJS JavaScript 库不选择资源导出选项并使用相关 URL 来导出。
  • HiDPI 兼容的 HTML5 Canvas 输出:Animate 会根据您查看内容所用设备的像素比来缩放输出。此兼容性使得在一台高 DPI 计算机上查看 HTML Canvas 输出时,缩放输出效果更为鲜明且 Canvas 文档的像素问题能够得以修复。

设置透明画布背景

您可以将画布自定义成各种颜色,还可以修改其显示透明度。创建透明画布时,您可以在发布期间查看下面的 HTML 内容。

注意:在 OAM 发布期间,此设置也会使背景透明。

  1. 选择要修改的画布。
  2. “属性”窗格中,选择“舞台”
  3. 在舞台上,设置 Alpha 的百分比值。

“无色”样本支持

您还可以使用“无色”样本选项使画布背景透明:

  1. 选择“修改”>“文档”>“舞台颜色”或在“属性检查器”中,选择“高级设置”
  2. “舞台颜色”色板中,选择“无色”

 

canvas tranperancy_final
画布透明度

advanced_settings
画布透明:高级设置

将位图导出为 Sprite 表

将 HTML5 Canvas 文档中使用的大量位图导出为一个单独的 sprite 表可减少服务器请求次数、减小输出大小,从而提高性能。您可以将 Sprite 表导出为 PNG(默认)或 JPEG,或是这两者。

  1. Spritesheet 选项卡中,勾选“将图像和资源组合到 Spritesheet 中”复选框。
  2. “格式”中,选择 PNGJPEG“两者”
  3. 如果选择了 PNG“两者”,则应设定“PNG 设置”下的以下选项:
    • 品质:将 Sprite 表的品质设置为 8 位(默认)、24 位或 32 位。
    • 最大尺寸:设定 Spritesheet 的最大高度和宽度(以像素为单位)。
    • 背景:单击并设置 Spritesheet 的背景颜色。
  4. 如果选择了 JPEG“两者”,则应设定“JPEG 设置”下的以下选项:
    • 品质:设置 Spritesheet 的品质。
    • 最大尺寸:设定 Spritesheet 的最大高度和宽度(以像素为单位)。
    • 背景:单击并设置 Spritesheet 的背景颜色。
sprite-sheet
Export-spritesheets-1

处理 HTML5 Canvas 文档中的文本

HTML 画布支持静态文本和动态文本。

静态文本

静态文本是一个更为丰富的选项,其中的所有资源将在发布期间转换为轮廓并提供卓越的所见即所得用户体验。由于文本将发布为矢量轮廓,因此您不可以在运行时对其进行编辑。

注意:静态文本使用过多可能会导致文件增大。

Static-text

动态文本

动态文本允许在运行时修改文本,因此文件大小不会增加过大。相比静态文本,它支持的选项较少。此外,它还通过 Adobe Fonts 支持 Web 字体。

如果使用的动态文本中包含最终用户计算机不支持的字体,输出将显示为默认字体,从而导致用户体验打折。如今这类问题已通过 Web 字体得到解决。

向 HTML5 Canvas 文档添加 Web 字体

Animate CC 为 HTML5 Canvas 文档中的动态文本类型提供 Web 字体。Adobe Fonts 提供对来自一流代工伙伴的数千种高品质字体的直接访问。只要拥有 Creative Cloud 会员资格,即可在现代浏览器和移动设备的 HTML5 输出中无缝访问和使用 Adobe Fonts。

想要了解有关在 Animate CC 中通过 Adobe Fonts 使用 Web 字体的详细信息,请参阅“在 HTML5 Canvas 文档中使用 Web 字体”

Animate 2015.2 版增强了 Canvas 文档中动态文本的视觉体验,使其在舞台上显示的外观和发布的外观一致。

注释:Adobe Fonts 不可用于静态文本类型。

了解 HTML5 Canvas 输出

发布的 HTML5 输出包含以下文件:

HTML 文件

包含 Canvas 元素中所有形状、对象及图稿的定义。在将 Animate 转换为包含交互元素的 HTML5 和相应的 JavaScript 文件时,它也调用 CreateJS 命名空间。 

JavaScript 文件

包含动画所有交互元素的专用定义和代码。在 JavaScript 文件中还定义了所有补间类型的代码。

这些文件默认会被复制到 FLA 所在的位置。可通过在“发布设置”对话框(“文件”>“发布设置”)中提供输出路径来更改此位置。

将现有内容移植到 HTML5 Canvas

生成 HTML5 输出时,可以移植 Animate 中现有的内容。粗略地讲,Animate 允许您通过手动复制或导入单独的图层、元件及其他库项目来移植内容。您也可以运行“将 AS3 转换为 HTML5 Canvas 文档”命令,将现有 ActionScript 内容自动导出到一个新的 HTML5 Canvas 文档。有关详细信息,请参阅此链接

不过,在 Animate CC 中使用 HTML5 文档类型时,您会注意到某些 Animate 功能是不支持的。这是因为 Animate 中的这些功能在 Canvas API 中没有对应的功能。因此,这些功能不能用于 HTML5 Canvas 文档类型。当您想执行以下操作时,这可能会影响您的内容移植:

复制

将内容(图层或库元件)从传统 Animate 文档类型(如 ActionScript 3.0、AIR for Android、AIR for Desktop 等)复制到 HTML5 文档中。这种情况下,将删除不支持的内容类型或将其转换为支持的默认类型。

例如,复制 3D 动画时,将删除对舞台上的对象应用的所有 3D 转换。

导入

导入包含不支持内容的 PSD 或 AI 文件。这种情况下,将删除内容或将其转换为支持的默认类型。

例如,导入应用了渐变斜面角效果的 PSD 文件时,Animate 将删除该效果。

同时处理

同时处理多个文档类型(如 ActionScript 3.0 和 HTML5 Canvas)时,使用选定的不予支持的工具或选项来切换文档。这种情况下,Animate CC 将显示信息,指示不支持该功能。

例如,您曾经在 ActionScript 3.0 文档中创建了一条虚线,现在想在线条工具仍处于选中状态下切换为 HTML5 Canvas。观察鼠标指针和属性检查器,它们会显示图标,指示在 HTML5 Canvas 中不支持这条虚线。

脚本

将删除 ActionScript 组件并注释掉代码。另外,如果在注释块中编写了 JavaScript(Toolkit for CreateJS 用于 Animate CC 13.0),应确保将代码手动取消注释。

例如,当复制包含按钮的图层时,将删除这些按钮。

移植之后对内容应用的更改

以下是将原来的内容移植到 HTML5 Canvas 文档时,应用了更改的类型。

将内容删除

HTML5 Canvas 不支持的内容类型会予以删除。例如:

  • 删除 3D 转换
  • 注释掉 ActionScript 代码
  • 删除视频

将内容修改为支持的默认值

支持内容类型或功能,但不支持功能的属性。例如:

  • 不支持叠加混合模式,将改为标准模式。
  • 不支持虚线,将改为实线。

有关移植期间不支持的功能及其回退值的完整列表,请参阅此文章

将其他文档类型转换为 HTML5 Canvas 文档

使用通用文档类型转换器,您可以将现有的 FLA 项目(任意类型)转换为任何其他文档类型,如 HTML5 Canvas、ActionScript/AIR、WebGL 或自定义文档类型。转换为某种格式时,您可以利用 Animate 为该文档类型提供的创作功能。 

有关更多信息,请参阅转换为其他文档格式

使用 JSFL 脚本将 ActionScript 3 转换为 HTML5 Canvas 文档

Animate CC 提供一个 JSFL 脚本,用于将 AS3 文档转换为 HTML5 Canvas 文档。运行时,JSFL 脚本执行以下操作:

  • 创建一个新的 HTML5 Canvas 文档。
  • 将所有的图层、元件和库项目复制到这个新的 HTML5 Canvas 文档。
  • 对不支持的功能、子功能或功能属性应用默认值。
  • 为每个场景分别创建一个 FLA 文件,这是因为 HTML5 Canvas 文档不支持多个场景。
要将 AS3 文档转换为 HTML5 Canvas 文档,可执行以下操作:
  1. 在 Animate CC 中打开 ActionScript 3 文档。
  2. 选择“命令”>“将 AS3 转换为 HTML5 Canvas 文档”。

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

法律声明   |   在线隐私策略