Grant Skinner
photo by Andy Polaine
http://gskinner.com/
Slide 19
Slide 19 text
http://www.createjs.com
Slide 20
Slide 20 text
EaselJS
.. provides a full, hierarchical display list, a core interaction
model, and helper classes to make working with the HTML5
Canvas element much easier.
Slide 21
Slide 21 text
TweenJS
A simple but powerful tweening / animation library for
Javascript. Part of the CreateJS suite of libraries.
Slide 22
Slide 22 text
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.
Slide 23
Slide 23 text
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.
Slide 24
Slide 24 text
原因?
Slide 25
Slide 25 text
CreateJS 是 真．大神神㊢寫的!
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Flash-like 的 API
Slide 29
Slide 29 text
㈲㊒有文件、範例例!
Slide 30
Slide 30 text
授權?
Slide 31
Slide 31 text
MIT
Slide 32
Slide 32 text
Flash == Commercial software
Slide 33
Slide 33 text
Flash != Not Open
Slide 34
Slide 34 text
安裝
Slide 35
Slide 35 text
✴ 就放在你的專案裡裡..
✴ 或是直接從 CDN 引入..
安裝
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
哈囉，世界!
Slide 38
Slide 38 text
哈囉，世界
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();
Slide 39
Slide 39 text
等等!
剛剛的程式碼裡裡面是不不是㈲㊒有看到
"Stage" 跟 "addChild"..?!
Slide 40
Slide 40 text
應該是巧合吧
反正程式都都嘛長得很像.. :)
Slide 41
Slide 41 text
小圈圈
Slide 42
Slide 42 text
畫圈圈
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();
Slide 43
Slide 43 text
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();
畫圈圈
Slide 44
Slide 44 text
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();
畫圈圈
旋轉吧，方塊!
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();
}
Slide 48
Slide 48 text
Classes in EaselJS
Slide 49
Slide 49 text
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.
Slide 50
Slide 50 text
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.
Slide 51
Slide 51 text
親愛的 Flasher 們,
㈲㊒有種回家、熟悉的感動了了嗎..
Slide 52
Slide 52 text
Container
A nestable display container, which lets you aggregate display
objects and manipulate them as a group.
Slide 53
Slide 53 text
㆒㈠㊀一層包㆒㈠㊀一層
Slide 54
Slide 54 text
Text
Renders a single line of text to the stage.
Slide 55
Slide 55 text
Bitmap
Draws an image, video or canvas to the canvas according to its
display properties.
Slide 56
Slide 56 text
Shape
Renders a Graphics object within the context of the display list.
Slide 57
Slide 57 text
Graphics
Provides an easy to use API for drawing vector data. Can be
used with Shape, or completely stand alone.
Slide 58
Slide 58 text
Filter
The base filter class that other filters (ex. BoxBlurFilter,
ColorMatrixFilter, etc) extend.
Slide 59
Slide 59 text
Ticker
Provides a pausable centralized tick manager for ticking Stage
instances or other time based code.
Slide 60
Slide 60 text
Rectangle
Represents a rectangle as defined by the points (x, y) and (x
+width, y+height).
Slide 61
Slide 61 text
SpriteSheet
Encapsulates all the data associated with a sprite sheet to be
used with BitmapAnimation.