CreateJS與Flash的愛恨情仇

1. CreateJS我 與 F l a s h 的 愛 恨 情 仇

2. 智遠
職業米蟲/SOHO
Mike
a3804430@hotmail.com

3. JavaScript
ActionScript3
CreateJS
Html & css
Html5 & css3PHP&MySql
RWD
Jquery
Photoshop
Illustrator
3dsMax
Unity
Flash
吵架

4. 什麼是CreateJS ?

7. 為什麼要用CreateJS ?

9. 推薦原因
1. CreateJS 有很多方便的TOOLS可以方便加速開發。
2. FLASH CC版本開始有支援轉出HMTL5 canvas，可以在FLASH把動
畫完成後快速在CreateJS 使用，加速開發時間!!!
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. 方便的模擬器可以模擬各行動裝置的狀況
4. 還有許多功能可以自己去發現

17. 缺點
1. 沒有中文版
2. 外掛有點少

18. 馬上來試試!

19. 這時一定要來個 Hello world!!!

21. Flash 與 CreateJS 的結合

23. 第一步，選擇Html5 Canvas開新檔案
第二步，新增一個影片片段元件

24. 第三步，將角色動畫元件都製作在這層影片片段內
利用影格名稱來當作角色的空置狀態，如上圖就有一個 birdFly 跟 boom 兩個狀態。

25. 第四步，將新增的影片片段新增連結，
因為要匯出給CreateJS使用，所以一
定要新增!!!

26. 第五步，前面確定製作
完成後就可以發佈了。

27. 發佈成功後會看到fla存檔路徑下會有多幾個東西
• images -> 剛剛flash再把元件用道的圖片重新編譯出來
• fly.fla -> 這應該不用多說了…
• fly.html -> flash編譯出來的html檔案
• fiy.js -> 剛剛所有的動畫以及元件全部轉入這支檔案裡面，這支js等於是元件庫
到這邊就完成了所有我們要在CreateJS裡面所使用的素材準備!!!

28. 先下載CreateJS中的EaselJS

29. 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)
1. alphaThreshold 是用來設定半透明像素區域是否參予像素檢測預 ，設
值是0，設定1表示半透明像素區域不參予檢測。
2. 最後的參數設定true將回傳所有相交的部分的矩形區域，設定false僅回
傳一個1x1的矩形。

40. 給大家小試一下身手
有點累休息一下!!!

41. TweenJS

44. http://www.fabiobiondi.com/blog/2012/08/createjs-zoe-
create-spritesheets-in-adobe-flash-for-easeljs/
Zoë官方資料

46. 使用Zoë匯出後會看到2個檔案
1. SWF.json -> 剛剛所設定的動畫編碼
2. SWF.png -> 這應該不用多說了…

48. Json檔案就可以直接拿來用

49. SpriteSheet類
http://createjs.com/Docs/EaselJS/classes/SpriteSheet.html

52. Q&A時間

53. 謝謝大家