Sprites and Sprite Sheet Animations - Beginning HTML5 Games with CreateJS - page 131

There appears to be a lot going on here, and it most likely looks pretty confusing if you are not familiar with
inheritance in JavaScript. This is the code generated in the coins.js file. What it is doing is simply creating three sprite
objects, along with their corresponding SpriteSheet data, and adding them to the global scope of window . The good
news is that you really don't have to understand this code to use it. You can simply create new instances of each coin
by using the instance name assigned to each movieclip in Flash. By including the coins.js in your document, these
sprite objects are instantly at your disposal without any sprite sheet setup. The following is an example of using the
pink coin:

var coin = new PinkCoin();
stage.addChild(coin);

■ depending on the version of Flash you are using, the generated code might be utilizing easelJS' now
deprecated BitmapAnimation class instead of Sprite . this name refactoring was primarily due to the confusion some
developers were having on how the class was used for single-frame sprites. the functionality is exactly the same, but
BitmapAnimation will no longer work in easelJS versions after 0.7. if this is the case for you, simply do a Replace All in
your text editor and replace BitmapAnimation with Sprite in the code generated by Flash.

Note

You can now repeatedly return to Flash to add or tweak existing animations, and re-export your sprite sheet.
Everything will remain in place in your game. Any new animation will be available, and any animation that has been
tweaked will be instantly updated. As long as you don't change the names given to each clip in Flash, you can develop
a nice workflow by using this approach. This can be extremely convenient, however, use caution when allowing flash
to create and store your sprites in the global scope of your application. Let's put these coins into a working example.
Listing 6-9 shows the Flash created sprite sheets in action.

Listing 6-9. Using the Sprite Sheet Assets Generated from Flash CC
var stage;
function init() {
stage = new createjs.Stage(document.getElementById('canvas'));
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
addCoins();
}
function addCoins() {
var coin = new YellowCoin();
var coin2 = new GreenCoin();
var coin3 = new PinkCoin();
coin.y = coin2.y = coin3.y = 100;
coin.x = 100;
coin2.x = 200;
coin3.x = 300;
stage.addChild(coin, coin2, coin3);
}