在 Animate 中创建和发布 HTML5 Canvas 文档

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

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

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

新文档类型 HTML5 Canvas

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

Animate 集成了 CreateJS，后者支持通过 HTML5 的开源 Web 技术创建丰富的交互性内容。Animate 可以为在舞台上创建的内容（包括位图、矢量、形状、声音、补间等等）生成 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 使用 CreateJS 库发布 HTML5 内容。 CreateJS 是一个模块化的库和工具套件，它支持通过 HTML5 开放的 Web 技术创建丰富的交互性内容。CreateJS 套件包括：EaselJS、TweenJS、SoundJS 和 PreloadJS。CreateJS 可分别使用这些库将舞台上创建的内容转换为 HTML5，从而生成 HTML 和 JavaScript 输出文件。您还可以对这个 JavaScript 文件进行操作来增强内容的表现力。

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

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

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

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

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

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

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

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

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

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

使用 JavaScript 代码片段

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

CreateJS 文档参考

通过代码引入交互性

在让动画具有交互性方面，Javascript 为您提供了多种选择。想要了解如何为您的角色添加交互式动作？在本示例结尾观看教程并按照这些步骤操作。

如何让您的内容与 HTML5 交互

将动画发布到 HTML5

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

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

基本设置

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

将文档导出为纹理 将矢量动画导出为纹理以提升动画的表现力。有关更多信息，请参阅纹理发布。

 仅当未选中“将图像组合到 Sprite 表中”选项时，此项才适用。

 您可选择导出从 Canvas 文档中导入的所有图像（包括压缩后的图像）并保留其尺寸。取消选中“基本”选项卡中的“将文档导出为纹理”和“将图像组合到 Sprite 表中”选项。图像会被导出且大小不会有任何变化。

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

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

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

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

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

高级设置

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

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

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

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

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

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

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

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

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

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

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

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

HTML 模板变量

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

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

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

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

对导入和导出 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”选项不能同时存在。

添加全局和第三方脚本

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

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

添加第三方脚本

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

若要添加第三方脚本： 

将 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. 在“舞台颜色”色板中，选择“无色”。

将位图导出为 Sprite 表

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

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

处理 HTML5 Canvas 文档中的文本

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

静态文本

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

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

动态文本

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

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

向 HTML5 Canvas 文档添加 Web 字体

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

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

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

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

了解 HTML5 Canvas 输出

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

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

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

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

将现有内容移植到 HTML5 Canvas

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

不过，在 Animate 中使用 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 将显示信息，指示不支持该功能。

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

将删除 ActionScript 组件并注释掉代码。另外，如果在注释块中编写了 JavaScript（针对 Toolkit for CreateJS 与 Animate 13.0），应确保手动取消注释代码。

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

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

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

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

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

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

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

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

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

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

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

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

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

• 创建一个新的 HTML5 Canvas 文档。
• 将所有的图层、元件和库项目复制到这个新的 HTML5 Canvas 文档。
• 对不支持的功能、子功能或功能属性应用默认值。
• 为每个场景分别创建一个 FLA 文件，这是因为 HTML5 Canvas 文档不支持多个场景。

1. 在 Animate 中打开 ActionScript 3 文档。
2. 选择“命令”>“将 AS3 转换为 HTML5 Canvas 文档”。

 仅当未选中“将图像组合到 Sprite 表中”选项时，此项才适用。