I recently created this Flash animation at O.C. Tanner that had a fun design by Steve Newman.
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
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 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);
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.
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.
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.