Button using MovieClip Timeline

by harsh dand

HTML

<script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>
<canvas id="canvas" width="200" height="200"></canvas>

CSS

body {
    background:gray;
}

JavaScript

var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", stage);
stage.enableMouseOver();

var btn = new createjs.MovieClip(null, null, false, {
    up: 0,
    over: 10,
    down: 20,
    out: 0
}).set({
    x: 100,
    y: 30
});
stage.addChild(btn);

var shape = new createjs.Shape(new createjs.Graphics().f("#f00").dr(0, 0, 100, 30));
var u = new createjs.Text("Up", "32px Arial", "#000000").set({
    x: -15,
    y: 7
});
var o = new createjs.Text("Over", "32px Arial", "#60609f").set({
    x: -27,
    y: 8
});
var d = new createjs.Text("Down", "32px Arial", "#cf3060").set({
    x: -31,
    y: 6
});
u.hitArea = o.hitArea = d.hitArea = shape;

btn.timeline.addTween(
createjs.Tween.get(u).wait(10).to({
    _off: true
}),
createjs.Tween.get(o).to({
    _off: true
}).wait(10).to({
    _off: false
}).wait(10).to({
    _off: true
}),
createjs.Tween.get(d).to({
    _off: true
}).wait(20).to({
    _off: false
}));

var helper = new createjs.ButtonHelper(btn);

createjs.Ticker.setFPS(16);
createjs.Ticker.addListener(stage, false);