CreateJS - from Flash to Javascript

Transcript

1. CreateJS
   從 Flash 到 JavaScript
   

   View Slide

2. View Slide

3. I’m a Ruby guy
   ≈ 4 years
   

   View Slide

4. but also a Flash guy
   ≈ 8 years
   

   View Slide

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

   View Slide

6. View Slide

7. View Slide

8. CreateJS
   從 Flash 到 JavaScript
   

   View Slide

9. 在開始之前..
   

   View Slide

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

    View Slide

11. Flash 真的死了了嗎?
    

    View Slide

12. 可能吧 :)
    

    View Slide

13. Flash Play != Flash
    

    View Slide

14. View Slide

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

    View Slide

16. 該㈻㊫學 HTML5 嗎?
    

    View Slide

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

    View Slide

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

    View Slide

19. http://www.createjs.com
    

    View Slide

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.
    

    View Slide

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

    View Slide

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.
    

    View Slide

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.
    

    View Slide

24. 原因?
    

    View Slide

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

    View Slide

26. View Slide

27. View Slide

28. Flash-like 的 API
    

    View Slide

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

    View Slide

30. 授權?
    

    View Slide

31. MIT
    

    View Slide

32. Flash == Commercial software
    

    View Slide

33. Flash != Not Open
    

    View Slide

34. 安裝
    

    View Slide

35. ✴ 就放在你的專案裡裡..
    ✴ 或是直接從 CDN 引入..
    安裝
    
    <br/>
    

    View Slide

36. View Slide

37. 哈囉，世界!
    

    View Slide

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();
    

    View Slide

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

    View Slide

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

    View Slide

41. 小圈圈
    

    View Slide

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();
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. 旋轉吧，方塊!
    

    View Slide

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();
    }
    

    View Slide

48. Classes in EaselJS
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

62. 動畫!
    

    View Slide

63. View Slide

64. But!
    

    View Slide

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

    View Slide

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

    View Slide

67. 工具包?!
    

    View Slide

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

    View Slide

69. CreateJS toolkits
    

    View Slide

70. 改得動嗎?!
    

    View Slide

71. 匯出檔案大小?!
    

    View Slide

72. 效能?!
    

    View Slide

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

    View Slide

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

    View Slide

75. 瀏覽器相容性?!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

79. View Slide

80. 750+ attendees in 2013
    

    View Slide

81. 750+ attendees in 2013
    

    View Slide

82. 450 tickets sold out in 4 mins
    

    View Slide

83. WebConf Taiwan 2014
    

    View Slide

84. Will be held in Jan 2014
    

    View Slide

85. 850+ in 2014, hopefully.
    

    View Slide

86. All about web development
    

    View Slide

87. fun with us :)
    

    View Slide

88. Q & A
    

    View Slide

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
    

    View Slide