General Updates

* Updated documentation * Added EventDispatcher support * Updated examples
CreateJS · Jan 28, 2013 · a6f6e7d · a6f6e7d
1 parent cd28e0c
commit a6f6e7d
Show file tree

Hide file tree

Showing 17 changed files with 523 additions and 230 deletions.
diff --git a/examples/CssExample.html b/examples/CssExample.html
@@ -5,7 +5,8 @@
 
 	<link rel="stylesheet" href="assets/demoStyles.css" />
 	<script type="text/javascript" src="../lib/easeljs-0.5.0.min.js"></script> <!-- included for Ticker -->
-
+
+    <script type="text/javascript" src="../src/easeljs/events/EventDispatcher.js"></script>
 	<script type="text/javascript" src="../src/tweenjs/Tween.js"></script>
 	<script type="text/javascript" src="../src/tweenjs/CSSPlugin.js"></script>
 
@@ -24,7 +25,7 @@
 		createjs.CSSPlugin.install(createjs.Tween);
 
 		createjs.Ticker.setFPS(20);
-		var count = 200;
+		var count = 600;
 		while (--count >= 0) {
 			var box = document.createElement("div");
 			box.style.width = "6px";

diff --git a/examples/Example.html b/examples/Example.html
@@ -6,6 +6,7 @@
 	<link rel="stylesheet" href="assets/demoStyles.css" />
 	<script type="text/javascript" src="../lib/easeljs-0.5.0.min.js"></script>
 
+    <script type="text/javascript" src="../src/easeljs/events/EventDispatcher.js"></script>
 	<script type="text/javascript" src="../src/tweenjs/Tween.js"></script>
 	<script type="text/javascript" src="../src/tweenjs/Ease.js"></script>
 
@@ -34,17 +35,17 @@
 		// set up a tween that tweens between scale 0.3 and 1 every second.
 		createjs.Tween.get(circle,{loop:true})
 			.wait(1000) // wait for 1 second
-			.to({scaleX:0.2,scaleY:0.2},500) // jump to the new scale properties (default duration of 0)
+			.to({scaleX:0.2,scaleY:0.2}) // jump to the new scale properties (default duration of 0)
 			.wait(1000)
-			.to({scaleX:1,scaleY:1},1000,createjs.Ease.bounceOut); // tween to scaleX/Y of 1 with ease bounce out
+			.to({scaleX:1,scaleY:1},1000,createjs.Ease.bounceOut) // tween to scaleX/Y of 1 with ease bounce out
 
-		// for demonstration purposes, try setting the override (fourth) parameter to true
+		// for demonstration purposes, try setting the override (third) parameter to true
 		// this will override any previous tweens on the circle and replace them with this tween
 		// resulting in the scaling tween above being cleared.
-		createjs.Tween.get(circle, {loop:true}, null, false) // get a new tween targeting circle
+		createjs.Tween.get(circle, {loop:true}, true) // get a new tween targeting circle
 			.to({x:500,y:200,alpha:0.1},1000,createjs.Ease.get(1)) // tween x/y/alpha properties over 1s (1000ms) with ease out
-			.to({x:0},1000,createjs.Ease.get(-1)) // tween x over 1s with ease in
-			.to({y:300}) // jump to new y property (defaults to a duration of 0)
+			.to({x:0},1000,createjs.Ease.get(-1)) // tween x over 0.5s with ease in
+			.to({y:400}) // jump to new y property (defaults to a duration of 0)
 			.call(console.log, ["wait..."], console) // call console.log("wait...")
 			.wait(800) // wait for 0.8s
 			.to({y:0,alpha:1},300) // tween y/alpha over 0.3s
@@ -83,6 +84,6 @@ <h1><span class="text-product">Tween<strong>JS</strong></span> TweenJS Example</
 	</header>
 
 	<canvas id="canvas1" width="960" height="350"></canvas><br/>
-	<input type="button" value="toggle paused" onclick="Ticker.setPaused(!Ticker.getPaused());">
+	<input type="button" value="toggle paused" onclick="Ticker.setPaused(!Ticker.getPaused());"
 </body>
 </html>
diff --git a/examples/MotionGuideBlitz.html b/examples/MotionGuideBlitz.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>TweenJS: Simple Tween Demo</title>
+
+	<link rel="stylesheet" href="assets/demoStyles.css" />
+	<script type="text/javascript" src="../lib/easeljs-0.5.0.min.js"></script>
+
+	<script type="text/javascript" src="../src/easeljs/events/EventDispatcher.js"></script>
+	<script type="text/javascript" src="../src/tweenjs/Tween.js"></script>
+	<script type="text/javascript" src="../src/tweenjs/Ease.js"></script>
+	<script type="text/javascript" src="../src/tweenjs/MotionGuidePlugin.js"></script>
+
+	<!-- We also provide hosted minified versions of all CreateJS libraries.
+	  http://code.createjs.com -->
+
+	<script>
+		var canvas;
+		var stage;
+
+		function init() {
+			if (window.top != window) {
+				document.getElementById("header").style.display = "none";
+			}
+
+			createjs.MotionGuidePlugin.install(createjs.Tween);
+
+			canvas = document.getElementById("testCanvas");
+			stage = new createjs.Stage(canvas);
+			stage.autoClear = true;
+
+			var ball;
+			var count = 1000;
+
+			while(count--){
+				ball = new createjs.Shape();
+				ball.graphics.ss(1,'round','round').s(('#000000')).f("#"+rc()+rc()+rc()).dc(0,0,5).ef().es();
+				var path = [rx(),ry(),rx(),ry(),rx(),ry()];
+				createjs.Tween.get(ball, {loop:true})
+					.to({guide:{path:path, start:0, end:1}}, 5000)
+					.wait(Math.random()*4000)
+					.to({guide:{path:path, start:1, end:0}}, 5000);
+				stage.addChild(ball);
+			}
+
+			createjs.Ticker.addListener(window);
+			stage.autoClear = false;
+		}
+
+		function rx(){ return Math.random()*940+10; }
+		function ry(){ return Math.random()*380+10; }
+		function rc(){return Math.round(Math.random()*0xED+0x12).toString(16); }
+
+		function tick() {
+			stage.update();
+		}
+
+
+	</script>
+	<link rel="stylesheet" href="assets/demoStyles.css"/>
+</head>
+<body onload="init();" >
+
+<div class="canvasHolder">
+
+	<header id="header" class="EaselJS">
+	    <h1><span class="text-product">Tween<strong>JS</strong></span> Simple Tween Demo</h1>
+	    <p>This example shows TweenJS in action.</p>
+	</header>
+
+	<canvas id="testCanvas" width="960" height="400"></canvas>
+
+</div>
+
+</body>
+</html>
diff --git a/examples/MotionGuideDemo.html b/examples/MotionGuideDemo.html
@@ -6,6 +6,7 @@
 	<link rel="stylesheet" href="assets/demoStyles.css" />
 	<script type="text/javascript" src="../lib/easeljs-0.5.0.min.js"></script>
 
+    <script type="text/javascript" src="../src/easeljs/events/EventDispatcher.js"></script>
 	<script type="text/javascript" src="../src/tweenjs/Tween.js"></script>
 	<script type="text/javascript" src="../src/tweenjs/Ease.js"></script>
 	<script type="text/javascript" src="../src/tweenjs/MotionGuidePlugin.js"></script>
@@ -28,33 +29,33 @@
 			stage = new createjs.Stage(canvas);
 			stage.autoClear = true;
 
-			// create the visual path
-			var pathVisuals = new createjs.Shape();
-			pathVisuals.graphics.setStrokeStyle(5, 'round', 'round');
-			pathVisuals.graphics.beginStroke(('#222'));
-			pathVisuals.graphics.moveTo(100,100).curveTo(860,100, 860,300);
-			pathVisuals.graphics.endStroke();
-
-			// create the square
-			var square = new createjs.Shape();
-			square.graphics.setStrokeStyle(5, 'round', 'round');
-			square.graphics.beginStroke(('#000000'));
-			square.graphics.beginFill("#20D020");
-			square.graphics.drawRect(-33,-20,66,40);
-			square.graphics.endStroke();
-			square.graphics.endFill();
-
-			// animate the square along the path
-			var tween = createjs.Tween.get(square, {loop:true}, true)
-				.to({guide:{path:[100,100, 860,100, 860,300]}}, 6000);
-
-			// add the objects to the stage
-			stage.addChild(pathVisuals);
-			stage.addChild(square);
+			var ball = new createjs.Shape();
+			ball.graphics.setStrokeStyle(5, 'round', 'round');
+			ball.graphics.beginStroke(('#000000'));
+			ball.graphics.beginFill("#FF0000").drawCircle(0,0,50);
+			ball.graphics.endStroke();
+			ball.graphics.endFill();
+			ball.graphics.setStrokeStyle(1, 'round', 'round');
+			ball.graphics.beginStroke(('#000000'));
+			ball.graphics.moveTo(0,0);
+			ball.graphics.lineTo(50,0);
+			ball.graphics.endStroke();
+
+			var tween = createjs.Tween.get(ball, {loop:true}, true)
+				.to({guide:{path:[100,100, 800,100, 800,300], orient:true}}, 5000)
+				.wait(1000)
+				.to({guide:{path:[800,300, 100,300, 100,100], end:0.75, orient:true}}, 3750)
+				;
+
+			stage.addChild(ball);
 
 			createjs.Ticker.addListener(window);
 		}
 
