Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CreateJS - from Flash to Javascript

CreateJS - from Flash to Javascript

高見龍

May 19, 2013
Tweet

More Decks by 高見龍

Other Decks in Programming

Transcript

  1. EaselJS .. provides a full, hierarchical display list, a core

    interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
  2. TweenJS A simple but powerful tweening / animation library for

    Javascript. Part of the CreateJS suite of libraries.
  3. 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.
  4. 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.
  5. MIT

  6. 哈囉,世界 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();
  7. 畫圈圈 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();
  8. 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(); 畫圈圈
  9. 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(); 畫圈圈
  10. 旋轉吧,方塊! 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(); }
  11. 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.
  12. 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.
  13. Bitmap Draws an image, video or canvas to the canvas

    according to its display properties.
  14. Graphics Provides an easy to use API for drawing vector

    data. Can be used with Shape, or completely stand alone.
  15. Zoë A stand alone tool for exporting SWF animations as

    EaselJS sprite sheets that can be used in Canvas and CSS.
  16. 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