topical media & game development
mobile-graphic-easel-tutorials-Animation-and-Ticker-onTick.htm / htm
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: DisplayObject.onTick</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
<script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
var stage, circle;
function init() {
stage = new createjs.Stage("demoCanvas");
circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 40);
circle.y = 50;
stage.addChild(circle);
// Stage will pass delta when it calls stage.update(arg)
// which will pass them to tick event handlers for us in time based animation.
circle.addEventListener("tick", function(event) {
var tickerEvent = event.params[0];
var delta = tickerEvent.delta;
circle.x += delta/1000*100;
if (circle.x > stage.canvas.width) { circle.x = 0; }
})
createjs.Ticker.addEventListener("tick", tick);
}
function tick(event) {
stage.update(event);
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="100">
alternate content
</canvas>
</body>
</html>
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.