Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
CreateJS我 與 F l a s h 的 愛 恨 情 仇
智遠
職業米蟲/SOHO
Mike
a3804430@hotmail.com
JavaScript
ActionScript3
CreateJS
Html & css
Html5 & css3PHP&MySql
RWD
Jquery
Photoshop
Illustrator
3dsMax
Unity
Flash
吵架
什麼是CreateJS ?
為什麼要用CreateJS ?
推薦原因
1. CreateJS 有很多方便的TOOLS可以方便加速開發。
2. FLASH CC版本開始有支援轉出HMTL5 canvas,可以在FLASH把動
畫完成後快速在CreateJS 使用,加速開發時間!!!
3. 有完善的範例與文...
只有FLASH CC版本有支援CreateJS 使用???
FLASH CS6版本可以在官網找到CreateJS Toolkit
介紹一下開發CreateJS的工具
Intel® XDK
小推一下喜歡的佈景主題!!!
優點
1. 擁有良好的程式碼提示
2. 有支援許多html5的開發套件
3. 方便的模擬器可以模擬各行動裝置的狀況
4. 還有許多功能可以自己去發現
缺點
1. 沒有中文版
2. 外掛有點少
馬上來試試!
這時一定要來個 Hello world!!!
Flash 與 CreateJS 的結合
第一步,選擇Html5 Canvas開新檔案
第二步,新增一個影片片段元件
第三步,將角色動畫元件都製作在這層影片片段內
利用影格名稱來當作角色的空置狀態,如上圖就有一個 birdFly 跟 boom 兩個狀態。
第四步,將新增的影片片段新增連結,
因為要匯出給CreateJS使用,所以一
定要新增!!!
第五步,前面確定製作
完成後就可以發佈了。
發佈成功後會看到fla存檔路徑下會有多幾個東西
• images -> 剛剛flash再把元件用道的圖片重新編譯出來
• fly.fla -> 這應該不用多說了…
• fly.html -> flash編譯出來的html檔案
• fiy.js ...
先下載CreateJS中的EaselJS
movieclip-0.8.0.min.js
這是元件用的類別,並沒有包含在4大
類別中,所以需要額外引入!!!
開一個新HTML(不要用原本匯出的HTML),引入js的順序
CreateJS
movieclip類 (依需求引入)
CreateJS碰撞 (依需求引入)
FPS檢測器 (依需求引入)
CreateJS元件庫
新增Canvas,引入主要程式
Main.js主程式(自己新增的 )
開工啦!!!!!!!!!!!
將原本flash編譯的html中的js抽出來然後修改放入main.js中
撰寫的內容放這邊
撰寫的內容放這邊
原來這麼簡單!!!
gotoAndPlay()
ndgmr.Collision.js 碰撞
使用矩形包圍體來檢測兩個顯示物件是否碰撞
ndgmr.checkRectCollision(物件A,物件B)
使用像素檢測兩個顯示物件是否碰撞(較耗資源)
ndgmr.checkPixelCollision(物件A,物件B,alphaThres...
給大家小試一下身手
有點累休息一下!!!
TweenJS
http://www.fabiobiondi.com/blog/2012/08/createjs-zoe-
create-spritesheets-in-adobe-flash-for-easeljs/
Zoë官方資料
使用Zoë匯出後會看到2個檔案
1. SWF.json -> 剛剛所設定的動畫編碼
2. SWF.png -> 這應該不用多說了…
Json檔案就可以直接拿來用
SpriteSheet類
http://createjs.com/Docs/EaselJS/classes/SpriteSheet.html
Q&A時間
謝謝大家
老成之CreateJS與Flash
老成之CreateJS與Flash
老成之CreateJS與Flash
老成之CreateJS與Flash
老成之CreateJS與Flash
老成之CreateJS與Flash
老成之CreateJS與Flash
老成之CreateJS與Flash
老成之CreateJS與Flash
老成之CreateJS與Flash
老成之CreateJS與Flash
老成之CreateJS與Flash
Próxima SlideShare
Cargando en…5
×

老成之CreateJS與Flash

4.866 visualizaciones

Publicado el

CreateJS與Flash的愛恨情仇

Publicado en: Software
  • Dating direct: ♥♥♥ http://bit.ly/2Qu6Caa ♥♥♥
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/2Qu6Caa ❶❶❶
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

老成之CreateJS與Flash

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

×