topical media & game development
mobile-graphic-easel-tutorials-Animation-and-Ticker-pausing.htm / htm
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: Ticker.setPaused()</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
<script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
var stage, pauseCircle, goCircle, output;
function init() {
stage = new createjs.Stage("demoCanvas");
pauseCircle = new createjs.Shape();
pauseCircle.graphics.beginFill("red").drawCircle(0, 0, 40);
pauseCircle.y = 50;
stage.addChild(pauseCircle);
goCircle = new createjs.Shape();
goCircle.graphics.beginFill("green").drawCircle(0, 0, 40);
goCircle.y = 150;
stage.addChild(goCircle);
// and register our main listener
createjs.Ticker.addEventListener("tick", tick);
// UI code:
output = stage.addChild(new createjs.Text("", "14px monospace", "#000"));
output.lineHeight = 15;
output.textBaseline = "top";
output.x = 10;
output.y = stage.canvas.height-output.lineHeight*3-10;
}
function tick(event) {
goCircle.x += 10;
if (goCircle.x > stage.canvas.width) { goCircle.x = 0; }
if (!createjs.Ticker.getPaused()) {
pauseCircle.x += 10;
if (pauseCircle.x > stage.canvas.width) { pauseCircle.x = 0; }
}
output.text = "getPaused() = "+createjs.Ticker.getPaused()+"\n"+
"getTime(true) = "+createjs.Ticker.getTime(true)+"\n"+
"getTime(false) = "+createjs.Ticker.getTime(false);
stage.update(event); // important!!
}
function togglePause() {
var paused = !createjs.Ticker.getPaused();
createjs.Ticker.setPaused(paused);
document.getElementById("pauseBtn").value = paused ? "unpause" : "pause";
}
</script>
</head>
<body onLoad="init();">
<input type="button" value="pause" id="pauseBtn" onclick="togglePause();"><br>
<canvas id="demoCanvas" width="500" height="200">
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.