Converting a Flash Animation to an HTML5 Canvas

I recently created this Flash animation at O.C. Tanner that had a fun design by Steve Newman.

I thought I would challenge myself and see if I could convert it to HTML5 using a JavaScript library by Grant Skinner called EaselJS. Easel is appropriately named since it makes holding the canvas highly manageable. It basically simplifies writing to the HTML5 canvas; it is nearly as easy as doing it in Flash. I took all the assets I used in the Flash project and utilized placement from the Flash interface and animated the elements within the canvas with JavaScript. Some of the animation was simplified, but for the most part I think it turned out quite well. I even tested it on my iPad and it works great (minus the sound not working).

Reward Matters
View original Flash animation
View HTML5 animation

Ticker Object

The easeljs library is lightweight and easy to set up. If you are already familiar with how Flash works, the library was designed to be similar to the display objects that Flash uses. The animation is controlled using a Ticker object that is similar to an onEnterFrame in Flash. The frame rate is easily changed through a property Ticker.setFPS(24).

SpriteSheet Object

One Object I found useful is the SpriteSheet. When the SpriteSheet is used in conjuction with the BitmapAnimation Object, an animation sequence of bitmaps can be loaded on the fly (with a built-in preloader) and played at will with great control. I found it highly useful with the animation that I had already done in Flash since the page flips were already done as a bitmap sequence.

Drawing API

Drawing couldn’t get much simpler with the easel library. The Graphics object simplifies drawing simple shapes such as rectangles. For example, to create the background gradient all I needed were a couple parameters for the colors and ratio and add it to a Shape object:

grad.beginLinearGradientFill( colors , ratios , x0 , y0 , x1 , y1 ).drawRect(0, 0, 693, 341);

Adding Sound

In order to add sound an additional JS library must be included that is separate from the EaselJS library (but also written by Grant Skinner) is SoundJS. One crazy thing with sound and the different browsers is that certain browsers only accept certain types of sound files. There are three main type of acceptable sound files, MP3, WAV, and OGG Vorbis. One problem I found on my iPad is the audio will not autoplay. Apple has decided to not allow their mobile devices to autoplay any media, which really puts a damper on things. I have not found a solution for this yet other than having a button the user must click in order to play the audio; here is someone’s post on the subject. Overall, the SoundJS makes it easy to control sounds and control the events associated with it.

Documentation

The documentation for the EaselJS and SoundJS library is good and the number of examples given are helpful to getting started. Being already familiar with Flash’s infrastructure was helpful. It would be good to find some best practices with the use of the library beyond the basics that should already be practiced in programming.

Conclusion

This is my first try using the EaselJS library and am quite happy with how easy it is to use. I have looked a little at how clunky it is to write to the Canvas without it and am glad to have found this library. I often wonder why HTML5 Canvas wasn’t originally created with such a library that makes things this easy. I now don’t see myself writing to the Canvas without it. I’m sure as I get even more familiar with it, I will find my own tricks that perhaps I will share with others in the future. If you have any tips/tricks please fell free to share them with me.