topical media & game development
mobile-graphic-easel-examples-Segments.htm / htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>EaselJS Example: Simple Animation</title>
<link href="mobile-graphic-easel-examples-assets-demoStyles.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-UID.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Matrix2D.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-EventDispatcher.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-DisplayObject.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Container.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Stage.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-MouseEvent.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Shape.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Graphics.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-Ticker.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Shadow.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Point.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script src="mobile-graphic-easel-examples-assets-Segment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var canvas;
var stage;
var rate;
var isAutomate;
var offset;
var container;
var body;
var rightArm;
var leftArm;
var loader;
function init() {
if (window.top != window) {
document.getElementById("header").style.display = "none";
}
// create stage and point it to the canvas:
canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
rate = 0;
offset = 100;
body = new Segment(120, 30, '#FFFF99');
body.rotation = 90;
body.y = -120;
rightArm = new Segment(85, 25, '#FFFF99');
rightArm.x = body.getPoint().x;
rightArm.y = body.y;
rightArm.rotation = 90;
rightForeArm = new Segment(80, 20, '#FFFF99');
rightForeArm.x = rightArm.getPoint().x;
rightForeArm.y = rightArm.getPoint().y;
rightForeArm.rotation = 90;
leftArm = new Segment(85, 25, '#FFFF99');
leftArm.x = body.getPoint().x;
leftArm.y = body.y;
leftArm.rotation = 90;
leftForeArm = new Segment(80, 20, '#FFFF99');
leftForeArm.x = rightArm.getPoint().x;
leftForeArm.y = rightArm.getPoint().y;
leftForeArm.rotation = 90;
rightThigh = new Segment(95, 20, '#FFFF99');
rightThigh.x = body.getPoint().x;
rightThigh.y = body.getPoint().y;
rightThigh.rotation = 90;
right = new Segment(110, 30, '#FFFF99');
right.x = rightThigh.getPoint().x;
right.y = rightThigh.getPoint().y;
right.rotation = 90;
leftThigh = new Segment(95, 20, '#FFFF99');
leftThigh.x = body.getPoint().x;
leftThigh.y = body.getPoint().y;
leftThigh.rotation = 90;
rightFoot = new Segment(45, 40, '#FFFF99');
rightFoot.x = right.getPoint().x;
rightFoot.y = right.getPoint().y;
left = new Segment(110, 30, '#FFFF99');
left.x = leftThigh.getPoint().x;
left.y = leftThigh.getPoint().y;
left.rotation = 90;
leftFoot = new Segment(45, 40, '#FFFF99');
leftFoot.x = left.getPoint().x;
leftFoot.y = left.getPoint().y;
container = new createjs.Container();
container.addChild(leftArm, leftForeArm, leftThigh, leftFoot, left, body, right, rightThigh, rightFoot, rightForeArm, rightArm);
container.x = 275;
container.y = 137;
isAutomate = false;
stage.addChild(container);
stage.update();
createjs.Ticker.addEventListener("tick", tick);
}
function stop() {
createjs.Ticker.removeEventListener("tick", tick);
}
function move(segA, segB, segC, p_rate) {
var angleA = Math.sin(p_rate) * 45 + 90;
var angleB = Math.sin(p_rate + offset) * 45 + 45;
var angleC = Math.sin(p_rate) * 90 - 50;
segA.rotation = angleA;
segB.rotation = segA.rotation + angleB;
segC.rotation = segB.rotation + angleC;
segB.x = segA.getPoint().x;
segB.y = segA.getPoint().y;
segC.x = segB.getPoint().x;
segC.y = segB.getPoint().y;
}
function moveUpperBody(segA, segB, p_rate) {
var angleA = Math.sin(p_rate) * 45 + 90;
var angleB = Math.sin(p_rate + offset) * 45 - 35;
segA.rotation = angleA;
segB.rotation = segA.rotation + angleB;
segB.x = segA.getPoint().x;
segB.y = segA.getPoint().y;
}
function handleClick(event) {
isAutomate = !isAutomate;
}
function tick(event) {
rate += 0.1;
move(rightThigh, right, rightFoot, rate);
move(leftThigh, left, leftFoot, rate * 2);
moveUpperBody(leftArm, leftForeArm, rate * 2.5);
moveUpperBody(rightArm, rightForeArm, rate * 1.5);
stage.update(event);
}
</script>
</head>
<body onload="init();">
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> Segment Animation</h1>
<p>A sample of display elements joined together in the display hierarchy.</p>
</header>
<div class="canvasHolder">
<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
