CreateJS從 Flash 到 JavaScript
I’m a Ruby guy≈ 4 years
but also a Flash guy≈ 8 years
目前狀狀態80% iOS app,20% Ruby / Rails
CreateJS從 Flash 到 JavaScript
在開始之前..
武林林㆗㊥中,曾流流傳著許多的 Flash 殺殺手..
Flash 真的死了了嗎?
可能吧 :)
Flash Play != Flash
如果你曾經是個 Flash 程式設計師或是現在還靠 Flash 討生活...
該㈻㊫學 HTML5 嗎?
聽說說說 HTML5 的 Canvas ㈲㊒有點難?!
Grant Skinnerphoto by Andy Polainehttp://gskinner.com/
http://www.createjs.com
EaselJS..provides a full,hierarchical display list,a core interactionmodel,and helper classes to make working with the HTM...
TweenJSA simple but powerful tweening / animation library forJavascript.Part of the CreateJS suite of libraries.
SoundJSA Javascript library for working with Audio.Features a simpleinterface as the front end to multiple audio APIs via ...
PreloadJS..makes preloading assets & getting aggregate progress eventseasier in JavaScript.It uses XHR2 when available,and...
原因?
CreateJS 是 真.大神神㊢寫的!
Flash-like 的 API
㈲㊒有文件、範例例!
授權?
MIT
Flash == Commercial software
Flash != Not Open
安裝
✴ 就放在你的專案裡裡..✴ 或是直接從 CDN 引入..安裝<script src="lib/createjs.js"></script><script src="http://code.createjs.com/createjs-2013....
哈囉,世界!
哈囉,世界var canvas = document.getElementById("demo_canvas");var stage = new createjs.Stage(canvas);var text = new createjs.Te...
等等!剛剛的程式碼裡裡面是不不是㈲㊒有看到"Stage"跟 "addChild"..?!
應該是巧合吧反正程式都都嘛長得很像.. :)
小圈圈
畫圈圈var canvas = document.getElementById("demo_canvas");var stage = new createjs.Stage(canvas);var graphic = new createjs.G...
var canvas = document.getElementById("demo_canvas");var stage = new createjs.Stage(canvas);var graphic = new createjs.Grap...
var canvas = document.getElementById("demo_canvas");var stage = new createjs.Stage(canvas);var graphic = new createjs.Grap...
親愛的,剛剛是不不是㈲㊒有看到 "Graphics"跟"Shape",還㈲㊒有㆒㈠㊀一些熟悉的畫線、畫圈圈跟著色的方法..?!
旋轉吧,方塊!
旋轉吧,方塊!var stage, shape;function init() {var canvas = document.getElementById("demo_canvas");stage = new createjs.Stage(ca...
Classes in EaselJS
DisplayObjectAbstract base class for all display elements in EaselJS.Exposesall of the display properties (ex.x,y,rotation...
StageThe root level display container for display elements.Each timetick() is called on Stage,it will update and render th...
親愛的 Flasher 們,㈲㊒有種回家、熟悉的感動了了嗎..
ContainerA nestable display container,which lets you aggregate displayobjects and manipulate them as a group.
㆒㈠㊀一層包㆒㈠㊀一層
TextRenders a single line of text to the stage.
BitmapDraws an image,video or canvas to the canvas according to itsdisplay properties.
ShapeRenders a Graphics object within the context of the display list.
GraphicsProvides an easy to use API for drawing vector data.Can beused with Shape,or completely stand alone.
FilterThe base filter class that other filters (ex.BoxBlurFilter,ColorMatrixFilter,etc) extend.
TickerProvides a pausable centralized tick manager for ticking Stageinstances or other time based code.
RectangleRepresents a rectangle as defined by the points (x,y) and (x+width,y+height).
SpriteSheetEncapsulates all the data associated with a sprite sheet to beused with BitmapAnimation.
動畫!
But!
好啦,我知道你們㊢寫程式的都都很厲害..
我是美術設計師,只會畫圖以及用 Flash 拉拉時間軸做動畫,㊢寫些簡單的 gotoAndPlay( )
工具包?!
ZoëA stand alone tool for exporting SWF animations as EaselJSsprite sheets that can be used in Canvas and CSS.
CreateJS toolkits
改得動嗎?!
匯出檔案大小?!
效能?!
我沒㈲㊒有評估過所㈲㊒有的 javascript libs..
我只知道,㊢寫的出來來的東西,才㈲㊒有所謂的效能可以調校
瀏覽器相容性?!
其實我不不是很在乎.. XD
工商服務photo by North Carolina Digital Heritage Center
-Senior art designer-Mobile app developer尋找..
750+ attendees in 2013
750+ attendees in 2013
450 tickets sold out in 4 mins
WebConf Taiwan 2014
Will be held in Jan 2014
850+ in 2014,hopefully.
All about web development
fun with us :)
Q & A
Contact✓ Website✓ Blog✓ Facebook✓ Twitter✓ Email✓ Mobilehttp://www.eddie.com.twhttp://blog.eddie.com.twhttps://www.faceboo...
CreateJS - from Flash to Javascript
CreateJS - from Flash to Javascript
CreateJS - from Flash to Javascript
CreateJS - from Flash to Javascript
CreateJS - from Flash to Javascript
CreateJS - from Flash to Javascript
CreateJS - from Flash to Javascript
CreateJS - from Flash to Javascript
CreateJS - from Flash to Javascript
Upcoming SlideShare
Loading in …5
×

CreateJS - from Flash to Javascript

1,726 views
1,557 views

Published on

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,726
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

CreateJS - from Flash to Javascript

  1. 1. CreateJS從 Flash 到 JavaScript
  2. 2. I’m a Ruby guy≈ 4 years
  3. 3. but also a Flash guy≈ 8 years
  4. 4. 目前狀狀態80% iOS app,20% Ruby / Rails
  5. 5. CreateJS從 Flash 到 JavaScript
  6. 6. 在開始之前..
  7. 7. 武林林㆗㊥中,曾流流傳著許多的 Flash 殺殺手..
  8. 8. Flash 真的死了了嗎?
  9. 9. 可能吧 :)
  10. 10. Flash Play != Flash
  11. 11. 如果你曾經是個 Flash 程式設計師或是現在還靠 Flash 討生活...
  12. 12. 該㈻㊫學 HTML5 嗎?
  13. 13. 聽說說說 HTML5 的 Canvas ㈲㊒有點難?!
  14. 14. Grant Skinnerphoto by Andy Polainehttp://gskinner.com/
  15. 15. http://www.createjs.com
  16. 16. EaselJS..provides a full,hierarchical display list,a core interactionmodel,and helper classes to make working with the HTML5Canvas element much easier.
  17. 17. TweenJSA simple but powerful tweening / animation library forJavascript.Part of the CreateJS suite of libraries.
  18. 18. SoundJSA Javascript library for working with Audio.Features a simpleinterface as the front end to multiple audio APIs via a pluginmodel.Currently supports HTML5 Audio & Flash.
  19. 19. PreloadJS..makes preloading assets & getting aggregate progress eventseasier in JavaScript.It uses XHR2 when available,and falls backto tag-based loading when not.
  20. 20. 原因?
  21. 21. CreateJS 是 真.大神神㊢寫的!
  22. 22. Flash-like 的 API
  23. 23. ㈲㊒有文件、範例例!
  24. 24. 授權?
  25. 25. MIT
  26. 26. Flash == Commercial software
  27. 27. Flash != Not Open
  28. 28. 安裝
  29. 29. ✴ 就放在你的專案裡裡..✴ 或是直接從 CDN 引入..安裝<script src="lib/createjs.js"></script><script src="http://code.createjs.com/createjs-2013.05.14.min.js"></script>
  30. 30. 哈囉,世界!
  31. 31. 哈囉,世界var canvas = document.getElementById("demo_canvas");var stage = new createjs.Stage(canvas);var text = new createjs.Text("Hello, World");text.color = "white";text.font = "25px Ariel";text.x = 50;text.y = 50;stage.addChild(text);stage.update();
  32. 32. 等等!剛剛的程式碼裡裡面是不不是㈲㊒有看到"Stage"跟 "addChild"..?!
  33. 33. 應該是巧合吧反正程式都都嘛長得很像.. :)
  34. 34. 小圈圈
  35. 35. 畫圈圈var canvas = document.getElementById("demo_canvas");var stage = new createjs.Stage(canvas);var graphic = new createjs.Graphics();graphic.beginStroke("white");graphic.setStrokeStyle(5);graphic.beginFill("red");graphic.drawCircle(100, 100, 50);var shape = new createjs.Shape(graphic);stage.addChild(shape);stage.update();
  36. 36. var canvas = document.getElementById("demo_canvas");var stage = new createjs.Stage(canvas);var graphic = new createjs.Graphics();graphic.beginStroke("white").setStrokeStyle(5).beginFill("red").drawCircle(100, 100, 50);var shape = new createjs.Shape(graphic);stage.addChild(shape);stage.update();畫圈圈
  37. 37. var canvas = document.getElementById("demo_canvas");var stage = new createjs.Stage(canvas);var graphic = new createjs.Graphics();graphic.s("white").ss(5).f("red").dc(100, 100, 50);var shape = new createjs.Shape(graphic);stage.addChild(shape);stage.update();畫圈圈
  38. 38. 親愛的,剛剛是不不是㈲㊒有看到 "Graphics"跟"Shape",還㈲㊒有㆒㈠㊀一些熟悉的畫線、畫圈圈跟著色的方法..?!
  39. 39. 旋轉吧,方塊!
  40. 40. 旋轉吧,方塊!var stage, shape;function init() {var canvas = document.getElementById("demo_canvas");stage = new createjs.Stage(canvas);var g = new createjs.Graphics();g.s("white").ss(5).f("red").dr(0, 0, 100, 100);shape = new createjs.Shape(g);shape.x = shape.y = 150;shape.regX = shape.regY = 50;stage.addChild(shape);stage.update();createjs.Ticker.setFPS(30);createjs.Ticker.addEventListener("tick", tickHandler);}function tickHandler (event) {shape.rotation += 4;stage.update();}
  41. 41. Classes in EaselJS
  42. 42. DisplayObjectAbstract base class for all display elements in EaselJS.Exposesall of the display properties (ex.x,y,rotation,scaleX,scaleY,skewX,skewY,alpha,shadow,etc) that are common to alldisplay objects.
  43. 43. StageThe root level display container for display elements.Each timetick() is called on Stage,it will update and render the displaylist to its associated canvas.
  44. 44. 親愛的 Flasher 們,㈲㊒有種回家、熟悉的感動了了嗎..
  45. 45. ContainerA nestable display container,which lets you aggregate displayobjects and manipulate them as a group.
  46. 46. ㆒㈠㊀一層包㆒㈠㊀一層
  47. 47. TextRenders a single line of text to the stage.
  48. 48. BitmapDraws an image,video or canvas to the canvas according to itsdisplay properties.
  49. 49. ShapeRenders a Graphics object within the context of the display list.
  50. 50. GraphicsProvides an easy to use API for drawing vector data.Can beused with Shape,or completely stand alone.
  51. 51. FilterThe base filter class that other filters (ex.BoxBlurFilter,ColorMatrixFilter,etc) extend.
  52. 52. TickerProvides a pausable centralized tick manager for ticking Stageinstances or other time based code.
  53. 53. RectangleRepresents a rectangle as defined by the points (x,y) and (x+width,y+height).
  54. 54. SpriteSheetEncapsulates all the data associated with a sprite sheet to beused with BitmapAnimation.
  55. 55. 動畫!
  56. 56. But!
  57. 57. 好啦,我知道你們㊢寫程式的都都很厲害..
  58. 58. 我是美術設計師,只會畫圖以及用 Flash 拉拉時間軸做動畫,㊢寫些簡單的 gotoAndPlay( )
  59. 59. 工具包?!
  60. 60. ZoëA stand alone tool for exporting SWF animations as EaselJSsprite sheets that can be used in Canvas and CSS.
  61. 61. CreateJS toolkits
  62. 62. 改得動嗎?!
  63. 63. 匯出檔案大小?!
  64. 64. 效能?!
  65. 65. 我沒㈲㊒有評估過所㈲㊒有的 javascript libs..
  66. 66. 我只知道,㊢寫的出來來的東西,才㈲㊒有所謂的效能可以調校
  67. 67. 瀏覽器相容性?!
  68. 68. 其實我不不是很在乎.. XD
  69. 69. 工商服務photo by North Carolina Digital Heritage Center
  70. 70. -Senior art designer-Mobile app developer尋找..
  71. 71. 750+ attendees in 2013
  72. 72. 750+ attendees in 2013
  73. 73. 450 tickets sold out in 4 mins
  74. 74. WebConf Taiwan 2014
  75. 75. Will be held in Jan 2014
  76. 76. 850+ in 2014,hopefully.
  77. 77. All about web development
  78. 78. fun with us :)
  79. 79. Q & A
  80. 80. Contact✓ Website✓ Blog✓ Facebook✓ Twitter✓ Email✓ Mobilehttp://www.eddie.com.twhttp://blog.eddie.com.twhttps://www.facebook.com/eddiekaohttps://twitter.com/eddiekaoeddie@digik.com.tw+886-928-617-687

×