Button using MovieClip Timeline

by lannymcnie

HTML

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

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