HTML5 的時代 Flash 何去何從

講師 : 張宇崑神魂顛倒論壇站長 Flash 骨灰級玩家

Flash 已死 !?iOS -- Apple 的詛咒 Google 不開發 Flash for Android

Microsoft 宣布 IE 9 不支援 Youtube 改用 HTML 5 及 H.264

Facebook 資安長建議不要 Flash Chrome / Firefox 也棄 Flash 而去……

🎃

是的 ! 不要懷疑 !!

那個 Flash Player 確實已死

大家抱著一起 ...• 號稱 Flash 殺手的 Silverlight by

Microsoft• 號稱跨平台跨裝置的 Java by Oracle

擁抱 HTML5 吧Adobe 也這麼說了你還在懷疑 !?

Dead just a joke

Or Alive

只是 華麗轉身Adobe Animate CC

開始打群架了 ( 誤 )Muse Dreamweaver

更多行動應用Mobile App

線上功能更厲害Adobe StockCC Libraries

Animate CC∎ Flash 相同經驗繼續沿用∎ 時間軸、工具箱、元件庫…∎ 影格動畫、漸變∎ 按鈕、影片片段

產出 HTML5 Canvas 跨平台裝置應用

擁抱 Canvas吧 Canvas 是啥 ? 能吃 ? 手機能看到嗎 ? Canvas 能做到神馬效果 ?

Canvas 來自於 HTML5手機、 PC 、平板都支援

<canvas id="myCanvas" width="200" height="100"></canvas>

一行標籤就能建立和 Flash Player 一樣的區塊

Canvas 能幹嘛 ?其實很多事情都能辦到舉凡 畫圖、動畫、圖表、甚至遊戲

Canvas 範例手繪板http://bit.ly/2dx5uCBhttp://bit.ly/2dx5Etnhttp://bit.ly/2dx5OAZhttp://bit.ly/2dx5Bhf

GoJS 圖表http://bit.ly/1Nl5UST

一隻蜘蛛 !?http://bit.ly/1Nl6iR7

一個遊戲http://bit.ly/2dx97rZ

更多範例 http://bit.ly/1Nl6jER http://bit.ly/1Nl6eRE

Go go go 開始吧<canvas id="myCanvas" width="200" height="100"></canvas>

<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script>

洪荒之力... 也不夠

其實也有別的選擇http://www.createjs.com/

我知道你很難過前端工程師的血淚技能圖http://tinyurl.com/h3ky6ko

主角才登場 XD!

Animate CC快速轉換 Flash --> HTML5

快速轉換兩招Animate CC • 直接轉換

• 影格複製

製作方式流程太好啦 ~ 所有經驗能夠沿用

產出 HTML5 的內容Canvas 不支援的功能 會被移除，或轉換成支援的預設值

和製作 Flash 的方式相同PC 、手機都能使用避開一些 Canvas 沒有的功能

產出了甚麼內容答案在 發佈設定 裡面

使用最新的合併 CreateJS 元件庫產生網頁檔案 HTML/JS/images

SWF 沒了， HTML5 還在呢OAM 格式用途可以放置在 Dreamweaver 、 Muse 和 InDesign 中

轉換限制 :

避開一些 HTML5 Canvas 沒有的功能

Place your screenshot here

事情真的這麼美好 !?

∎ Canvas 不支援的功能會被移除或轉換成支援的預設值∎ 每個場景會產生一個 fla 檔 ∎ 注意看 Output 訊息∎ 注意工具列，不支援的會有提示∎ components 組件 不能用

∎ 3D 變形 不能用∎ Overlay Blend 覆蓋混和模式 會被設定為預設值： Normal∎ 影格從 0 開始∎ Video 功能 請用 HTML 5 吧

HTML5 內建 Video功能<video height="236" width="420"> <source src=“test.mp4" /> <source src="test.ogv" /> <source src="test.webm" /></video>

Canvas 是特效用途<video height="236" width="420"> <source src=“test.mp4" /> <source src="test.ogv" /> <source src="test.webm" /></video>

Video 特效範例影片放大翻轉 http://bit.ly/2d8BcDg遮罩內的影片 http://bit.ly/2d8CA91讓 iPhone 播放影片不跳出視窗 http://bit.ly/2d8Dd2AVideo 爆炸效果 http://bit.ly/2d8E4jF

來寫 Code 吧createJS 本身就很類似 ActionScriptHTML5 的世界寫的是 Javascript在動作面板中寫些甚麼 ?

其實寫法很雷同影格播放 / 暫停 Stop / Play事件偵聽 addEventListener跳影格 gotoAndStop開視窗 window.open顯示訊息 alert(“ 要顯示的內容” )

轉換實例原本的 fla 能快速轉換嗎 ?

動畫絕對沒問題請看實例演示

網路上也不少 http://keyframer.com/https://www.youtube.com/user/DrawWithJazzahttps://www.youtube.com/user/SamGreenMedia

拿來做 banner 也不賴

熟悉的時間軸和漸變回來了

簡單遊戲也不錯

還記得 按鈕 亂數 跳影格 嗎 ?

更多遊戲 ...

也有原始碼可參考 https://github.com/CreateJS/AdobeAnimateDemo

影片 : https://www.youtube.com/watch?v=ZfIwW-CeBIE&feature=youtu.be

不止是製作，更是流程的強化元件庫雲端化，真方便 !

缺靈感找圖庫 ? 試試 Adobe Stock吧咖啡店就能工作 ? 行動 app 可以幫忙

更多∎ 放煙火

http://bit.ly/2d8FgUl∎ 翻書 http://bit.ly/2dxnUD6

http://www.20thingsilearned.com/zh-TW/threed/1

http://bit.ly/2dxoL6z

morehttp://bit.ly/2d8GMWg

∎ 圖表 http://bit.ly/2dxqWqK

∎ 遊戲 http://bit.ly/2dxpeG5

謝謝大家Any questions?You can find me at flash2u@gmail.com

線上見

簡報下載請私訊管理員