星期五, 5月 07, 2010

漫談Flash 與 HTML5

戰火的緣由 

最近由於Apple iPhone/iPad/iPod 等熱賣產品始終不願意支援Flash, Jobs 甚至放話Flash是舊時代的產物, HTML5才是未來, 雖然Adobe CEO 努力的解釋正在持續改善Flash的效能,但Jobs 的回應是,請Adobe不要再糾纏.

Jobs 的觀點是:

First, there’s “Open”.   Flash player 是專有的player,不開放. 我想很多人不知道Device 商還需要付license fee給Adobe的

Second, there’s the “full web”. Jobs反擊Adobe說不支援Flash player就不能有完全的web體驗,他舉出大部分的影音網站,包括Youtube都有提供H.264的格式,而不能玩Flash game也不是問題, App store裡有5萬個game.

Third, there’s reliability, security and performance. 這是Flash player很難改善的問題,畢竟他是瀏覽器裡的plug-in

Fourth, there’s battery life. Flash 相當吃系統資源, 當然耗電

Fifth, there’s Touch. Flash player 沒有針對電容式Touch screen 作微調, touch的體驗不佳

Sixth, the most important reason.  Adobe 希望Apple app store的 developers 用Flash來開發Apple行動裝置程式,由Flash硬轉為iPhone app 雖然可用, 但卻會造成系統不穩,因此Apple會禁止使用Flash開發的App上架.

 

當然Adobe方面的回應是新的Flash player 10.1版將會在安全性及效能上有重大更新,播放影片以可使用硬體加速解碼,但Apple方不願意等待,雙方合作可謂破局, Adobe只好轉向全力與Android與Microsoft平台合作.

 

Flash 的演進

剛接觸Flash 是在Flash2.0 大約1998年的時候,當時想在web上做game,有考慮使用較普遍的Java applet,但java applet 相當不穩定且沒有Macromedia Flash這樣好用的開發工具, 於是開始鑽研Flash,這幾12年間Flash不斷演進, 因此也多了Flash動畫師與Flash程式設計師這2種職務,雖然Flash 的 開發工具及功能持續演進但安全性及效能的罩門卻始終沒有大幅的改善,對於Flash 我當時的原則是

1. 能用DHTML 就不用Flash

2. Flash 裡的圖片一定要向量化,圖片盡量重複使用,一些移動及變形都要用程式優化

3. 需要被搜尋的內容絕不作成Flash

4. Flash 可以被反組譯,重要的帳號密碼都不能包在裡面

主要就是安全性及效能和SEO的考量,因此Flash 被定位在製作

1. 動畫

2. 動態Banner廣告

3. 簡易的Game

4. 影音光碟

5. 需特效的GUI

 

一直以來只要播放影片就只用embed media player的方式播放wma/wmv/mp3 等格式, 想不到Marcomedia 在推出Flv格式後,竟改變了網路影音由Microsoft wmv 、Apple quicktime 及 Real rm 格式獨占的局面

記得當時公司內的工程師建議Vlog使用FLV格式時,大家也是質疑他的效能及品質, 畢竟Vlog不是PPV的VOD服務,但若定位在互動性及娛樂性上, 其實FLV有絕對優勢, 相較於使用media player 他的優勢為

1. 可以自訂Player的 GUI

2. 可以在影片上加layer,因此隨時插上廣告及文字都沒問題

3. 可以存取webcam 直接錄製

4. 互動性佳, 可以在影片上做相關影片推薦、評分..等功能

而且Abobe在Flash player 9.0 r115後推出了新的f4v格式, 使用H.264編碼,也可支援標準h.264格式、HD畫質,並終於推出adobe media encoder cs4影片編碼工具, 比起flv的on2 vp6 及h.263編碼品質又好了許多.

這幾年也不乏有挑戰者來挑戰Flash的地位,如Microsoft的Silverlight,但都還看不到威脅性,個人觀察其原因為

1. 好用又完整的開發工具

Photoshop + Dreamweaver + Flash professional + illustrator  這樣的開發工具群目前沒有對手

2. 跨平台跨瀏覽器

adobe 在跨平台上的努力值得誇讚, Silverlight這部份有點薄弱

3. 廣大的3rd party 與 Developer forum

隨便找也一堆sample code, 不會寫程式的設計師也可以輕易copy到一些特效程式

http://www.flashcomponents.net/

http://www.flashkit.com/

http://www.freedownloadscenter.com/ 