+		function handleComplete(tween) {
+			var ball = tween._target;
+
+		}
 		function tick() {
 			stage.update();
 		}
@@ -68,7 +69,7 @@
 <div class="canvasHolder">
 
 	<header id="header" class="EaselJS">
-	    <h1><span class="text-product">Tween<strong>JS</strong></span> Simple Motion Guide Demo</h1>
+	    <h1><span class="text-product">Tween<strong>JS</strong></span> Simple Tween Demo</h1>
 	    <p>This example shows a simple use of the MotionGuidePlugin.</p>
 	</header>
 

diff --git a/examples/MultiMotionDemo.html b/examples/MultiMotionDemo.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title>TweenJS: Complex Motion Guide Demo</title>
+	<title>TweenJS: Simple Motion Guide Demo</title>
 
 	<link rel="stylesheet" href="assets/demoStyles.css" />
 	<script type="text/javascript" src="../lib/easeljs-0.5.0.min.js"></script>
 
+    <script type="text/javascript" src="../src/easeljs/events/EventDispatcher.js"></script>
 	<script type="text/javascript" src="../src/tweenjs/Tween.js"></script>
 	<script type="text/javascript" src="../src/tweenjs/Ease.js"></script>
 	<script type="text/javascript" src="../src/tweenjs/MotionGuidePlugin.js"></script>
