Updates to tutorials: Updated to latest available CDN lib (0.8.1). Also fixed a few issues.

Lanny McNie · Lanny McNie · commit 093d7d8128fb · 2015-12-04T09:54:15.000-07:00
diff --git a/_assets/css/shared.css b/_assets/css/shared.css
@@ -65,4 +65,31 @@ code {
 	padding: 1px 3px;
 	font-family: Courier New, Courier, serif;
 	font-weight: bold;
+}
+
+/**
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    contenteditable attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that are clearfixed.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+.cf:before,
+.cf:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.cf:after {
+    clear: both;
+}
+
+/**
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */
+.cf {
+    *zoom: 1;
 }
diff --git a/tutorials/Animation and Ticker/index.html b/tutorials/Animation and Ticker/index.html
@@ -21,7 +21,7 @@
 			<h1>EaselJS <em>Animation and Ticker</em></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,
+				<strong>Topics:</strong> animation, Ticker, framerate, timingMode, getTime, paused,
 				requestAnimationFrame, Stage.update, time based animation<br/>
 				<strong>Target:</strong> EaselJS v0.6.0 and above
 			</p>
@@ -84,8 +84,8 @@ <h2>Ticker</h2>
 			</p>
 			<textarea class="brush: js;" readonly>
 // these are equivalent, 1000ms / 40fps = 25ms
-createjs.Ticker.setInterval(25);
-createjs.Ticker.setFPS(40);
+createjs.Ticker.interval = 25;
+createjs.Ticker.framerate = 40;
 			</textarea>
 			<p>
 				Let's combine all of that to make a circle move across the stage at 30 frames per second. And don't
@@ -176,7 +176,7 @@ <h2>Timing Modes</h2>
 			</p>
 			<textarea class="brush: js;" readonly>
 createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
-createjs.Ticker.setFPS(30);
+createjs.Ticker.framerate = 30;
 			</textarea>
 		</section>
 			
@@ -186,7 +186,7 @@ <h2>Pausing</h2>
 			</header>
 			<p>
 				<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
+				Ticker are "pauseable". Calling <code>Ticker.paused = true;</code> will stop <code>Ticker</code> from
 				calling <code>tick</code> on all pauseable listeners.
 			</p>
 			<p>
@@ -198,7 +198,7 @@ <h2>Pausing</h2>
 				green "unpauseable" circle does not. You can also see how the total pauseable time stops updating when
 				<code>Ticker</code> is paused.
 			</p>
-			<iframe src="pausing.html" class="demo" data-description="showing Ticker.setPaused() at work. Click to toggle pause." width="100%" height="245px"></iframe>
+			<iframe src="pausing.html" class="demo" data-description="showing Ticker.paused at work. Click to toggle pause." width="100%" height="245px"></iframe>
 		</section>
 		
 		<section>
diff --git a/tutorials/Animation and Ticker/onTick.html b/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="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
 	<script>
 		
 		var stage, circle;
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.7.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
 	<script>
 		
 		var stage, pauseCircle, goCircle, output;
diff --git a/tutorials/Animation and Ticker/simple.html b/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="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
 	<script>
 		
 		var stage, circle;
diff --git a/tutorials/Animation and Ticker/timeBased.html b/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="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
 	<script>
 		
 		var stage, timeCircle, tickCircle;
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.7.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
     <script type="text/javascript">
         WebFont.load({
             google: {
diff --git a/tutorials/Fonts/index.html b/tutorials/Fonts/index.html
@@ -12,13 +12,11 @@
             position: relative;
             left: 0px;
             width: 800px;
-            height: 220px;
         }
         .box {
             position: relative;
             float: left;
             width: 150px;
-            height: 250px;
         }
     </style>
 
@@ -53,7 +51,7 @@ <h2>CSS: Font Primer</h2>
             on the viewers machine. Lucky for us CSS has a fallback system: if the font
             you have selected is not installed, the browser will choose a similar font from a generic font set.
         </p>
-        <div class="container">
+        <div class="container cf">
             <div class="box" style="left: 0px">
                 <p align="center">
                     <b>SERIF</b>
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.7.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.8.1.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
@@ -22,7 +22,7 @@ <h1>EaselJS <em>Getting Started</em></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.7.0
+				<strong>Target:</strong> EaselJS v0.8.1
 			</p>
 		</header>
 		<p class="highlight">
@@ -41,7 +41,7 @@ <h2>Setting up your html document</h2>
 <!DOCTYPE html>
 <html>
 <head>
-	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.8.1.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.7.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
 	<script>
 		var stage, holder;
 		function init() {
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.7.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
 	<script>
 		var stage, circle;
 		function init() {
diff --git a/tutorials/HitTest/index.html b/tutorials/HitTest/index.html
@@ -22,7 +22,7 @@ <h1>EaselJS <em>Using HitTest</em></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.7.0
+				<strong>Target:</strong> EaselJS v0.8.1
 			</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.7.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
 	<script>
 		var stage, arm;
 		function init() {
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.7.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
 	<script>
 		function init() {
 			var stage = new createjs.Stage("demoCanvas");
diff --git a/tutorials/Mouse Interaction/bubbling.html b/tutorials/Mouse Interaction/bubbling.html
@@ -3,7 +3,7 @@
 <head>
 	<title>EaselJS demo: bubbling events</title>
 	<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
 	<script>
 		var stage, output, lastPhase;
 		
diff --git a/tutorials/Mouse Interaction/drag.html b/tutorials/Mouse Interaction/drag.html
@@ -3,7 +3,7 @@
 <head>
 	<title>EaselJS demo: Dragging</title>
 	<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
 	<script>
 		var stage, output;
 		
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.7.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
 	<script>
 		var stage, output;
 		
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.7.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
 	<script>
 		var stage;
 		function init() {
diff --git a/tutorials/Mouse Interaction/index.html b/tutorials/Mouse Interaction/index.html
@@ -3,7 +3,8 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 	<title>EaselJS Tutorial: Mouse Interaction</title>
-	<link href="../_shared/tutorial.css" rel="stylesheet" type="text/css">
+	<link href="../../_assets/css/shared.css" rel="stylesheet" type="text/css" />
+	<link href="../_shared/tutorial.css" rel="stylesheet" type="text/css" />
 	<script src="../_shared/tutorial.js"></script>
 	
 	<!-- SyntaxHighlighter-->
@@ -22,7 +23,7 @@ <h1>EaselJS <em>Mouse Interaction</em></h1>
 				<strong>Synopsis:</strong> Learn about mouse events on display objects and the stage.<br>
 				<strong>Topics:</strong> MouseEvent, addEventListener, on, click, dblclick, mouseover, mouseout,
 				mousemove, mousedown, enableMouseOver, drag and drop, mouseMoveOutside<br>
-				<strong>Target:</strong> EaselJS v0.7.0
+				<strong>Target:</strong> EaselJS v0.8.1
 			</p>
 		</header>
 		<p class="highlight">
diff --git a/tutorials/Mouse Interaction/stage.html b/tutorials/Mouse Interaction/stage.html
@@ -3,7 +3,7 @@
 <head>
 	<title>EaselJS demo: Mouse Events on Stage</title>
 	<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
-	<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
+	<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
 	<script>
 		var stage, label, shape, oldX, oldY, size, color;
 		
