easelJs 01

by Susan Delgado

HTML

<canvas id="HelloWorld" width="480" height="320"></canvas>

JavaScript

/* Define Canvas */
 
var canvas, 
	stage;
/* Background */
var bgSrc = new Image();
var bg;
/* Buttons */
var btnSrc = new Image();
var btn;

var centerX = 275;
var centerY = 150;
var gfxLoaded = 0; //will server as preloader flag

function Main() {
	canvas = document.getElementById('HelloWorld');
	stage = new createjs.Stage(canvas);
	stage.mouseEventEnabled = true;

	/* load GFX */
	bgSrc.src='http://lorempixel.com/600/600';
	bgSrc.name = 'bg';
	bgSrc.onload = loadGfx;

	btnSrc.src= 'http://lorempixel.com/100/100';
	btnSrc.name = 'button';
	btnSrc.onload = loadGfx;

	createjs.Ticker.setFPS(30);
	createjs.Ticker.addListener(stage);

}
function loadGfx(e) {
	if(e.target.name = 'bg'){
		bg = new createjs.Bitmap(bgSrc);
	}
	if(e.target.name = 'button'){
		btn = new createjs.Bitmap(btnSrc);
	}
	gfxLoaded++;
/* Display graphics until all of them are loaded */
	if(gfxLoaded == 2){
		buildInterface();
	}

}
function buildInterface() {
	btn.x = centerX - 40;
	btn.y = centerY - 12;

	stage.addChild(bg, btn);
	stage.update();

	/* Add btn listener */

	btn.onPress = showText;
}
function showText() {
	btn.onPress = null;

	var msg = new createjs.Text('Hello World!', 'Bold 25px Arial', '#EEE');
	msg.x = centerX - 70; 
	msg.y = centerY;
	stage.addChild(msg);
	msg.alpha = 0;

	createjs.Tween.get(btn).to({y:centerY + 50}, 300);
	createjs.Tween.get(msg).wait(400).to({alpha:1},400);
}


Main();