1. CreateJS
從 Flash 到 JavaScript

3. I’m a Ruby guy
≈ 4 years

4. but also a Flash guy
≈ 8 years

5. 目前狀狀態
80% iOS app,20% Ruby / Rails

8. CreateJS
從 Flash 到 JavaScript

9. 在開始之前..

10. 武林林㆗㊥中,
曾流流傳著許多的 Flash 殺殺手..

11. Flash 真的死了了嗎?

12. 可能吧 :)

13. Flash Play != Flash

15. 如果你曾經是個 Flash 程式設計師
或是現在還靠 Flash 討生活...

16. 該㈻㊫學 HTML5 嗎?

17. 聽說說說 HTML5 的 Canvas ㈲㊒有點難?!

18. Grant Skinner
photo by Andy Polaine
http://gskinner.com/

19. http://www.createjs.com

20. EaselJS
..provides a full,hierarchical display list,a core interaction
model,and helper classes to make working with the HTML5
Canvas element much easier.

21. TweenJS
A simple but powerful tweening / animation library for
Javascript.Part of the CreateJS suite of libraries.

22. SoundJS
A Javascript library for working with Audio.Features a simple
interface as the front end to multiple audio APIs via a plugin
model.Currently supports HTML5 Audio & Flash.

23. PreloadJS
..makes preloading assets & getting aggregate progress events
easier in JavaScript.It uses XHR2 when available,and falls back
to tag-based loading when not.

24. 原因?

25. CreateJS 是 真．大神神㊢寫的!

28. Flash-like 的 API

29. ㈲㊒有文件、範例例!

30. 授權?

31. MIT

32. Flash == Commercial software

33. Flash != Not Open

34. 安裝

35. ✴ 就放在你的專案裡裡..
✴ 或是直接從 CDN 引入..
安裝
<script src="lib/createjs.js"></script>
<script src="http://code.createjs.com/createjs-2013.05.14.min.js">
</script>

37. 哈囉，世界!

38. 哈囉，世界
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();

39. 等等!
剛剛的程式碼裡裡面是不不是㈲㊒有看到
"Stage"跟 "addChild"..?!

40. 應該是巧合吧
反正程式都都嘛長得很像.. :)

41. 小圈圈

42. 畫圈圈
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();

43. 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();
畫圈圈

44. 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();
畫圈圈

45. 親愛的，
剛剛是不不是㈲㊒有看到 "Graphics"跟
"Shape"，還㈲㊒有㆒㈠㊀一些熟悉的畫線、
畫圈圈跟著色的方法..?!

46. 旋轉吧，方塊!

47. 旋轉吧，方塊!
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();
}

48. Classes in EaselJS

49. DisplayObject
Abstract base class for all display elements in EaselJS.Exposes
all of the display properties (ex.x,y,rotation,scaleX,scaleY,
skewX,skewY,alpha,shadow,etc) that are common to all
display objects.

50. Stage
The root level display container for display elements.Each time
tick() is called on Stage,it will update and render the display
list to its associated canvas.

51. 親愛的 Flasher 們,
㈲㊒有種回家、熟悉的感動了了嗎..

52. Container
A nestable display container,which lets you aggregate display
objects and manipulate them as a group.

53. ㆒㈠㊀一層包㆒㈠㊀一層

54. Text
Renders a single line of text to the stage.

55. Bitmap
Draws an image,video or canvas to the canvas according to its
display properties.

56. Shape
Renders a Graphics object within the context of the display list.

57. Graphics
Provides an easy to use API for drawing vector data.Can be
used with Shape,or completely stand alone.

58. Filter
The base filter class that other filters (ex.BoxBlurFilter,
ColorMatrixFilter,etc) extend.

59. Ticker
Provides a pausable centralized tick manager for ticking Stage
instances or other time based code.

60. Rectangle
Represents a rectangle as defined by the points (x,y) and (x
+width,y+height).

61. SpriteSheet
Encapsulates all the data associated with a sprite sheet to be
used with BitmapAnimation.

62. 動畫!

64. But!

65. 好啦，
我知道你們㊢寫程式的都都很厲害..

66. 我是美術設計師,
只會畫圖以及用 Flash 拉拉時間軸
做動畫,㊢寫些簡單的 gotoAndPlay( )

67. 工具包?!

68. Zoë
A stand alone tool for exporting SWF animations as EaselJS
sprite sheets that can be used in Canvas and CSS.

69. CreateJS toolkits

70. 改得動嗎?!

71. 匯出檔案大小?!

72. 效能?!

73. 我沒㈲㊒有評估過所㈲㊒有的 javascript libs..

74. 我只知道,
㊢寫的出來來的東西,
才㈲㊒有所謂的效能可以調校

75. 瀏覽器相容性?!

76. 其實我不不是很在乎.. XD

77. 工商服務
photo by North Carolina Digital Heritage Center

78. -Senior art designer
-Mobile app developer
尋找..

80. 750+ attendees in 2013

81. 750+ attendees in 2013

82. 450 tickets sold out in 4 mins

83. WebConf Taiwan 2014

84. Will be held in Jan 2014

85. 850+ in 2014,hopefully.

86. All about web development

87. fun with us :)

88. Q & A

89. Contact
✓ Website
✓ Blog
✓ Facebook
✓ Twitter
✓ Email
✓ Mobile
http://www.eddie.com.tw
http://blog.eddie.com.tw
https://www.facebook.com/eddiekao
https://twitter.com/eddiekao
eddie@digik.com.tw
+886-928-617-687