@@ -16,8 +17,6 @@
 	<script>
 		var canvas;
 		var stage;
-		var star;
-		var path;
 
 		function init() {
 			if (window.top != window) {
@@ -30,62 +29,51 @@
 			stage = new createjs.Stage(canvas);
 			stage.autoClear = true;
 
-			// draw a single star to re-use it's graphics
-			star = new createjs.Shape();
-			star.graphics.beginFill("#DFD200");
-			star.graphics.drawPolyStar(0, 0, 25, 3, 0.75);
-
-			// create the path to be shared
-			path = [100,300, 400,0, 960,200, 600,200, 400,400, 350,350, 300,400, 275,375, 250,400];
-
-			// create 50 stars to travel along the shared path
-			for(var count=50; count>=0; count--){
-				setTimeout(addStar, 7000*Math.random())
-			}
+			var ball = new createjs.Shape();
+			ball.graphics.setStrokeStyle(5, 'round', 'round');
+			ball.graphics.beginStroke(('#000000'));
+			ball.graphics.beginFill("#FF0000").drawCircle(0,0,50);
+			ball.graphics.endStroke();
+			ball.graphics.endFill();
+			ball.graphics.setStrokeStyle(1, 'round', 'round');
+			ball.graphics.beginStroke(('#000000'));
+			ball.graphics.moveTo(0,0);
+			ball.graphics.lineTo(50,0);
+			ball.graphics.endStroke();
+
+			ball.x = 0;
+			ball.y = 400;
+			/*var tween = createjs.Tween.get(ball, {loop:true}, true)
+					.wait(1000)
+					.to({x:300,y:300}, 5000)
+					.wait(1000)
+					.to({guide:{path:[100,100, 800,100, 800,300], orient:true}}, 5000)
+					.wait(1000)
+					.to({guide:{path:[100,100, 800,100, 800,300], orient:true, start:1, end:0}}, 5000)
+					.to({x:300,y:300}, 5000)
+					.to({guide:{path:[100,100, 800,100, 800,300], orient:true, start:1, end:0}}, 5000)
+			;*/
+			var tween = createjs.Tween.get(ball, {loop:true}, true)
+					.to({x:150,y:150}, 3000)
+					.to({rotation: -45}, 1000)
+					.to({guide:{path:[100,100, 800,100, 800,300], orient:true}}, 5000)
+					.to({x:900,y:300}, 2000)
+					.wait(2000)
+					.to({rotation: 360}, 2000)
+					.to({guide:{path:[100,100, 800,100, 800,300], start:1, end:0}}, 5000)
+					.wait(2000)
+					.to({x:200,y:200}, 1000)
+					.to({rotation: -360, guide:{path:[100,100, 800,100, 800,300]}}, 3000)
+				;
+
+			stage.addChild(ball);
 
 			createjs.Ticker.addListener(window);
 		}
 
-		function addStar(tween) {
-			// reuse the star to create the obj
-			var obj = new createjs.Shape(star.graphics);
-
-			// determine some animation properties
-			var animationLength = 4000+1000*Math.random();		// make some tweens faster
-			var end = 0.6 + 0.5*Math.random();					// stop some tweens part way along
-
-			// use 2 different tweens, but share the same path
-			if(Math.random() < 0.1){
-				// orient some tweens to the path
-				tweenProperties = {
-					guide:{path:path, end:end, orient:true},
-					alpha:0
-				};
-
-				// make the oriented stars big and flattened (like space ships)
-				obj.scaleX = 1.2 + 0.8*Math.random();
-				obj.scaleY = obj.scaleX*0.5;
-
-			} else {
-				// rotate the other objects
-				tweenProperties = {
-					guide:{path:path, end:end},
-					alpha:0,
-					rotation:1080
-				};
-
-				// make spinning stars small
-				obj.scaleX = obj.scaleY = 0.2 + 0.3*Math.random();
-				obj.alpha = 0.5;
-			}
-
-			// apply our tween
-			createjs.Tween.get(obj, {loop:true}, true)
-				.to(tweenProperties, animationLength, createjs.Ease.quadOut)
-			;
+		function handleComplete(tween) {
+			var ball = tween._target;
 
-			// display the tweening object
-			stage.addChild(obj);
 		}
 		function tick() {
 			stage.update();
@@ -100,8 +88,8 @@
 <div class="canvasHolder">
 
 	<header id="header" class="EaselJS">
-	    <h1><span class="text-product">Tween<strong>JS</strong></span> Complex Motion Guide Demo</h1>
-	    <p>This example shows a complex use of the MotionGuidePlugin that re-uses path objects and shows more API.</p>
+	    <h1><span class="text-product">Tween<strong>JS</strong></span> Simple Tween Demo</h1>
+	    <p>This example shows a simple use of the MotionGuidePlugin.</p>
 	</header>
 
 	<canvas id="testCanvas" width="960" height="400"></canvas>

diff --git a/examples/SimpleTweenDemo.html b/examples/SimpleTweenDemo.html
@@ -6,6 +6,7 @@
 	<link rel="stylesheet" href="assets/demoStyles.css" />
 	<script type="text/javascript" src="../lib/easeljs-0.5.0.min.js"></script>
 
+    <script type="text/javascript" src="../src/easeljs/events/EventDispatcher.js"></script>
 	<script type="text/javascript" src="../src/tweenjs/Tween.js"></script>
 	<script type="text/javascript" src="../src/tweenjs/Ease.js"></script>
 

diff --git a/examples/SparkTable.html b/examples/SparkTable.html
@@ -6,6 +6,7 @@
 	<link rel="stylesheet" href="assets/demoStyles.css" />
 	<script type="text/javascript" src="../lib/easeljs-0.5.0.min.js"></script>
 
+    <script type="text/javascript" src="../src/easeljs/events/EventDispatcher.js"></script>
 	<script type="text/javascript" src="../src/tweenjs/Ease.js"></script>
 
 	<!-- We also provide hosted minified versions of all CreateJS libraries.