从Flash移到html5

2011年11月，Adobe宣布在发布用于Android设备和BlackBerry Playbook的Flash Player 11.1之后，将停止开发用于移动设备的Flash Player，而是专注于为移动设备构建HTML5应用程序的工具。 尽管Adobe重申了对个人计算机浏览器的Flash Player支持，但许多人认为Adobe终止对PC版本的支持只是时间问题。 对于在Flash应用程序上投入大量资金的公司以及已经投入时间来学习构建Flash应用程序所需的编程技能的开发人员，这是个坏消息。

让我们看一下Flash和HTML5之间的一些区别，并提供一些技巧和工具来帮助简化这两个平台之间的过渡。

Flash平台基础

Flash通常用作总称，指实际上由以下组件组成的专有Adobe平台：

• Flash：主要用于设计和创建动画的工具
• Flex：用于构建应用程序的开发环境，包括软件开发套件（SDK）
• MXML：Flash项目中使用的标记语言
• ActionScript：一种脚本语言

要在Web浏览器中运行Flash应用程序，必须下载Flash Player插件。 或者，可以将Flash应用程序编译为在Adobe AIR桌面运行时环境中运行。 同样，必须在用户计算机上安装Adobe AIR才能运行AIR应用程序。

Flash使用以下主要文件格式：

• .fla：Flash项目文件
• .flv：Flash视频文件
• .swf：可能包含.flv文件的已编译Flash / Flex应用程序文件

HTML5平台基础

HTML5是一个开放标准平台，包含以下内容：

• HTML5：用于创建网页的标记语言
• 级联样式表3（CSS3）：样式表语言，用于指定HTML5网页上对象的格式
• 应用程序编程接口（API）：支持诸如拖放和跨文档消息传递之类的功能的API
• JavaScript：与HTML5一起使用以启用动画的脚本语言

HTML5的优点之一是它可以在Web浏览器上本机运行，并且不需要插件。 但是，要正常运行，浏览器必须支持HTML5网页的HTML5和CSS3功能。 主要的浏览器对HTML5和CSS3的支持程度不同，并且实现不完整。 浏览器几乎普遍支持JavaScript。 但是，用户可以选择“关闭” JavaScript，在这种情况下，使用JavaScript创建的客户端脚本将无法运行。

HTML5文件格式包括以下内容：

• .htm / .html：HTML5网页文件
• .css：CSS3样式表文件

截至2011年，当前的HTML5规范未指定受支持的视频文件格式，而是由各个浏览器选择要支持的格式。 当前支持的格式包括：

• .mp4：带有H.264视频编解码器和AAC音频编解码器的MPEG 4视频文件
• .webm：具有VP8视频编解码器和Vorbis音频编解码器的WebM视频文件
• .ogg：具有Theora视频编解码器和Vorbis音频编解码器的Ogg视频文件

将Flash项目转换为HTML5

由于平台的差异，将复杂的Flash项目手动转换为HTML5是一项劳动密集型且耗时的过程。 开发人员必须将使用Flash和ActionScript创建的动画转换为HTML5和JavaScript。 幸运的是，有一些工具可以帮助自动完成从Flash到HTML5的转换。

Adobe已发布Wallaby，这是一种实验工具，可以从Adobe Labs网站免费下载。 Wallaby将Flash项目文件（.fla）作为输入，并导出HTML5并支持CSS和JavaScript文件。 但是，Wallaby发行说明包含相当长的未转换功能列表-其中最重要的是ActionScript，电影和声音。 Wallaby是一种有限的工具，主要用于将动画图形内容转换为HTML5，以便可以使用Web页面设计工具将其集成到Web页面中。

Google实验室发布了Swiffy，这是一个基于Web的免费工具，可以将已编译的Flash应用程序文件（.swf）转换为HTML5。 然后可以将输出嵌入到网页中，但是对于开发人员而言，编辑起来并不容易。 与Wallaby一样，Swiffy不会转换所有Flash功能。 Swiffy支持ActionScript转换，但仅支持2.0版（ActionScript当前为3.0版）。 Swiffy输出仅在支持可缩放矢量图形（SVG）的浏览器上运行。

Edge，HTML5的新开发工具

随着HTML5成为首选平台，出现了新的工具来提供集成HTML5，CSS3和JavaScript的设计和开发环境。

2011年8月，Adobe发布了Edge开发工具的预览版。 Edge使设计人员能够创建HTML5动画并将动画添加到现有的HTML5项目中。 Flash设计人员将在Edge用户界面中识别一些熟悉的元素，包括舞台，属性窗口和动画时间线。 但是，Edge会生成CSS和JavaScript文件，其动画内容存储在JavaScript Object Notation（JSON）数据结构中。

在撰写本文时，Edge预计其第四版预览版。 每个版本中都添加了新功能。

将YouTube转换为HTML5

转向HTML5的一个迹象是，YouTube现在提供了使用HTML5视频播放器观看视频的选项。

在提供HTML5选项之前，所有YouTube视频都是通过Flash视频播放器交付的。 用户可以上传几乎任何格式的视频文件，然后YouTube会将每个视频转换为所需的Flash（.flv）格式。

YouTube现在还使用H.264视频编解码器和WebM格式对视频进行编码，以用于HTML5交付。 要查看HTML5格式的视频，您必须具有支持HTML5视频标签和YouTube使用的视频格式的浏览器。

闪光的遗产

如前所述，Adobe目前正在继续在PC版Fl​​ash Player上进行开发。 即使Adobe将来不再支持Flash Player，Web上仍将继续支持旧版Flash应用程序-可能会持续数年。 因此，Flash不会很快完全消失。 可以使用工具将Flash应用程序转换为HTML5应用程序，但是目前，这些工具不支持所有Flash功能的转换。 随着HTML5标准成为主流，Flash文件转换工具可能会变得更加复杂，并且将创建新的工具来使用HTML5平台开发内容。