Making and Animating Graphics - Beginning HTML5 Games with CreateJS - page 28

loaderBar.graphics.drawRect(0, 0, LOADER_WIDTH, 40);
stage.addChild(loaderBar);
}
The setupStage function does your typical stage setup. The stage variable is set for global reference, and the
Ticker is set to fire 60 times per second, which will update the stage on every tick. The next function, buildLoaderBar ,
draws an empty loader bar to the stage, which is now just a black stroke with no fill. These graphics will be cleared and
redrawn each time you have a progress update. This is done in the updateLoaderBar function, shown in Listing 2-10.
Listing 2-10. Rotating a Square 360 Degrees Using Tween
function updateLoaderBar() {
loaderBar.graphics.clear();
loaderBar.graphics.beginFill('#00ff00');
loaderBar.graphics.drawRect(0, 0, LOADER_WIDTH * percentLoaded, 40);
loaderBar.graphics.endFill();
loaderBar.graphics.setStrokeStyle(2);
loaderBar.graphics.beginStroke("#000");
loaderBar.graphics.drawRect(0, 0, LOADER_WIDTH, 40);
loaderBar.graphics.endStroke();
}
The first thing that is done in this function is the clearing of all existing graphics. Next, you start with creating the
loader fill by using the current percentLoaded value. This percentage is multiplied against the predetermined width of
the preloader. You create the stroke afterwards so it sits nicely on top of the fill.
In this prototype, you are manually updating the load percentage in an interval, which is set up in the final
function called in the init function startLoad . This interval will repeatedly update your percentage in the function
updateLoad . Both functions are shown in Listing 2-11.
Listing 2-11. An Interval is Created to Update the Percentange for the Preloader Graphics
function startLoad() {
loadInterval = setInterval(updateLoad, 50);
}
function updateLoad() {
percentLoaded += .005;
updateLoaderBar();
if (percentLoaded >= 1) {
clearInterval(loadInterval);
stage.removeChild(loaderBar);
}
}
</script>
The interval function updateLoad simply updates the percentage by .005 and calls on the updateLoaderBar
function to update the graphics. If you've reached the end of the load, you clear the interval and remove the graphics
from the stage. Finally, you close your script block. The final result, shown in Figure 2-9 , demonstrates the load
progress at about 60 percent.