- EaseJS
- TweenJS
- SoundJS
- PreloadJS
 |
| Introduction to CreateJS |
In this beginners tutorial we will see how to create our first application using createjs. We will see the folder structure as well as the code creating for the createjs application.
Folder Structure
HTML Markup
CreateJS works on HTML5 canvas. So we will include a canvas element on our web page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
</head>
<body onload="onDeviceReady()">
<div id="main">
<h2>Click on the butterfly <br>to make it fly</h2>
<canvas class="canvas" id="canvas" style="border:1px solid;" width="1000" height="800" />
</div>
<script src="js/easeljs-0.7.0.min.js" charset="utf-8" async defer></script>
<script src="js/tweenjs-0.5.1.min.js" charset="utf-8" async defer></script>
<script src="js/preloadjs-0.4.1.min.js" async defer></script>
<script src="js/myapp.js" charset="utf-8" async defer></script>
<script type="text/javascript" charset="utf-8" async defer>
function onDeviceReady() {
init_app();
}
</script>
</body>
</html>
Initializing the App
Here is the JavaScript code to initialize our application. We have defined few global variables that will be used throughout the application. The important part is to create the createjs ‘stage’ object. Stage acts as the base container for our application. All the future objects are added to this stage. We can say that the entire scope of our application lies within this stage object.
//Global variables
var canvas,
stage,
manifest,
preloader,
butterfly;
var loaderOut,
loading,
loader;
//Bootstrap our application
function init_app() {
canvas = document.getElementById("canvas");
//create the stage
stage = new createjs.Stage(canvas);
//Mouse events are enabled on the stage
stage.mouseEventsEnabled = true;
WIDTH = canvas.width;
HEIGHT = canvas.height;
show_loader();
load_resources();
}
Show the Loading bar
CreateJS load our resources asynchronously. It supports resource preloading, so it is easy to trap the progress of resource loading. This is enabled by the use of ‘PreloadJS’ library. Here we can see how we can trap thhe file loading and show a loading bar when the appplication starts.
//Show the Loading bar
function show_loader() {
//Create the rectangular loader
loaderOut = new createjs.Shape();
loader = new createjs.Shape();
//Place the loader at the center of canvas
loaderOut.y = HEIGHT/2;
loader.y = HEIGHT/2;
//The loading text
loading = new createjs.Text("Loading the app...", "bold italic 26px Papyrus, fantasy", "#ff7700");
loading.x = 400;
loading.y = 350;
//Add to stage
stage.addChild(loading);
}
//Asynchronously load the resources in our app
function load_resources() {
//All resources to be loaded are added to the manifest
manifest = [
{src: "assets/bg.jpg", id: "bg"},
{src: "assets/butterfly.png", id: "butterfly"}
];
//Create a resource queue
//'true' means use AJAX will be used to load resources
preloader = new createjs.LoadQueue(true);
//Attatch tthe file load event handlers
preloader.on("progress", handleProgress, this);
preloader.on("fileload", handleFileLoad, this);
preloader.on("complete", handleComplete, this);
preloader.loadManifest(manifest, true);
}
//Update the progress bar
function handleProgress(e) {
loader.x = WIDTH/2 - 100;
loader.graphics.beginFill("#C33").setStrokeStyle(3).beginStroke("rgba(232,230,231, 1)")
.drawRect(0, 0, 200*e.progress, 30);
stage.addChild(loader);
loaderOut.x = WIDTH/2 - 100;
loaderOut.graphics.beginStroke("#C33").drawRect(0, 0, 200, 30);
stage.addChild(loaderOut);
stage.update();
}
//Individual file load event handler
function handleFileLoad(e) {
console.log("File loaded");
}
//All files have finished loading
function handleComplete(e) {
//create the scene after files have finished loading
createScene();
}
Application Start Screen
Now our required resources have been loaded. SO we can start our application. We will add individual object to the stage. The objects can be placed at any position within the stage. CreateJS allows us to manipulate the properties like opacity(alpha) and scaling of the objects.
function createScene() {
var background = preloader.getResult("bg"); //bg is the id of resource in manifest
//Create the background
var bg = new createjs.Shape();
bg.x = 0; //distance from left
bg.y = 0; //distance from top
bg.graphics
.beginBitmapFill(background, 'repeat')
.drawRect(0, 0, WIDTH, HEIGHT); //create the rectangle
//Add the background to the stage
stage.addChild(bg);
var _b = preloader.getItem("butterfly");
butterfly = new createjs.Bitmap(_b.tag);
butterfly.x = WIDTH/2 - butterfly.image.width/2;
butterfly.y = HEIGHT/2 - butterfly.image.height/2;
butterfly.scaleX = 0.3;
butterfly.scaleY = 0.3;
//Attach click event to the butterfly
butterfly.on("click", butterflyClicked);
stage.addChild(butterfly);
//Set the ticker
createjs.Ticker.setFPS(20);
// in order for the stage to continue to redraw
// call the tick event
createjs.Ticker.addEventListener("tick", stage);
}
Animate the Objects
CreateJS provides us a very rich library ‘TweenJs’ for animating/tweening individual objects on the stage. Here we have animated the butterfly on the canvas. More rich animation effects can be generated.
function butterflyClicked(e) {
createjs.Tween.get(e.target, {loop:true}, true) // get a new tween targeting circle
.to({x:500, y:200, alpha:0.8}, 1000, createjs.Ease.get(1)) // tween x/y/alpha properties over 1s (1000ms) with ease out
.to({x:0}, 1000, createjs.Ease.get(-1)) // tween x over 0.5s with ease in
.to({x:600, y:500, alpha:0.8}, 1000, createjs.Ease.get(1)) // tween x/y/alpha properties over 1s (1000ms) with ease out
.wait(300) // wait for 0.3s
.to({y:200, alpha:1}, 800); // tween y/alpha over 0.8s
}
Great Bro