<!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>