2013 05 同業分享會 米蘭數位 奶綠茶 createJS,Adobe Edge, swiffy 分析

1. CreateJS,Edge,Swiffy
milkmidi
2013.05
http://milkmidi.com

2. CreateJS Edge Swiffy
效能 最快 OK 比CreateJS慢
使用的是 canvas css3 canvas
程式碼 JavaScript jQuery ActionScript2
ActionScript3(Beta)
補助工具 FlashCS6
JS可寫在軟體裡
Adobe Edge FlashCS3
或是線上直接轉swf
修改度 明碼，好修改 明碼，還算好懂 沒機會改
已知問題 Android4.x
預設瀏覽器會死當
(別怕, 有解)
處理序列圖檔很麻
煩
1.無法跑載入的百分比
2.無法呼叫外部的JS函式
(別怕,Ticore大大有解法)
支援平台 除了IE其他都支援 除了IE其他都支援 除了IE其他都支援
檔案數量
不含Runtime
Html x 1
Js x1
一堆圖片
Html x 1
Js x 1
一堆圖片
Html x 1
錢 免
(FlashCS6要錢)
目前免費,以後要錢 免
(Flash軟體要錢)

3. CreateJS
FlashCS6
JavaScript

4. 修正CreateJS在
Android4.x預設瀏覽器
死當問題
http://bit.ly/11QYVig
http://bit.ly/10Po5Y4
死當版
其實是Android Canvas的問題

5. function init() {
canvas = document.getElementById(“canvas”);
stage = new createjs.Stage(canvas);
stage.autoClear=false; // 關掉
略
// createjs.Ticker.addEventListener(“tick”, stage); // 不要偵聽
createjs.Ticker.addEventListener(“tick”, tick); //改手動偵聽
}
function tick() {
clearCanvas(); //自定 Clear 函式
stage.update();
}
function clearCanvas(){
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
var w=canvas.width;
canvas.width=1;
canvas.width=w;
}
http://bit.ly/18bwnyP
http://bit.ly/1146tNd
修正版

6. Adobe Edge
Create animated web content using HTML5, CSS3
and JavaScript with ease, Power and Precision

7. Edge 是設計師要學的
http://m.toyota.com.tw/2012_prius_c/

8. Swiffy
http://bizdev.medialand.com.tw/milkmidi/createjs/toyota_PriusC_swiffy.html

9. 結論

10. 動畫還是給設計師
林北只想專心Coding

11. Depends on your creativity

12. Q & A
Thanks for your attention!
https://www.facebook.com/milkmidifans
milkmidi@gmail.com
http://milkmidi.blogspot.com