Day 5:HTML5 Animation using EASELJS

EASELJS is part of CREATEJS, which is another JavaScript Library for working with the html5 canvas element. This Library is particularly interesting for folks coming to JavaScript from ActionScript because this one was created by Grant Skinner. Because of that, the methods of EASELJS are very similar to the methods in Flash.

Let’s start with something simple and just get a graphic to move across the screen. You can see a sample here.

HTML

  1. <!DOCTYPE html>
  2. <head>
  3. <title>EaselJS: Basics</title>
  4. <script src="http://code.createjs.com/easeljs-0.4.1.min.js"></script>
  5.  
  6. <script>
  7.  var canvas;
  8.  var stage;
  9.  var txtField;
  10.  var img;
  11.  var logo;
  12.  
  13.  var canvasWidth;
  14.  var canvasHeight;
  15.  
  16.  function init() {
  17.  
  18.  canvas = document.getElementById("canvas");
  19.  stage = new Stage(canvas);
  20.  
  21.  canvasWidth = canvas.width;
  22.  canvasHeight = canvas.height;
  23.  
  24.  txtField = new Text("Welcome to EASELJS!", "28pt Arial", "#ff0099");
  25.  txtField.x = canvasWidth/2 - 300;
  26.  txtField.y = canvasHeight/2 - 130;
  27.  
  28.  img = new Image();
  29.  img.src = "images/ialogofake.png";
  30.  img.onload = onImageLoaded;
  31.  }
  32.  
  33.  function onImageLoaded(event) {
  34.  console.log("onImageLoaded");
  35.  logo = new Bitmap(img);
  36.  stage.addChild(logo);
  37.  logo.x = canvasWidth;
  38.  logo.y = canvasHeight/2 - 100;
  39.  stage.addChild(txtField);
  40.  
  41.  Ticker.addListener(window);
  42.  }
  43.  
  44.  function tick() {
  45.  logo.x -=2;
  46.  // cuts out the clear canvas in regular js
  47.  stage.update();
  48.  }
  49. </script>
  50.  
  51. </head>
  52.  
  53. <body onload="init()">
  54.  
  55. <canvas id="canvas" width="950" height="580"></canvas>
  56. </body>
  57. </html>

Line55 – Line 57 we call a function when our body loads, create our canvas tag and set its id to canvas.

inside our script tags we’re going to create vars for the canvas, stage, a text field an image and a Bitmap (of the image).

When the body loads, Init() is fired and we set our vars

Line20 should look familiar its where we set our canvas.
Line 21 is the EASELJS way of setting a stage from the canvas. A stage is like a context. but EASELJS takes care of the deets for you.

Line 26 we create a new Text() class and pass in three vars, our text, a point size and a color.

Line 30 we create a new Image and set its src. when the image loads we’ll call a function called onImageLoaded();

Inside our onImageLoaded() function we’ll populate the bitmap, and add items to the stage. additionally we’ll add an Event Listener to the window to update the view.

Most notable is how much like ActionScript this all is.

logo = new Bitmap(img)
stage.addChild(logo);

On Line 43 we add the listener to the Ticker, which is EASELJS’ version of the enter frame event. We’ll pass in window and oddly enough we do not need to call a custom function to be fired Ticker automatically calls tick() which acts as the Enter Frame event.

Line46 is where we define what happens when tick() is called.
Like any EnterFrame function in Flash, this is where you would update the position and define movement for your elements.

logo.x -=2;

The code above moves our logo bitmap across the x axis from right to left. When you preview the code above you likely will not see anything unless you create an image folder, put an image in it and point the code above to the image. When you did that you would see something like below (but with your image).

An important thing to note here is the stage.update() function being called on Line 49. This handles a lot of the tediousness attached with rendering using canvas. Remember in Day 1 animating using canvas we always had to clear the canvas before redrawing the updated art. We created specific functions for this task, and called them before we updated our art. stage.update() takes care of all of this for us, so we don’t have to worry about it.

Well, that about concludes our Day 5 animating with HTML5 tutorial. I wanted to get more in depth with EASELJS, but the next steps would be to create some sort of game which I will probably want to make a separate series for in the future.

If you read all 5 days of this tutorial series, thanks for sticking through it all. Hopefully if you are a beginner to HTML5 animation this series of tutorials helped you grasp the basics of movement in HTML5 and the different tools at your disposal.

Posted on July 12, 2012 at 12:10 pm by Runtime · Permalink
In: EASELJS, HTML5, JavaScript, Tutorial

Leave a Reply

You must be logged in to post a comment.