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 Continue reading…