Posted by & filed under Games, Images, Motion Graphic, Web Design.


This tutorial for Web Designer magazine was created to show how walk cycles can be created for the HTML5 canvas element with the EaselJS library. This fast and efficient library makes it very easy to add content to the Canvas element in a similar syntax to Flash’s ActionScript.

This particular tutorial uses sprite sheets to create the animation and it is played back in time with the keyboard input from the user. Sprite sheets contain whole animations in one image and the image bounds are shifted each frame to give the illusion of animation. This is all built into the EaselJS library, making it very simple to add this kind of content.

View Project →

2 Responses to “EaselJS Walk Cycles”

  1. Luis Aguiar

    Dear Sir, Hello

    Thanks to you and your tutorials, i started to understand the canvas object, and make it usefull in my projects. And i also admire your work very much.

    But in this tutorial specifically

    im not achieving the normal results. and that is the most important of them all, because it uses the spritesheet. I already prefixed the methods and contructors with “createjs”, but im still getting errors

    would it be possible for you to supply the script you used?

    Many thanks

Leave a Reply