DIR : /home/kozerus/public_html/jkwii/js/jsdoit/tweenjs/examples/MotionGuideBlitz.html

/home/kozerus/public_html/jkwii/js/jsdoit/tweenjs/examples

<!DOCTYPE html>
<html>
<head>
	<title>TweenJS: Simple Tween Demo</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js" type="text/javascript"></script>

	<script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script>
	<script type="text/javascript" src="../lib/tweenjs-NEXT.combined.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	var canvas;
	var stage;

	function init() {
		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.addEventListener("tick", stage);
	}

	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);
	}

</script>
</head>
<body onload="init();">

<div>

	<header class="EaselJS">
		<h1>Simple Tween Demo</h1>

		<p>This example shows TweenJS in action.</p>
	</header>

	<canvas id="testCanvas" width="960" height="400"></canvas>

</div>

</body>
</html>

koh5_pano

Drag mouse to navigate.

Navigation

Left/Right Mouse drag: Changes camera heading.
Up/Sown Mouse drag: Changes camera pitch.
Scroll wheel: Changes camera field of view.
I-Key: Displays Info panel with canvas size, image size and FPS.

17.Aug.2010, Martin Wengenmayer