Adobe 更把Flash 由網站推到桌面程式, 推出 Flash AIR /Flash Flex 架構及 Flash builder / Flash platform 開發工具,想讓Flash 變成擁有酷炫外表的Application,當這個方向,延伸到iPhone/iPad/iPod 上時,卻踢到了鐵板.

 

 

HTML5 VS Flash

 

Apple 以 Flash 耗電、耗用硬體(CPU)資源、不穩定、不安全..等理由, 在App store裡禁用Flash開發,這點美國政府已在調查其公正性, 而我們也來看看受Jobs推崇的Open standard HTML5 有何過人之處.

  • 這是HTML5 的spec

http://www.w3.org/TR/html5/

 

  • HTML tags 一覽表,新增了不少常用但HTML4.0沒有定義的tags、Event 及 Attribute

http://www.w3schools.com/html5/html5_reference.asp

 

  • 這個網站還展示了9 個讓人驚奇的HTML5的範例
    • 最讓人驚奇的是Guacamole,在不裝任何plug-in下,在瀏覽器上做出VNC的client

 

個人覺得比較實用的是postmessage 到 iFrmae ,並用eventListener 收訊息

Localstorage 與 SessionStorage 可以減輕server的負擔,也可應用在離線瀏覽

Drag & Drop 蠻好用的,新的input type 如 range 、 date、url、email 很不錯,繪圖能力也增強不少,還有針對3D優化

 

除此之外, 還有針對Ajax的解決方案 websockets API

可以背景執行javascript的 web worker 

 

以下還有一些相關的示範網站

http://html5tutorial.net/

http://www.youtube.com/html5

http://html5demos.com/

http://mugtug.com/sketchpad/

本來只有Google、 Apple與Firefox支持的HTML5,日前Microsoft 也宣佈要開始支援,看來把Flash一些補足Browser所不能的功能包進新一代的瀏覽器已經是趨勢,Adobe的確要思考怎樣去支援Html5,及釐清自己的定位,一直以來HTML與Flash 是魚幫水 水幫魚的關係,彼此都有進步空間,比較確定的是Adobe應該還是可以開發出全世界最好用的Html5開發工具,但Flash player會不會慢慢消失就要看各瀏覽器大廠的決心了

Adobe 對HTML5 取代Flash的看法 :  Adobe:HTML5不會終結Flash ; Adobe:『打不贏,就加入他吧!』

 

這邊有篇日本野州先生的比較文章, 說明了Flash 目前的優勢

http://clockmaker.jp/blog/2010/02/flash-vs-html5/

我的歸納如下:

1. video : HTML5 的video codec 各家瀏覽器支援並沒有統一,Flash 影片沒有此問題,而且flv/f4v 還有字幕同步及文字註解功能

2.直排文字 : 直有亞洲地區才有的直排文格式,可以在Flash 上呈現, HTML5沒有規範。

3.動畫製作 :  Flash 的動畫製作有納入時間軸概念及漸變功能 , HTML5 沒有

4. 3D : 多種3D模型可以匯入Flash內做動畫 ,如 Papervision3D 、Swift3D、 3dMax、Maya…等。

5. 錄音錄影拍照 :  除了透過webcam 錄影 錄音,還可以將Flash mix過的音樂錄起來,也可以caputure Flash screen 成一張照片

6. AR 擴增實境:運用webcam讀取的技術,有許多AR都運用Flash 當其Player,也有些toolkit 可以用,如FLARtoolkit

 

 

個人對Adobe flash 還是頗有信心,HTML5的互動性及普及性要趕上Flash 還有一段距離 , 而且如果你寫過腳本做Flash動畫,就會知道Flash有多好用了,況且有Microsoft 、Google 及 Apple 這3個死對頭一起推動的規格,最後應該會各走各路吧,我們就靜看其發展。

但Adobe 不再痛定思痛,好好改進自己的致命傷,其被取代的危機只會越來越大。

 

最近越來越多人出來打落水狗

Smartbook 在哪裡?ARM:「一切都是 Flash 和 tablet 的錯!」

Opera 也在 Flash 大戰中參一腳

 

是啦!在PC上已經跑不太動的Flash,怎麼在行動裝置上跑呀,Adobe趕緊加油吧,要不然大家只好定新規格把你換掉了

 

結論

很明顯Flash 不像Jobs所說是要被淘汰的舊技術,只能說以他目前的效能實在不適合在資源相當有限的行動裝置上執行,Apple 為了讓用戶使用上更流暢,甚至還放棄了多工,怎會容許吃資源的怪物在他的OS上跑,這是Apple堅持的地方,但HTML5和Flash看來還會並存合作好一陣子,說誰取代誰,有點言之過早。

沒有留言: