Extending EaselJS Display Objects - Beginning HTML5 Games with CreateJS - page 187

p.initialize = function () {
this.Container_initialize();
this.drawPreloader();
}
p.drawPreloader = function () {
var outline = new createjs.Shape();
outline.graphics.beginStroke(this.strokeColor);
outline.graphics.drawRect(0, 0, this.width, this.height);
this.bar = new createjs.Shape();
this.bar.graphics.beginFill(this.fillColor);
this.bar.graphics.drawRect(0, 0, this.width, this.height);
this.bar.scaleX = 0;
this.addChild(this.bar, outline);
}
p.update = function (perc) {
perc = perc > 1 ? 1 : perc;
this.bar.scaleX = perc;
}
window.ui.Preloader = Preloader;
}());
Some values are sent into the constructor for coloring the stroke and bar for the loader. The graphics are then
drawn in the drawPreloader function. We've come a long way since the preloader prototype, so a few things are
built differently. Shapes are still used to draw the graphics, but the stroke and fill are now separate objects, so simply
changing the x scale of the fill shape will work nicer than redrawing everything on each update. The update function
takes a percentage and updates the bar. You'll be using this in conjunction with PreloadJS, so you will typically be
pushing in values received from the PreloadJS events to update the preloader.
This class is finished and ready to use in your next project. Listing 8-13 shows a static example of how you can use
it in your application.
Listing 8-13. Example of Preloader Class in Use
var stage, preloader;
// onload
function init() {
stage = new createjs.Stage(document.getElementById('canvas'));
createjs.Ticker.addEventListener("tick", stage);
addPreloader();
}
function addPreloader() {
preloader = ui.new Preloader('#34FABC', '#000');
preloader.x = (stage.canvas.width / 2) - (preloader.width / 2);
preloader.y = (stage.canvas.height / 2) - (preloader.height / 2);
stage.addChild(preloader);
preloader.update(.6);
}