Create Js is a set of applications and tools that provide extra functionality to the < canvas>
CreateJS is a set of applications and tools that provide extra functionality to the < canvas> HTML5 .
We will build a simple website that uses each of the applications, the complete code is available on GitHub to download and use. Some of the applications that make CreateJS are:
- EaselJs – creation, manipulation, and positioning of geometric shapes, and bitmaps on the canvas. Something very interesting is that each element created through EaselJs returns a reference to it (which does not happen naturally in canvas, which simply modifies the pixels and leaves no reference to the change in any way).
- SoundJs – loading and using sounds. It lets you associate a sound reproduction to the events of the easeljs objects. For example, if a square is created with easeljs, it could associate a sound to the event “click” of it.
- TweenJs – Animation. You can animate the elements of HTML 5 and elements created through EaselJs.
- PreloadJs – Manage and coordinate the loading of resources (image files, audio, etc). It lets you create queues load, which can specify the properties of the resources which are loaded and presents an event as ‘completed,’ onto which a ´callback´ function can be passed to ensure perform certain procedures once all resources have been downloaded.
Site development will involve the following actions:
- Create a scenario based EaselJs < canvas> element .
- Create a geometric figure through EaselJs and add it to the stage.
- Animate the figure with TweenJs .
- Automate the update of the stage with the ´Ticker´ tool.
- Associate playback sound to the event “click” of the figure.
- Implement a LoadQueue of PreloadJs to load a sound and an image.
- Attach an image to the stage dynamically when you “click on the figure.
As a first step we will set up the basic structure of the site, and declare a stage and figure.
<html>
<head>
<title>Create JS - Concept demo</title>
<script type="text/javascript" src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
<script type="text/javascript">
var stage;
function init () {
stage = new createjs.Stage('myStage');
var ball = new createjs.Shape();
ball.graphics.beginFill('black').drawCircle(0,0,50);
ball.x = 50;
ball.y = 200;
stage.addChild(ball);
stage.update();
}
</script>
</head>
<body onload="init()">
<canvas id="myCanvas" width="500" height="500"> </canvas>
</body>
</html>
The first script tag is to include the entire suite CreateJS from CDN link. Each application can also be downloaded separately.
stage= new createjs.Stage stage (‘myStage’)
Creates an EaselJs scenario based on the canvas whose id is ‘myCanvas’.
var = new createjs.Shape ()
Create a geometric figure from EaselJs, though it still says “Shape,” has no associated graph. In the next step you access the graphics property of Shape and configure the drawing filled in in black, a circle at the position (0, 0) set at a diameter of 50 pixels.
stage.addChild (ball)
Figure on stage is added, but if we opened the site we would see nothing because the scenario does not reflect visual changes until the update method of that figure is called.
stage.update ()
This refreshes the canvas and shows the figure.
Now we will make it so that the circle moves from left to right of the stage, until it returns to its original position, and that the animation plays in an endless cycle (loop).
<html>
<head>
<title>Create JS - Concept demo</title>
<script type="text/javascript" src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
<script type="text/javascript">
var stage;
function init () {
stage = new createjs.Stage('myStage');
var ball = new createjs.Shape();
ball.graphics.beginFill('black').drawCircle(0,0,50);
ball.x = 50;
ball.y = 200;
stage.addChild(ball);
createjs.Tween.get(ball,{loop:true}).to({x:450},3000).to({x:50},3000);
stage.update();
}
</script>
</head>
<body onload="init()">
<canvas id="myStage" width="500" height="500"> </canvas>
</body>
</html>
createjs.Tween.get (ball , { loop: true} )
It indicates that the object will be animated and true loop option to repeat this.
.to ( { x : 450 } , 3000 )
It specifies that the object will move to the position in multiples of 450 and will take three seconds.
.to ( { x : 50 } , 3000 )
It specifies that the object will move back to the 50th position and will take three seconds.
This does not work successfully- part of it does, but is not reflected on the canvas because it updates the stage only once. What we need is something to update the canvas automatically and constantly. For this, we can use the tool Ticker.
<html>
<head>
<title>Create JS - Concept demo</title>
<script type="text/javascript" src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
<script type="text/javascript">
var stage;
function init () {
stage = new createjs.Stage('myStage');
var ball = new createjs.Shape();
ball.graphics.beginFill('black').drawCircle(0,0,50);
ball.x = 50;
ball.y = 200;
stage.addChild(ball);
createjs.Tween.get(ball,{loop:true})
.to({x:450},3000)
.to({x:50},3000);
createjs.Ticker.setFPS(40);
createjs.Ticker.addEventListener('tick', handleTick);
}
function handleTick (event) {
stage.update();
}
</script>
</head>
<body onload="init()">
<canvas id="myStage" width="500" height="500"> </canvas>
</body>
</html>
Now stage.update() is called in every “tick” and we define the refresh rate at 40 times per second- this number dictates how smooth or demanding our application will be for our processor.
Now to add a sound by clicking on the circle. First we have to import the sound from a file, the file will be called pop.mp3, for that we use SoundJs in the following way:
<html>
<head>
<title>Create JS - Concept demo</title>
<script type="text/javascript" src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
<script type="text/javascript">
var stage;
function init () {
stage = new createjs.Stage('myStage');
var ball = new createjs.Shape();
ball.graphics.beginFill('black').drawCircle(0,0,50);
ball.x = 50;
ball.y = 200;
stage.addChild(ball);
createjs.Tween.get(ball,{loop:true})
.to({x:450},3000)
.to({x:50},3000);
createjs.Ticker.setFPS(40);
createjs.Ticker.addEventListener('tick', tickHandler);
createjs.Sound.registerSound('/sounds/pop.mp3','pop');
ball.addEventListener('click',ballClickHandler);
}
function tickHandler (event) {
stage.update();
}
function ballClickHandler (event) {
createjs.Sound.play('pop');
}
</script>
</head>
<body onload="init()">
<canvas id="myStage" width="500" height="500"> </canvas>
</body>
</html>
createjs.Sound.registerSound(soundFilePath, id)
A sound file is loaded and is associated with an id that can be used to reproduce the sound when desired.
createjs.Sound.play(soundId)
Reproduces the sound corresponding to the id passed by parameter.
As a last step we will add an image from a file to attach to the stage dynamically. For this, we could import the image individually from EaselJs as we did with SoundJs for sound, but it would be a good opportunity to unify the charge of resources of all kinds through PreloadJs , so it easy to add another resource later.
<!DOCTYPE html>
<html>
<head>
<title>Create JS - Concept demo</title>
<script type="text/javascript" src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
<script type="text/javascript">
var stage, queue;
function init () {
stage = new createjs.Stage('myStage');
queue = new createjs.LoadQueue()
queue.installPlugin(createjs.Sound);
queue.loadManifest([
{id:'pop', src:'/sounds/pop.mp3'},
{id:'smiley', src:'/images/smiley.png'}
]);
queue.addEventListener('complete',handleComplete);
}
function handleTick (event) {
stage.update();
}
function handleBallClick (event) {
var bitmap = new createjs.Bitmap(queue.getResult('smiley'));
bitmap.x = Math.random() * (500 - 90);
bitmap.y = Math.random() * (500 - 90);
stage.addChild(bitmap);
createjs.Sound.play('pop');
}
function handleComplete (event) {
var ball = new createjs.Shape();
ball.graphics.beginFill('black').drawCircle(0,0,50);
ball.x = 50;
ball.y = 200;
ball.addEventListener('click',handleBallClick)
createjs.Tween.get(ball,{loop:true}).to({x:450},3000).to({x:50},3000);
createjs.Ticker.addEventListener('tick', handleTick);
stage.addChild(ball);
}
</script>
</head>
<body onload="init()">
<canvas id="myStage" width="500" height="500"> </canvas>
</body>
</html>
var queue = new createjs.LoadQueue();
Create a list of empty load.
queue.installPlugin (createjs.Sound);
This statement loads the plugin SoundJs before you start the application, thus if the plugin is not found, or an error occurs, you´ll be informed at the beginning instead of, for example, having it happen when you called on createjs.Sound.play (id) for example.
queue.loadManifest ([
{Id: ‘pop’ src ‘/ sounds / pop.mp3′},
{Id: ‘smiley’ src ‘/ images / smiley.png’}
]);
Here all types of external resources that will be used in the application are declared by specifying the id which will be accessed and the path to the file.
queue.addEventListener (‘complete’, handleComplete);
LoadQueue presents a “complete” event that calls the function parameter passed, when all resources have been loaded from queue.loadManifest. That allows us to control the flow of the application so that no request that calls a resource is executed without ensuring beforehand that it is available.
We reached the end of this introduction to CreateJS with an application that shows some of the basic and common uses in the use of this suite. Of course, there is much more to learn as filters, masks, or complex movements in animations to name a few. Therefore, to those interested in learning more I recommend to head over to the official site CreateJS which contains extensive documentation on the use and operation of each of the components.
Comments? Contact us for more information. We’ll quickly get back to you with the information you need.
