CreateJS與Flash

HTML5 CANVAS 框架

Transcript

1. CreateJS 我 與 F l a s h 的 愛 恨 情 仇
2. 智遠 Mike 智遠 ⽶蘭營銷策劃股份有限公司/互動設計師 Mike a3804430@hotmail.com ⾶肯設計學苑 講師 a3804430@hotmail.com
3. Flash 吵架 JavaScript Photoshop Illustrator Flash ActionScript3 CreateJS Html & css RWD 3dsMax Html & css Html5 & css3 PHP&MySql RWD Unity Jquery
4. 什麼是CreateJS ?
7. 為什麼要⽤CreateJS ?
9. 推薦原因 1. CreateJS 有很多⽅便的TOOLS可以⽅便加速開發。 2. FLASH CC版本開始有⽀援轉出HMTL5 canvas，可以在FLASH把 2. FLASH CC版本開始有⽀援轉出HMTL5 canvas，可以在FLASH把 動畫完成後快速在CreateJS 使⽤，加速開發時間!!! 3 有完善的範例與⽂件參考 3. 有完善的範例與⽂件參考。 4. 開發的 Grant Skinner 以前也是寫AS的，所以設計API時讓他⻑ 的 的 有點像 的跟AS的API有點像。
10. 只有FLASH CC版本有⽀援CreateJS 使 ⽤???
11. FLASH CS6版本可以在官網找到CreateJS Toolkit
12. 介紹⼀下開發CreateJS的⼯具
13. Intel® XDK
15. ⼩推⼀下喜歡的佈景主題!!!
16. 優點 優點 1. 擁有良好的程式碼提⽰ 2. 有⽀援許多html5的開發套件 3 ⽅便的模擬器可以模擬各⾏動裝置的狀況 3. ⽅便的模擬器可以模擬各⾏動裝置的狀況 4. 還有許多功能可以⾃⼰去發現 4. 還有許多功能可以⾃⼰去發現
17. 缺點 1. 沒有中⽂版 外掛有點少 2. 外掛有點少
18. ⾺上來試試! ⾺上來試試! http://goo.gl/0kS22a
19. 這時⼀定要來個 Hello world!!!
21. Flash 與 CreateJS 的結合
23. 第⼀步 選擇Html5 Canvas開新檔 第 步，選擇Html5 Canvas開新檔 案 第⼆步，新增⼀個影⽚⽚段元件
24. 第三步 將⾓⾊動畫元件都製作在這層影⽚⽚段內 第三步，將⾓⾊動畫元件都製作在這層影⽚⽚段內 利⽤影格名稱來當作⾓⾊的空置狀態，如上圖就有⼀個 birdFly 跟 boom 兩個狀 態。
25. 第四步，將新增的影⽚⽚段新增連結， 因為要匯出給CreateJS使⽤，所以 ⼀定要新增!!!
26. 第五步 前⾯確定製作 第五步，前⾯確定製作 完成後就可以發佈了。
27. 發佈成功後會看到fla存檔路徑下會有多幾個東⻄ 發佈成功後會看到fla存檔路徑下會有多幾個東⻄ • images -> 剛剛flash再把元件⽤道的圖⽚重新編譯出來 • fly fla > 這應該不⽤多說了 • fly.fla -> 這應該不⽤多說了… • fly.html -> flash編譯出來的html檔案 • fiy js -> 剛剛所有的動畫以及元件全部轉⼊這⽀檔案裡⾯ 這⽀js等於是元件庫 fiy.js > 剛剛所有的動畫以及元件全部轉⼊這⽀檔案裡⾯，這⽀js等於是元件庫 到這邊就完成了所有我們要在CreateJS裡⾯所使⽤的素材準備!!! 到這邊就完成了所有我們要在CreateJS裡⾯所使⽤的素材準備!!!
28. 先下載CreateJS中的 E lJS EaselJS
29. movieclip-0.8.0.min.js movieclip 0.8.0.min.js 這是元件⽤的類別，並沒有包含在4⼤ 類別中，所以需要額外引⼊!!!
30. 開⼀個新HTML(不要⽤原本匯出的HTML)，引⼊js的順序 CreateJS movieclip類 (依需求引⼊) CreateJS碰撞 (依需求引⼊) FPS檢測器 (依需求引⼊) CreateJS元件庫
31. 新增Canvas，引⼊主要程式 Main.js主程式(⾃⼰新增的 )
32. 開⼯啦!!!!!!!!!!! 開⼯啦!!!!!!!!!!!
33. 將原本flash編譯的html中的js抽出來然後修改放⼊main.js中
34. 撰寫的內容放這邊
35. 撰寫的內容放這邊
36. 原來這麼簡單!!!
37. gotoAndPlay()
38. ndgmr.Collision.js 碰撞
39. 使⽤矩形包圍體來檢測兩個顯⽰物件是否碰撞 使⽤矩形包圍體來檢測兩個顯⽰物件是否碰撞 ndgmr.checkRectCollision(物件A,物件B) 使⽤像素檢測兩個顯⽰物件是否碰撞(較耗資源) ndgmr.checkPixelCollision(物件A,物件 B,alphaThreshold,true) B,alphaThreshold,true) 1. alphaThreshold 是⽤來設定半透明像素區域是否參予像素檢測預 ，設值是0，設定1表⽰半透明像素區域不參予檢測。 2. 最後的參數設定true將回傳所有相交的部分的矩形區域，設定false僅回 傳⼀個1x1的矩形。 傳 個1x1的矩形。
40. 給⼤家⼩試⼀下⾝⼿ 有點累休息 有點累休息⼀下!!!
41. TweenJS
44. 官⽅資料 Zoë官⽅資料 http://www.fabiobiondi.com/blog/2012/08/createjs‐zoe‐ create‐spritesheets‐in‐adobe‐flash‐for‐easeljs/
46. 使⽤Zoë匯出後會看到2個檔案 使⽤Zoë匯出後會看到2個檔案 1. SWF.json -> 剛剛所設定的動畫編碼 2. SWF.png -> 這應該不⽤多說了…
48. Json檔案就可以直接拿來⽤ Json檔案就可以直接拿來⽤
49. SpriteSheet類 http://createjs com/Docs/EaselJS/classes/SpriteSheet h http://createjs.com/Docs/EaselJS/classes/SpriteSheet.h tml
52. Q&A時間 Q&A時間