topical media & game development
mobile-graphic-easel-examples-Transform.htm / htm
<!DOCTYPE html>
<html>
<head>
<title>Transform</title>
<link href="mobile-graphic-easel-examples-assets-demoStyles.css" rel="stylesheet" type="text/css" />
<script>
// this sets the namespace for CreateJS to the window object, so you can instantiate objects without specifying
// the namespace: "new Graphics()" instead of "new createjs.Graphics()"
</script>
<script src="./mobile-graphic-easel-examples-assets-preloadjs-0.3.0.min.js"></script>
<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-utils-Ticker.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Text.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-filters-Filter.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Bitmap.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-filters-ColorMatrix.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-filters-ColorMatrixFilter.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<link type="text/css" href="./mobile-graphic-easel-examples-assets-css-darkhive-jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
var manifest;
var stage;
var canvas;
var imageContainer;
var images;
var loader;
var image_width;
var image_height;
function init() {
if (window.top != window) {
document.getElementById("header").style.display = "none";
}
document.getElementById("loader").className = "loader";
canvas = document.getElementById('testCanvas');
stage = new createjs.Stage(canvas);
imageContainer = new createjs.Container();
images = [];
image_width = 149;
image_height = 370;
$(".transformSlider").slider({
value: 0,
min: -30,
max: 30,
step: 1,
slide:handleChange,
change:handleChange
});
manifest = [
{src:"./mobile-graphic-easel-examples-assets-image_1_1.png", id:"image0"},
{src:"./mobile-graphic-easel-examples-assets-image_1_2.png", id:"image1"},
{src:"./mobile-graphic-easel-examples-assets-image_1_3.png", id:"image2"},
{src:"./mobile-graphic-easel-examples-assets-image_1_4.png", id:"image3"}
];
loader = new createjs.LoadQueue(false);
loader.onProgress = handleProgress;
loader.onComplete = handleComplete;
loader.onFileLoad = handleFileLoad;
loader.loadManifest(manifest);
stage.addChild(imageContainer);
createjs.Ticker.addEventListener("tick", tick);
}
function stop() {
createjs.Ticker.removeEventListener("tick", tick);
}
function handleProgress() {
//console.log('enter')
}
function handleFileLoad(event) {
images.push(event.item);
}
function handleComplete() {
document.getElementById("loader").className = "";
var l = images.length;
for(var i=0;i<l;i++) {
var id = images[i].id;
var bmp = new createjs.Bitmap(loader.getResult(id));
imageContainer.addChild(bmp);
}
displayImages();
}
function displayImages() {
var l = images.length;
for(var i=0;i<l;i++) {
var bmp = imageContainer.getChildAt(i);
bmp.cache(0,0, image_width, image_height);
bmp.x = (image_width) * i;
bmp.snapToPixel = true;
}
imageContainer.x = canvas.width - (image_width*l) >> 1;
imageContainer.y = canvas.height - image_height >> 1;
stage.update();
}
function show(value) {
}
function handleChange() {
var value = this.slider("option", "value");
$( "#amount" ).text("Amount:"+value);
if (value == 0) { return; }
var l = images.length;
for(var i=0;i<l;i++) {
var bmp1 = imageContainer.getChildAt(i);
if (i%2) {
bmp1.skewY = value;
} else {
bmp1.skewY = -1*value;
bmp1.y = -(150) * Math.sin(bmp1.skewY/180*Math.PI)
}
bmp1.x = ((image_width - 1)*i) * Math.cos(bmp1.skewY/180*Math.PI);
bmp1.filters = [getColorMatrixFilter(bmp1.skewY)];
bmp1.snapToPixel = true;
bmp1.updateCache();
}
var _scale = (value > 0) ? 1/value * 20 : -1*(1/value * 20);
imageContainer.rotation = (value > 0) ? value>>1 : - 1*value>>1;
imageContainer.scaleX = imageContainer.scaleY = (_scale <= 1) ? _scale : 1;
imageContainer.x = canvas.width - (image_width*l) >> 1;
imageContainer.y = canvas.height - image_height >> 1;
stage.update();
}
function getColorMatrixFilter(value) {
var cm = new createjs.ColorMatrix();
cm.adjustBrightness(value*0.75);
return new createjs.ColorMatrixFilter(cm);
}
function tick(event) {
stage.update(event);
}
</script>
<link rel="stylesheet" href="mobile-graphic-easel-examples-assets-demoStyles.css"/>
<style type="text/css">
#slider {
width:100px;
left: 830px;
top: 350px;
}
LABEL {
position: absolute;
left: 830px;
top: 330px;
width: 100px;
}
</style>
</head>
<body onload="init()">
<div id="loader"></div>
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> Transformation</h1>
<p>This sample shows transformations, including skews. Drag the slider to affect the skew amount.</p>
</header>
<div width="960" height="400" style="position:absolute; ">
<div id="slider" class="transformSlider"></div>
<label id="amount" style="color:#777">Amount</label>
</div>
<canvas id="testCanvas" width="960" height="400"></canvas>
</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.
