从 Flash 到 HTML5 之捷径

从 Flash 到 HTML5 之捷径

Steve Jobs在2010年4月发布文章《关于Flash的思考》(中文),引发了HTML5与Flash史诗般的论战。许多积极的开发者提出了他们的观点。一些人说Jobs错了,或者部分的或完全的同意。3年过去,HTML5日益强大,我这样的聪明人当然应该过去瞅瞅。可问题是:怎么开始呢?

身为Flash开发人员,从巨混乱的HTML5工具、库类或框架里找到入手之处,真是难为我的。经过忍受学习HTML、JavaScript、jQuery和CSS基础的头痛,加上很好的耐心,我挑选了一些工具,认为可以简化从Flash到HTML5的转换。我的想法是尝试用Flash已有的东西创建HTML5。这些有:

PreloadJS加载资源

有很多不同和有趣的方式加载资源到HTML5页面中。Grant Skinner有长时间Flash开发经验,他的PreloadJS似乎是个好的开始。PreloadJS是CreateJS的一部分,包含了许多的库类,比如动画。

使用Cufón支持大尺寸自定义字体

自定义字体在Flash中使用频繁,但是在HTML5上很难做。最大的问题是浏览器的不一致,也是HTML作品面临的最大问题。你可能会用CSS属性@font-face嵌入字体。不过Cufón提供JavaScript的解决方案,可以减少一些问题,尤其是使用大尺寸字体的时候。

Cufón的优势是处理大字体时Windows上看起来更平滑,在不同浏览器上看起来完全一样。

Cufón另一个好处是使页面加载更快,不需要等待整个字体文件下载。你还可以只加载特定你需要的几个字符。你可以从这个体验教程开始。

补间动画(Tweening)是大头

动画使项目更好看,以前也有如Tweenlite样的好工具。幸运的,Greensock的创始人和他的伙伴决定让Greensork Tweening支持JavaScript

HTML5 Canvas 绘图API

谁不被ActionScript的绘图API所吸引?事实上,有很多开发者更喜欢用可重用的代码制作组件,而不是依靠Flash IDE。HTML5 Canvas API带来了方便。它和Flash不完全相同,但绘出一些图形后你会发觉一些和Flash“grapics.drawRect()”相似的方法。如果你想更接近Flash的操作,使用EaselJS,也是CreateJS的一部分。Lee Brimelow写了体验教程入门。

 

更好的信号事件机制

事件机制是绝大多数Flash应用的核心,而且他们无法在HTML5中那么有效。当然你可以使用JavaScript的原生事件功能。我找到Miller Mederios开发的自定义事件/消息系统,JS-Signals,可能是更好的选择。

Flash深链接,试试Crossroads

不是什么项目都需要这个,不过Flash深链接增强可用性很多使用。Miller Mederios的Crossroads胜任。还有别的选择,不过我还是觉得这个易用。

(译者注:Flash深链接包括BrowserManager操作浏览器后退前进等,和HistoryBrowser操作URL#fragment)

为了方便,我就不提及比如音频、视频、3D、物理、地理和本地存储这些更先进的技术。不过我建议你试试我提到的一两个工具。它们会是很好的热身,更方便的从Flash到HTML5,希望这些对你有帮助。

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们
This entry was posted in html, javascript and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>