Animating with JavaScript is relatively easy, however if you are used to ActionScript 3 it can be particularly painful to go back to learn how JavaScript does things, compared to how AS3 does things. Enter EaselJS. This is a new JavaScript library that aims to make animating and controlling objects within a web page easy – particularly if you are used to AS3.
It is built by Grant Skinner and can be found here…
In this series of tutorials I aim to investigate JavaScript animation using EaselJS and see just exactly how easy it is to use and what it can do. At the moment my development environment is AptanaStudio3, but you can of course use DreamWeaver or any other IDE that you wish.
First download EaselJS and find the easel.js file (it should be in the lib folder) and install that in the directory of your choice. Then create a new html file and open it up. I will be creating html5 pages, and using the canvas tag, so all my animation and drawing will be done within a canvas tag with the id of canvas. For today’s post I will just create some text and insert it into my element, but in further posts I will bring in graphics and start to animate them. Bear in mend that EaselJS is built to deliberately mimic (loosely) ActionScript’s display list.
Within your html page link to the easel.js file…
<script src=“easel.js”></script>
Within your html add the following…
<canvas id=“canvas” width=“1024″ height=“768″></canvas>
Now, when I first started playing around with this, I initially put a css rule like so…
#canvas
{
background-color: rgba(235,217,118,0.3);
width:1024px;
height:768px;
}
…and I left out the inline styling. This had the unfortunate effect of scaling all the canvas elements and making them look awful. So put your width and height inline and your objects will display fine.
Once you have set your html page you just have to write something like…
<script>
function init()
{
var canvas = document.getElementById(“canvas”);
var text = new Text(“Hello!”,”bold 12pt Courier”,”#fff”);
var stage = new Stage(canvas);
stage.addChild(text);
text.y = 50.5;
text.x = 10.5;
stage.update();
}
</script>
This function I called from the body using onload…
<body onload=“init();”>
…and here is the result…
easel test1
Nothing complicated, but very easy to create. Just a couple of points though…
1] We are creating pixels, not vectors
2] As a result this is not text, it is not selectable and they are not objects that we can control – it is just one block of pixels.
Looking at the JavaScript code you can see how similar it is to AS3. First we have to get the element that we are writing in using getElementById, and then we create a new Text object. Again the options are very straightforward. For the full documentation check here…
http://easeljs.com/docs/Text.html
As you can see the Text object has three [optional] arguments – the text to display, the font to display, and the colour to use. What is nice is that you can use standard CSS for the font and colour arguments. Once you have set up the Text object, just create a stage, and pass it the canvas id, telling EaselJS that the stage is the canvas element. Once all that is done you display the Text object by using addChild(). The stage before means add the child to the stage, and within the parentheses is the object to add, our text object. Obviously you can do this multiple times and you can also position the text object by using its x and y properties.
All-in-all I find this library very easy to use, particularly as I have a lot of AS3 experience and it quite often drives me nuts trying to find a way in JavaScript to do what I normally do in AS3. The library is easy to use, and, especially when we come to animation, fun. Later on in this series we will also cover SoundJS and TweenJS, two sister libraries for playing with sounds and tweening.
In the next post of this series I will show you how to load graphics into the canvas element and animate them.