如何优雅的用Flash开发Html5交互项目

经常听见身边好多前端技术大牛抱怨随着Flash技术的日益冷落，Html5的兴起，现在要制作一款像Flash时代的交互Html5应用真的是要费尽周折。页面排版要一个个自己来，动画效果要一个个自己来，场景过渡要自己用代码脑补......等等。

作为一个Flash的忠实粉丝，对Flash的那一套动画视觉在交互上的应用那是了如直撑，得心应手，一直也在寻找Flash和Html5的结合点。Html5在互动方面也运用了类似于FlashPlayer插件功能的Canvas标签，这也是Html5最大的卖点和核心。但是由于各个终端对Html5的标准的支持不统一，导致现在制作Html5项目坑一大堆，兼容性差做起来真的想死。一个简单的交互项目因为一个兼容性的Bug可以让一个前端开发者直接漰溃掉。

因此，在Html5发展的前期，大家就只能使用Div+Css技术制作简单的Html5项目，以免踩到坑。像以前Flash那到动感流畅的交互式动画效果想都不敢想。这时涌现出了一批Html5模板制作工具，像易企秀，IH5,初页等等。也慢慢开始出现了一些类Actionscript3框架的js引擎，如Createjs,Lufylegend,Egret,LayaBox。感觉Html5一切都是那么欣欣向荣的发展。但一直到现在，都没有一款能够和Adboe Flash相当的Html5动画制作软件。大量的动画师仍然只能借助序列帧，视频来表现他们的创意。显然这些技术在视觉效果上是达到了他们的想要的，但是在互动交互上却远远不够。这些序列帧和视频都是流式播放,中间不能掺插任何交互体验，也就只能一播到底。换句话说就只是把视频放到了Html5里面看，结尾处再加一些简单的留资和互动。就是这样的一种交互体验在2015年下半年到2016年都火的不得了，大量营销公司进行制作，大量客户也这样玩。

其实，这样的一种半播半互的交互式体验到现在已经是泛滥成灾了。我收到过好多客户的需求，他们都是要求能否多一些创意和互动，而不是一味的一条片放到底。大部分营销互动制作公司都会告诉客户，Html5是不能做成像Flash那样的交互和效果的，制作周期长，费用高，手机不支持......等等，这也确实是现在Html5发展的一个客观存在的问题。但如果用Flash转Html5技术，那就不一样啦。

说了这么多，是的，重点来了，既然Canvas是模仿的FlashPlayer,好多js交互框架模仿的Actionscript3。那么为什么不能把Flash动画导出来直接给Html5用呢。答案当然是肯定的，Adobe 公司自己先带头，结合Createjs 引擎完美的将95%以上的Flash功能及动画效果一键转换成Html5。

说到这里，可能很多前端完全没有了解过Flash或者听都没听说过Createjs。是的，我身边接触的前端大多数都是传统的前端开发者。这里为什么用了传统二字呢，让我慢慢道来。所谓的传统前端开发者就是他们大多是只用Div+Css来排版布局，用一些Css+js框架做动画。对Canvas是持怀疑态度的，做动画大多数时候用Tween,也会自己写一些小效果，再就是用Css自带的一些动画效果类，再就是用很多市面上成熟的Div+Css动画组件。所以，他们会非常熟练的运Div+Css做一些模板式的Html5交互，像易起秀那种。

那么说到传统前端那一定还有另一种前端是吧。对的，另一种前端可能算不上真正的前端，他们是Flash时代的遗孤。在时代的变迁中，为了生存不得不把自己向前端技术转变。他们讨厌Html标签，对js弱类型语言深恶痛绝，对Div+Css 基本不懂。但他们喜欢Canvas，因为这个东西让他们找到了Flash的影子。于是一批类似Actionscript3的js引擎大量涌现，就是我上面说的Lufy,Egret,Layabox,PixiJs以及最近的新秀AnnieJS。他们对Flash交互根深地固,他们对Flash情有独钟。但是当Adobe Flash公司推出Createjs 转换成Html5项目的时候，大批的优秀Flash动画师和技术人员不是升迁，就是转行。他们并没有好好的利用Flash转Createjs的技术来实现在这个Div+Css动画泛滥年代的华丽转身。

但好东西总有人发掘和使用。这里就要说一说腾讯的Html5互动项目了，大家是不是有看到只要是腾讯做出来的Html5项目就会非常的出彩，漂亮，动画飘逸，交互天成。是的，他们就是大量使用的Flash和Createjs技术。就是因为他们的团队当中有Flash的大牛，看到了这个结合点，让Flash在Html5时代里依然大放光彩。在满世界都在鼓吹Flash已死，Html5是趋势的今天，他们不骄不躁，结合Flash技术做出了一个又一个经典的Html5项目。

在这里我个人观点，大家都说Flash已死，只能说是Flash插件不能使用啦。但Flash的工作流程和工具是死不了的，只要有互动存在，有动画制作，有交互体验的项目存在，Flash就一定有他的用武之地。所以，或多或少的学习一下Flash，对做视觉这块以及理解视觉渲染原理方面有着非常大的作用。现在100%的js交互引擎框架都是用的Actionscript3的那套框架理念。

慢慢的Flash式的Html5交互火了起来，我们也用Flash制作了相当多的精彩案例。周围的传统前端也再不会把我们当另类看了，也开始试图了解我们，这样的效果和交互是怎么在这么短的时间内完成，这么复杂的效果为什么修改起来也会这么方便，他们开始试着去接受Flash，学习Flash,从中尝到了甜头，再也不用自己脑补动画效果了。再也不用担心好不容易脑补出来的一个效果被客户否定了需要重写的痛苦了，再也不用满屏的tween,setTimeOut...。一切的一切所见所得，动画师做好动画，前端写好逻辑，分工明细，制作简单，高效。再也不用望着腾讯的高品质Html5兴叹了。

好，说了这么多，高潮来了，大家憋住。那我们用Flash制作Html5项目的具体流程以及使用了哪些工具呢？这里为大家一一介绍。

1.NodeJs Ant Gulp Typescript 安装好，配置好，不会的可以百度下。

2.webstorm 前端开发工具，应该说是最好用的前端开发工具了，觉得不好用的应该是用的少。

3.Adobe Flash CS6 及以上版本。做动画怎么能少了这个呢，这可是最最最重要的核心软件了。

4.Adobe PhotoShop CS6及以上版本。直接将PSD的内容分层准确的导入到Flash，根本无须麻烦的切图，对位。

5.主角登场Flaspx。这是Adobe Flash软件的一款第三方插件，相比自带的Createjs转换，它是一款国人自己开发的工具，配合AnnieJS引擎，是我用过的最好的Flash转Html5工具了。Createjs支持的它都支持，支持动画，声音，SpriteSheet自动生成导出，支持时间轴事件，支持遮罩，支持引导动画，支持传统补间，矢量补间，支持滤镜等;相比Createjs他有哪些优势呢？首先，它支持多fla文件制作同一大型项目，这样就能更好的分布加载，提高打开速度和阅览率，支持一健打包合并压缩js,压缩图片K数，但基本不会降低图片质量，支持模块式多人开发，最重要的是整个引擎不到70K。

引擎在gitHub上开源:http://github.com/flaspx

通过以及简单的介绍还不足矣让大家看到Flaspx制作Html5的项目优势和开发效率，可能有些人还一头雾水,这里给出相应的学习文档和案例：

工具地址:http://flaspx.org/

引擎地址:http://annie2x.com/

大家快去学习了解吧，相信，很快你们也能做出像腾讯那样的优质Html5交互项目啦。