$30 off During Our Annual Pro Sale. View Details »

CreateJS - from Flash to Javascript

CreateJS - from Flash to Javascript

高見龍

May 19, 2013
Tweet

More Decks by 高見龍

Other Decks in Programming

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
    [email protected]
    +886-928-617-687

    View Slide