Updated Tutorials to latest version.

Lanny McNie · Lanny McNie · commit 4191770c84cc · 2013-11-28T16:10:30.000-07:00
Signed-off-by: Lanny McNie &lt;lanny@gskinner.com&gt;
diff --git a/tutorials/Animation and Ticker/index.html b/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, timingMode, getTime, setPaused, requestAnimationFrame, Stage.update, time based animation<br>
-				<strong>Target:</strong> EaselJS v0.7.0
+				<strong>Target:</strong> EaselJS v0.6.0 and above
 			</p>
 		</header>
 		<p class="highlight">
diff --git a/tutorials/Animation and Ticker/onTick.html b/tutorials/Animation and Ticker/onTick.html
@@ -3,10 +3,11 @@
 <head>
 	<title>EaselJS demo: DisplayObject.onTick</title>
 	<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
 	<script>
 		
 		var stage, circle;
+
 		function init() {
 			stage = new createjs.Stage("demoCanvas");
 			
@@ -17,19 +18,20 @@
 			
 			// 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) {
+			circle.on("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);
+			createjs.Ticker.on("tick", tick);
 		}
 
         function tick(event) {
             stage.update(event);
         }
+
 	</script>
 </head>
 <body onLoad="init();">
diff --git a/tutorials/Animation and Ticker/pausing.html b/tutorials/Animation and Ticker/pausing.html
@@ -3,7 +3,7 @@
 <head>
 	<title>EaselJS demo: Ticker.setPaused()</title>
 	<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
 	<script>
 		
 		var stage, pauseCircle, goCircle, output;
@@ -22,7 +22,7 @@
 			stage.addChild(goCircle);
 
 			// and register our main listener
-			createjs.Ticker.addEventListener("tick", tick);
+			createjs.Ticker.on("tick", tick);
 
 			// UI code:
 			output = stage.addChild(new createjs.Text("", "14px monospace", "#000"));
diff --git a/tutorials/Animation and Ticker/simple.html b/tutorials/Animation and Ticker/simple.html
@@ -3,10 +3,11 @@
 <head>
 	<title>EaselJS demo: Simple animation</title>
 	<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
 	<script>
 		
 		var stage, circle;
+
 		function init() {
 			stage = new createjs.Stage("demoCanvas");
 			
@@ -15,7 +16,7 @@
 			circle.y = 50;
 			stage.addChild(circle);
 			
-			createjs.Ticker.addEventListener("tick", tick);
+			createjs.Ticker.on("tick", tick);
 			createjs.Ticker.setFPS(30);
 		}
 		
diff --git a/tutorials/Animation and Ticker/timeBased.html b/tutorials/Animation and Ticker/timeBased.html
@@ -3,10 +3,11 @@
 <head>
 	<title>EaselJS demo: Time based animation</title>
 	<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
 	<script>
 		
 		var stage, timeCircle, tickCircle;
+
 		function init() {
 			stage = new createjs.Stage("demoCanvas");
 			
@@ -20,7 +21,7 @@
 			tickCircle.y = 150;
 			stage.addChild(tickCircle);
 			
-			createjs.Ticker.addEventListener("tick", tick);
+			createjs.Ticker.on("tick", tick);
 			createjs.Ticker.setFPS(20);
 		}
 		
diff --git a/tutorials/Fonts/GoogleWebFont.html b/tutorials/Fonts/GoogleWebFont.html
@@ -7,7 +7,7 @@
     <link href="../_shared/demo.css" rel="stylesheet" type="text/css">
     <link href='http://fonts.googleapis.com/css?family=Dorsa' rel='stylesheet' type='text/css'>
     <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
-	<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
     <script type="text/javascript">
         WebFont.load({
             google: {
@@ -39,7 +39,7 @@
 
             stage.addChild(txt);
             stage.update();
-            createjs.Ticker.addEventListener("tick", tick);
+            createjs.Ticker.on("tick", tick);
         }
 
         function tick() {
diff --git a/tutorials/Getting Started/demo.html b/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="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
 	<script>
 		function init() {
 			var stage = new createjs.Stage("demoCanvas");
diff --git a/tutorials/Getting Started/index.html b/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.6.0
+				<strong>Target:</strong> EaselJS v0.7.0
 			</p>
 		</header>
 		<p class="highlight">
@@ -40,7 +40,7 @@ <h2>Setting up your html document</h2>
 <!DOCTYPE html>
 <html>
 <head>
-	<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
 	<script>
 		function init() {
 			// code here.
diff --git a/tutorials/HitTest/globalToLocal.html b/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="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
 	<script>
 		var stage, holder;
 		function init() {
@@ -19,7 +19,7 @@
 				holder.addChild(shape); 
 			}
 			
-			createjs.Ticker.addEventListener("tick", tick);
+			createjs.Ticker.on("tick", tick);
 		}
 		
 		function tick(event) {
diff --git a/tutorials/HitTest/hitTest.html b/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="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
 	<script>
 		var stage, circle;
 		function init() {
@@ -14,7 +14,7 @@
 			circle.x = 0;
 			circle.y = 0;
 			
-			createjs.Ticker.addEventListener("tick", tick);
+			createjs.Ticker.on("tick", tick);
 		}
 		
 		function tick(event) {
diff --git a/tutorials/HitTest/index.html b/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.6.0
+				<strong>Target:</strong> EaselJS v0.7.0
 			</p>
 		</header>
 		<p class="highlight">
diff --git a/tutorials/HitTest/localToLocal.html b/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="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
 	<script>
 		var stage, arm;
 		function init() {
@@ -22,7 +22,7 @@
 			arm.x = 180;
 			arm.y = 100;
 			
-			createjs.Ticker.addEventListener("tick", tick);
+			createjs.Ticker.on("tick", tick);
 		}
 		
 		function tick(event) {
diff --git a/tutorials/Inheritance/Button.js b/tutorials/Inheritance/Button.js
@@ -30,13 +30,15 @@ p.initialize = function(label, color) {
 	text.y = 10;
 	
 	this.addChild(this.background,text); 
-	this.addEventListener("click", this.handleClick);  
-	this.addEventListener("tick", this.handleTick);
+	this.on("click", this.handleClick);
+	this.on("tick", this.handleTick);
+
+	this.mouseChildren = false;
 } 
 
 p.handleClick = function (event) {    
 	var target = event.target;
-	alert("You clicked on a button: "+target.label);
+	alert("You clicked on a button: "+ target.label);
 } 
 
 p.handleTick = function(event) {       
diff --git a/tutorials/Inheritance/demo.html b/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="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.7.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.addEventListener("tick", stage);
+			createjs.Ticker.on("tick", stage);
 		}
 	</script>
 </head>
diff --git a/tutorials/Inheritance/index.html b/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.6.0
+				<strong>Target:</strong> EaselJS v0.7.0
 			</p>
 		</header>
 		<p class="highlight">
diff --git a/tutorials/Mouse Interaction/basic.html b/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="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
 	<script>
 		function init() {
 			var stage = new createjs.Stage("demoCanvas");
@@ -13,7 +13,7 @@
 			circle.x = 100;
 			circle.y = 100;
 			
-			circle.addEventListener("click", function() {
+			circle.on("click", function() {
 				alert("clicked");
 			});
 			
diff --git a/tutorials/Mouse Interaction/bubbling.html b/tutorials/Mouse Interaction/bubbling.html
@@ -43,8 +43,8 @@
 			var targets = [stage,button,label,background];
 			for (var i=0; i<targets.length; i++) {
 				var target = targets[i];
-				target.addEventListener("click", handleClick, false);
-				target.addEventListener("click", handleClick, true);
+				target.on("click", handleClick, false);
+				target.on("click", handleClick, true);
 			}
 			
 			stage.update();
diff --git a/tutorials/Mouse Interaction/drag.html b/tutorials/Mouse Interaction/drag.html
@@ -26,7 +26,7 @@
 			dragger.addChild(circle, label);
 			stage.addChild(dragger);
 			
-			dragger.addEventListener("pressmove",function(evt) {
+			dragger.on("pressmove",function(evt) {
 				// currentTarget will be the container that the event listener was added to:
 				evt.currentTarget.x = evt.stageX;
 				evt.currentTarget.y = evt.stageY;
diff --git a/tutorials/Mouse Interaction/events.html b/tutorials/Mouse Interaction/events.html
@@ -3,7 +3,7 @@
 <head>
 	<title>EaselJS demo: Mouse Events</title>
 	<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
 	<script>
 		var stage, output;
 		
@@ -31,15 +31,15 @@
 			stage.addChild(square);
 			
 			// add a handler for all the events we're interested in:
-			circle.addEventListener("click", handleMouseEvent); 
-			circle.addEventListener("dblclick", handleMouseEvent);
-			circle.addEventListener("mouseover", handleMouseEvent); 
-			circle.addEventListener("mouseout", handleMouseEvent);
+			circle.on("click", handleMouseEvent);
+			circle.on("dblclick", handleMouseEvent);
+			circle.on("mouseover", handleMouseEvent);
+			circle.on("mouseout", handleMouseEvent);
 			                                                                                                                   
-			square.addEventListener("click", handleMouseEvent); 
-			square.addEventListener("dblclick", handleMouseEvent);
-			square.addEventListener("mouseover", handleMouseEvent); 
-			square.addEventListener("mouseout", handleMouseEvent);
+			square.on("click", handleMouseEvent);
+			square.on("dblclick", handleMouseEvent);
+			square.on("mouseover", handleMouseEvent);
+			square.on("mouseout", handleMouseEvent);
 			
 			stage.update();
 		}
diff --git a/tutorials/Mouse Interaction/hitArea.html b/tutorials/Mouse Interaction/hitArea.html
@@ -3,7 +3,7 @@
 <head>
 	<title>EaselJS demo: onClick</title>
 	<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
 	<script>
 		var stage;
 		function init() {
@@ -25,11 +25,11 @@
 			hit.graphics.beginFill("#000").drawRect(0, 0, label2.getMeasuredWidth(), label2.getMeasuredHeight());
 			label2.hitArea = hit;
 		   
-		 	label1.addEventListener("mouseover", handleInteraction);
-			label2.addEventListener("mouseover", handleInteraction);
+		 	label1.on("mouseover", handleInteraction);
+			label2.on("mouseover", handleInteraction);
 			
-			label1.addEventListener("mouseout", handleInteraction);      
-			label2.addEventListener("mouseout", handleInteraction); 
+			label1.on("mouseout", handleInteraction);
+			label2.on("mouseout", handleInteraction);
 			
 			stage.addChild(label1, label2);
 			stage.update();   
diff --git a/tutorials/Mouse Interaction/index.html b/tutorials/Mouse Interaction/index.html
@@ -110,7 +110,7 @@ <h2>mouseChildren & mouseEnabled</h2>
 			<p>
 				Similarly, you can completely disable mouse events on any display object without removing its handlers by setting <code>mouseEnabled</code> to <code>false</code>.
 			<textarea class="brush: js;" readonly>
-circle.addEventListener("click", function() { alert("Clicked!"); });
+circle.on("click", function() { alert("Clicked!"); });
 circle.mouseEnabled = false;
 			</textarea>
 		</section>
@@ -159,10 +159,10 @@ <h2>Stage mouse events</h2>
 				If you'd like to keep getting <code>stagemousemove</code> events when the pointer leaves the canvas, just set <code>mouseMoveOutside</code> to <code>true</code>. The <code>stageX</code> & <code>stageY</code> properties of <code>MouseEvent</code> will always return a value normalized to within your stage bounds, but you can use <code>rawX</code> and <code>rawY</code> to get values that haven't been normalized (this can cause errors if you aren't careful).
 			<textarea class="brush: js;" readonly>
 stage.mouseMoveOutside = true;
-stage.onMouseMove = function(evt) {
+stage.on("stagemousemove", function(evt) {
 	console.log("stageX/Y: "+evt.stageX+","+evt.stageY); // always in bounds
 	console.log("rawX/Y: "+evt.rawX+","+evt.rawY); // could be < 0, or > width/height
-}
+});
 			</textarea>
 			</p>
 			<p>
@@ -180,11 +180,11 @@ <h2>Drag and drop</h2>
 				event will be dispatched.
 			</p>
 			<textarea class="brush: js;" readonly>
-circle.addEventListener("pressmove", function(evt) {
+circle.on("pressmove", function(evt) {
 	evt.target.x = evt.stageX;
 	evt.target.y = evt.stageY;
 });
-circle.addEventListener("pressup", function(evt) { console.log("up"); })
+circle.on("pressup", function(evt) { console.log("up"); })
 			</textarea>
 			<p>
 				Check out the source for the demo below for a simple example of this in action. It's also a great place
diff --git a/tutorials/Mouse Interaction/stage.html b/tutorials/Mouse Interaction/stage.html
