Updated tutorials.

Mainly updated to the new event model.

Signed-off-by: Lanny McNie <lanny@gskinner.com>

tutorials/Animation and Ticker/index.html

@@ -21,7 +21,7 @@ <h1>EaselJS: Animation and Ticker</h1>
 			<p>
 				<strong>Synopsis:</strong> Create a simple programmatic animation, and learn about the Ticker class.<br>
 				<strong>Topics:</strong> animation, Ticker, setFPS, useRAF, getTime, setPaused, requestAnimationFrame, Stage.update, time based animation<br>
-				<strong>Target:</strong> EaselJS v0.5.0
+				<strong>Target:</strong> EaselJS v0.6.0
 			</p>
 		</header>
 
@@ -52,12 +52,12 @@ <h2>Animation Basics</h2>
 				<h2>Ticker</h2>
 			</header>
 			<p>
-				The <code>Ticker</code> class provides a simple static interface (meaning, you don't ever create a <code>new Ticker()</code>) to propagate a tick to various objects. To use it we just add a listener with <code>addListener(listener)</code>. The listener can be a function, or an object with a <code>tick</code> function defined.
+				The <code>Ticker</code> class provides a simple static interface (meaning, you don't ever create a <code>new Ticker()</code>) to propagate a tick to various objects. To use it we just add a event listener with <code>addEventListener("tick", handler)</code>. The listener can be a function, or an object with a <code>tick</code> function defined.
 			</p>
 			<p>
 				The code below adds the window as a listener, and defines a tick function that will be called 20 times per second (<code>Ticker</code>'s default framerate):
 			<textarea class="brush: js;" readonly>
-createjs.Ticker.addListener(window);
+createjs.Ticker.addEventListener("tick", tick);
 function tick() { console.log("TICK!!!"); }
 			</textarea>
 			<p>
@@ -86,9 +86,9 @@ <h2>Time based animation</h2>
 			</p>
 				You can make your animation time based by simply factoring in the elapsed time when we make our property changes.
 			<textarea class="brush: js;" readonly>
-function tick(elapsedTime) {
+function tick(event) {
 	// move 100 pixels per second (elapsedTimeInMS / 1000msPerSecond * pixelsPerSecond):
-	circle.x += elapsedTime/1000*100;
+	circle.x += event.delta/1000*100;
 	// this will log a steadily increasing value:
 	console.log("total time: "+createjs.Ticker.getTime());
 }
@@ -107,18 +107,10 @@ <h2>Time based animation</h2>
 				<h2>Pausing</h2>
 			</header>
 			<p>
-				<code>Ticker</code> also provides the ability to pause all of your animations. By default, any listener you add to Ticker is "pauseable". Calling <code>Ticker.setPaused(true);</code> will stop <code>Ticker</code> from calling <code>tick</code> on all pauseable listeners.
+				<code>Ticker</code> also provides the ability to pause all of your animations. All listener you add to Ticker are "pauseable". Calling <code>Ticker.setPaused(true);</code> will stop <code>Ticker</code> from calling <code>tick</code> on all pauseable listeners.
 			</p>
 			<p>
-				You can also register a listener as not pauseable, but passing <code>false</code> as the second parameter, like so:
-			<textarea class="brush: js;" readonly>
-createjs.Ticker.addListener(myListener, false);
-			</textarea>
-			<p>
-				These listeners will continue to be ticked even when <code>Ticker</code> is paused. They will also be passed a second parameter when called, that indicates whether <code>Ticker</code> is currently paused. As an example, you could use this to keep UI animations running, even when a game is paused.
-			</p>
-			<p>
-				Finally, the <code>getTime</code> method accepts a <code>pauseable</code> parameter, and will return the appropriate time total based on it.
+				The <code>getTime</code> method accepts a <code>pauseable</code> parameter, and will return the appropriate time total based on it.
 			</p>
 			<p>
 				In the following demo, play with toggling pause, and see how the red "pauseable" circle stops, where the green "unpauseable" circle does not. You can also see how the total pauseable time stops updating when <code>Ticker</code> is paused.
@@ -128,16 +120,20 @@ <h2>Pausing</h2>
 
 		<section>
 			<header>
-				<h2>onTick</h2>
+				<h2>Tick</h2>
 			</header>
 			<p>
-				When you call <code>stage.update()</code>, it calls <code>onTick()</code> on every display object before drawing to the canvas. Any parameters passed to <code>update()</code> will be passed on to <code>onTick()</code> handlers. This lets you handle your animation in the context of your display object.
+				When you call <code>stage.update()</code>, it will tick any descendants exposing a tick method and render
+                its entire display list to the canvas. Any parameters passed to <code>update()</code> will be passed on to
+                <code>tick()</code> handlers. This lets you handle your animation in the context of your display object.
 			</p>
 			<textarea class="brush: js;" readonly>
-circle.onTick = function() { this.x += 5; }
+circle.addEventListener("tick", function() { this.x += 5; });
 			</textarea>
 			<p>
-				You can also add your stage directly as a listener to <code>Ticker</code>, because <code>Stage</code> has a <code>tick</code> method that shortcuts to <code>update</code>. It's rare that you would want to use this, but it can be handy for quick tests. See the source of <a href="onTick.html">onTick.html</a> for an example.
+				You can also add your stage directly as a listener to <code>Ticker</code>, because <code>Stage</code>
+                has a <code>handleEvent</code> method that shortcuts to <code>update</code>. It's rare that you would
+                want to use this, but it can be handy for quick tests. See the source of <a href="onTick.html">onTick.html</a> for an example.
 			</p>
 		</section>
 

tutorials/Animation and Ticker/onTick.html

@@ -3,7 +3,7 @@
 <head>
 	<title>EaselJS demo: DisplayObject.onTick</title>
 	<link href="../shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="../../lib/easeljs-0.5.0.min.js"></script>
+	<script src="../../lib/easeljs-0.6.0.min.js"></script>
 	<script>
 
 		var stage, circle;
@@ -15,15 +15,21 @@
 			circle.y = 50;
 			stage.addChild(circle);
 
-			// Ticker will pass elapsedTime and paused params when it calls stage.update()
-			// which will pass them to onTick() handlers for us in time based animation.
-			circle.onTick = function(elapsedTime) {
-				this.x += elapsedTime/1000*100;
-				if (this.x > stage.canvas.width) { this.x = 0; }
-			}
+			// 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 delta = event.params[0];
+                circle.x += delta/1000*100;
+                if (circle.x > stage.canvas.width) { circle.x = 0; }
+            })
 
-			createjs.Ticker.addListener(stage);
+			createjs.Ticker.addEventListener("tick", tick);
 		}
+
+        function tick(event) {
+            var delta = event.delta;
+            stage.update(delta);
+        }
 	</script>
 </head>
 <body onLoad="init();">

tutorials/Animation and Ticker/pausing.html

@@ -3,10 +3,11 @@
 <head>
 	<title>EaselJS demo: Ticker.setPaused()</title>
 	<link href="../shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="../../lib/easeljs-0.5.0.min.js"></script>
+	<script src="../../lib/easeljs-0.6.0.min.js"></script>
 	<script>
 
 		var stage, pauseCircle, goCircle, output;
+
 		function init() {
 			stage = new createjs.Stage("demoCanvas");
 
@@ -19,18 +20,10 @@
 			goCircle.graphics.beginFill("green").drawCircle(0, 0, 40);
 			goCircle.y = 150;
 			stage.addChild(goCircle);
-
-
-			// we'll register a listener to move our "pauseCircle" that is pauseable:
-			createjs.Ticker.addListener(function() {
-					pauseCircle.x += 10;
-					if (pauseCircle.x > stage.canvas.width) { pauseCircle.x = 0; }
-				}, true);
-
-			// and register our main listener to be not pauseable:
-			createjs.Ticker.addListener(window, false);
-
-
+
+			// and register our main listener
+			createjs.Ticker.addEventListener("tick", tick);
+
 			// UI code:
 			output = stage.addChild(new createjs.Text("", "14px monospace", "#000"));
 			output.lineHeight = 15;
@@ -42,6 +35,11 @@
 		function tick() {
 			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"+

tutorials/Animation and Ticker/simple.html

@@ -3,7 +3,7 @@
 <head>
 	<title>EaselJS demo: Simple animation</title>
 	<link href="../shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="../../lib/easeljs-0.5.0.min.js"></script>
+	<script src="../../lib/easeljs-0.6.0.min.js"></script>
 	<script>
 
 		var stage, circle;
@@ -15,7 +15,7 @@
 			circle.y = 50;
 			stage.addChild(circle);
 
-			createjs.Ticker.addListener(window);
+			createjs.Ticker.addEventListener("tick", tick);
 			createjs.Ticker.setFPS(30);
 		}
 

tutorials/Animation and Ticker/timeBased.html

@@ -3,7 +3,7 @@
 <head>
 	<title>EaselJS demo: Time based animation</title>
 	<link href="../shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="../../lib/easeljs-0.5.0.min.js"></script>
+	<script src="../../lib/easeljs-0.6.0.min.js"></script>
 	<script>
 
 		var stage, timeCircle, tickCircle;
@@ -20,13 +20,13 @@
 			tickCircle.y = 150;
 			stage.addChild(tickCircle);
 
-			createjs.Ticker.addListener(window);
+			createjs.Ticker.addEventListener("tick", tick);
 			createjs.Ticker.setFPS(20);
 		}
 
-		function tick(elapsedTime) {
+		function tick(event) {
 			// time based
-			timeCircle.x = timeCircle.x + elapsedTime/1000*100;
+			timeCircle.x = timeCircle.x + (event.delta)/1000*100;
 			if (timeCircle.x > stage.canvas.width) { timeCircle.x = 0; }
 
 			// not time based:

tutorials/Getting Started/demo.html

@@ -3,7 +3,7 @@
 <head>
 	<title>EaselJS demo: Getting started</title>
 	<link href="../shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="../../lib/easeljs-0.5.0.min.js"></script>
+	<script src="../../lib/easeljs-0.6.0.min.js"></script>
 	<script>
 		function init() {
 			var stage = new createjs.Stage("demoCanvas");

tutorials/Getting Started/index.html

@@ -21,7 +21,7 @@ <h1>EaselJS: Getting Started</h1>
 			<p>
 				<strong>Synopsis:</strong> Set up an HTML document with a canvas tag and the EaselJS libraries, and draw a shape to the stage.<br>
 				<strong>Topics:</strong> linking libraries, Stage, Shape, addChild, Stage.update(), CDN, source files<br>
-				<strong>Target:</strong> EaselJS v0.5.0
+				<strong>Target:</strong> EaselJS v0.6.0
 			</p>
 		</header>
 
@@ -36,7 +36,7 @@ <h2>Setting up your html document</h2>
 <!DOCTYPE html>
 <html>
 <head>
-	<script src="../../lib/easeljs-0.5.0.min.js"></script>
+	<script src="../../lib/easeljs-0.6.0.min.js"></script>
 	<script>
 		function init() {
 			// code here.

tutorials/HitTest/globalToLocal.html

@@ -3,7 +3,7 @@
 <head>
 	<title>EaselJS demo: globalToLocal</title>
 	<link href="../shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="../../lib/easeljs-0.5.0.min.js"></script>
+	<script src="../../lib/easeljs-0.6.0.min.js"></script>
 	<script>
 		var stage, holder;
 		function init() {
@@ -19,7 +19,7 @@
 				holder.addChild(shape); 
 			}
 
-			createjs.Ticker.addListener(this);
+			createjs.Ticker.addEventListener("tick", tick);
 		}
 
 		function tick() {

tutorials/HitTest/hitTest.html

@@ -3,7 +3,7 @@
 <head>
 	<title>EaselJS demo: hitTest</title>
 	<link href="../shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="../../lib/easeljs-0.5.0.min.js"></script>
+	<script src="../../lib/easeljs-0.6.0.min.js"></script>
 	<script>
 		var stage, circle;
 		function init() {
@@ -14,7 +14,7 @@
 			circle.x = 0;
 			circle.y = 0;
 
-			createjs.Ticker.addListener(this);
+			createjs.Ticker.addEventListener("tick", tick);
 		}
 
 		function tick() {

tutorials/HitTest/index.html

@@ -21,7 +21,7 @@ <h1>EaselJS: Using HitTest</h1>
 			<p>
 				<strong>Synopsis:</strong> Using the DisplayObject.hitTest method with globalToLocal and localToLocal.<br>
 				<strong>Topics:</strong> hitTest, globalToLocal, localToLocal, hit detection<br>
-				<strong>Target:</strong> EaselJS v0.5.0
+				<strong>Target:</strong> EaselJS v0.6.0
 			</p>
 		</header>
 

tutorials/HitTest/localToLocal.html

@@ -3,7 +3,7 @@
 <head>
 	<title>EaselJS demo: localToLocal</title>
 	<link href="../shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="../../lib/easeljs-0.5.0.min.js"></script>
+	<script src="../../lib/easeljs-0.6.0.min.js"></script>
 	<script>
 		var stage, arm;
 		function init() {
@@ -22,7 +22,7 @@
 			arm.x = 180;
 			arm.y = 100;
 
-			createjs.Ticker.addListener(this);
+			createjs.Ticker.addEventListener("tick", tick);
 		}
 
 		function tick() {

tutorials/Inheritance/Button.js

@@ -29,15 +29,18 @@ p.initialize = function(label, color) {
 	text.x = width/2;
 	text.y = 10;
 
-	this.addChild(this.background,text);
-}
+	this.addChild(this.background,text); 
+	this.addEventListener("click", this.handleClick);  
+	this.addEventListener("tick", this.handleTick);
+} 
 
-p.onClick = function() {
-	alert("You clicked on a button: "+this.label);
-}
+p.handleClick = function (event) {    
+	var target = event.target;
+	alert("You clicked on a button: "+target.label);
+} 
 
-p.onTick = function() {
-	this.alpha = Math.cos(this.count++*0.1)*0.4+0.6;
+p.handleTick = function(event) {       
+	p.alpha = Math.cos(p.count++*0.1)*0.4+0.6;
 }
 
 window.Button = Button;

tutorials/Inheritance/demo.html

@@ -3,7 +3,7 @@
 <head>
 	<title>EaselJS demo: Inheritance</title>
 	<link href="../shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="../../lib/easeljs-0.5.0.min.js"></script>
+	<script src="../../lib/easeljs-0.6.0.min.js"></script>
 	<script src="Button.js"></script>
 	<script>
 		var stage, holder;
@@ -24,7 +24,7 @@
 
 			btn1.x = btn2.x = btn3.x = 20;
 
-			createjs.Ticker.addListener(stage);
+			createjs.Ticker.addEventListener("tick", stage);
 		}
 	</script>
 </head>

tutorials/Inheritance/index.html

@@ -21,7 +21,7 @@ <h1>EaselJS: Inheritance</h1>
 			<p>
 				<strong>Synopsis:</strong> Creating custom classes that extend display objects.<br>
 				<strong>Topics:</strong> inheritance<br>
-				<strong>Target:</strong> EaselJS v0.5.0
+				<strong>Target:</strong> EaselJS v0.6.0
 			</p>
 		</header>
 

tutorials/Mouse Interaction/basic.html

@@ -3,7 +3,7 @@
 <head>
 	<title>EaselJS demo: onClick</title>
 	<link href="../shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="../../lib/easeljs-0.5.0.min.js"></script>
+	<script src="../../lib/easeljs-0.6.0.min.js"></script>
 	<script>
 		function init() {
 			var stage = new createjs.Stage("demoCanvas");
@@ -13,9 +13,9 @@
 			circle.x = 100;
 			circle.y = 100;
 
-			circle.onClick = function() {
-				alert("Click!");
-			}
+			circle.addEventListener("click", function() {
+				alert("clicked");
+			});
 
 			stage.addChild(circle);
 			stage.update();