如何優雅的用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.主角登場Flash2x。這是Adobe Flash軟體的一款第三方插件，相比自帶的Createjs轉換，它是一款國人自己開發的工具，配合AnnieJS引擎，是我用過的最好的Flash轉Html5工具了。Createjs支持的它都支持，支持動畫，聲音，SpriteSheet自動生成導出，支持時間軸事件，支持遮罩，支持引導動畫，支持傳統補間，矢量補間，支持濾鏡等;相比Createjs他有哪些優勢呢？首先，它支持多fla文件製作同一大型項目，這樣就能更好的分布載入，提高打開速度和閱覽率，支持一健打包合併壓縮js,壓縮圖片K數，但基本不會降低圖片質量，支持模塊式多人開發，最重要的是整個引擎不到70K。

引擎在gitHub上開源:http://github.com/flash2x

通過以及簡單的介紹還不足矣讓大家看到Flash2x製作Html5的項目優勢和開發效率，可能有些人還一頭霧水,這裡給出相應的學習文檔和案例：

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

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

大家快去學習了解吧，相信，很快你們也能做出像騰訊那樣的優質Html5交互項目啦。

推薦閱讀：