Getting to Know CreateJS - Beginning HTML5 Games with CreateJS - page 11

Plugins
Plugins are optional additions to help us deal with known audio problems in today's browsers. There are currently
three official plugins available: HTMLAudio plugin, WebAudio plugin, and Flash plugin. You'll be learning what these
plugins are and how you can use them throughout the topic, but let's take a quick look at the Flash plugin.
When the Flash plugin is registered, it will embed the provided FlashAudioPlugin.swf into your HTML
document and will act as a fallback when HTML5 audio is not supported. This is a common practice with many
desktop HTML5 games and is often used as the primary source of audio. This ensures that the user has the best audio
experience possible when in a browser where Flash is supported.
Here is an example of how to register the Flash plugin:

createjs.FlashPlugin.BASE_PATH = '../plugins';
createjs.Sound.registerPlugins([createjs.FlashPlugin]);

The base path is first assigned and dictates where your swf file is located. Next, you call the registerPlugins
method, which accepts an array of available plugins. In this example, you are only registering one, but you can register
as many plugins that you have available by adding to the array.

■ the easing methods you used in the “tweenJS” section are examples of utilizing plugins within CreateJS.
Ease itself is also referred to as a plugin, although it does not need to be registered.

Note

You'll be playing a lot more with SoundJS in your final game, and a bit more in the next section. There's only one
more tool to discuss and you'll see how you can use it to wrap everything up into a complete, working example.

PreloadJS
As you probably guessed, PreloadJS is a tool for preloading all of your assets in your game or application. PreloadJS
is by no means exclusively tied to the rest of the suite and can be used in any HTML environment where you need
to preload the files used in your project. The implementation of PreloadJS is fairly straightforward so it doesn't take
much to learn. You can easily wait for loading assets and listen to their progress with minimal amounts of code.
PreloadJS is centered around the LoadQueue class, which manages file loading and events. Take a look at the
following example shown in Listing 1-4 and then we'll discuss what's going on.

Listing 1-4. Using LoadQueue Class to Preload Assets

var queue = new createjs.LoadQueue();
queue.installPlugin(createjs.Sound);
queue.addEventListener("complete", onComplete);
queue.loadManifest([
{id: "butterfly", src:"/img/butterfly.png"},
{id: "poof", src:"/snd/poof.mp3"}
]);
function onComplete () {
alert('all files loaded');
}