Post on 16-Feb-2017
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>
洪荒之力... 也不夠
主角才登場 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
線上見
簡報下載請私訊管理員