HTML5 Canvas 是什么?                  

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

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

在网页中,您可以使用 <Canvas> 标签添加 Canvas 元素。然后便可以使用 JavaScript 来增强这些元素以便构建交互性。

新文档类型 HTML5 Canvas                

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

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

Flash Professional 和 Canvas API                  

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

创建 HTML5 Canvas 文档                  

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

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

  1. 启动 Flash Professional CC。

  2. 在欢迎屏幕上,单击“HTML5 Canvas”选项。这会打开一个新的 FLA,其“发布设置”已经过修改,以便能够生成 HTML5 输出。

  3. 也可以选择“文件”>“新建”来显示“新建文档”对话框。单击“HTML5 Canvas”选项。

在 HTML5 Canvas 文档中添加交互性                  

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

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

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

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

代码提示


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


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

语法加亮显示


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


代码着色


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


加括号


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


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

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

  1. 选择要对其添加 JavaScript 的帧。

  2. 选择“窗口”>“动作”以打开动作面板。

使用 JavaScript 代码片段                  

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

CreateJS 文档参考              

CreateJS 库

API 文档

Github 上的代码示例

EaselJS

http://createjs.com/Docs/EaselJS/modules/EaselJS.html

https://github.com/createjs/easeljs/

TweenJS

http://createjs.com/Docs/TweenJS/modules/TweenJS.html

https://github.com/createjs/tweenjs/

SoundJS

http://createjs.com/Docs/SoundJS/modules/SoundJS.html

https://github.com/createjs/soundjs/

PreloadJS

http://createjs.com/Docs/PreloadJS/modules/PreloadJS.html

https://github.com/createjs/preloadjs/

将动画发布到 HTML5                  

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

  1. 选择“文件”>“发布设置”

  2. 在“发布设置”对话框中,指定以下设置:

输出


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


循环时间轴


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


发布 HTML


如果未选中,则不生成 HTML 文件。


资源路径


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


JAVASCRIPT 命名空间


元件、图像和 CreateJS 库被放入和从中引用的命名空间。


托管的库


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


包括隐藏图层


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


压缩形状


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


多帧边界


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


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

注意:          

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


了解 HTML5 Canvas 输出                  

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

HTML 文件


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


JavaScript 文件


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


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

将现有内容移植到 HTML5 Canvas                  

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

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

复制


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

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


导入


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

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


同时处理


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

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


脚本


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

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


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

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

将内容删除


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

  • 删除 3D 转换

  • 注释掉 ActionScript 代码

  • 删除视频


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


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

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

  • 不支持虚线,将改为实线。


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

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

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

  • 创建一个新的 HTML5 Canvas 文档。

  • 将所有的图层、元件和库项目复制到这个新的 HTML5 Canvas 文档。

  • 对不支持的功能、子功能或功能属性应用默认值。

  • 为每个场景分别创建一个 FLA 文件,这是因为 HTML5 Canvas 文档不支持多个场景。

要将 AS3 文档转换为 HTML5 Canvas 文档,可执行以下操作:

  1. 在 Flash Professional CC 中打开 ActionScript 3 文档。

  2. 选择“命令”>“将 AS3 转换为 HTML5 Canvas 文档”。

注意:          

请确保阅读完输出面板中的警告信息。这些警告会让您了解在转换期间对内容应用了哪些更改。


在 HTML5 Canvas 中转换与重复使用 ActionScript 资源                    

作者:Suhas Yogin                                          


,