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

Listing 8-11. SimpleButton Shortcut Method to Update Multiple Properties
p.setButton = function(obj){
this.set(obj);
this.buttonColor = obj.upColor != undefined ? obj.upColor :
this.buttonColor;
this.drawButton();
}
The set method is contained in Container , so you have access to it. The set method updates all properties on
SimpleButton that were included in the object passed into it. One thing to notice is that whenever upColor is set,
the buttonColor needs to be immediately set to match it, since that is the property used to draw the button.
Finally, the button is redrawn. The following is an example of how to change multiple attributes on buttons using
only one line of code:
btn.setButton({color:'white', fontSize:50, upColor:'green',
overColor:'#ff69b4'});
Now that you've gotten a good look at how to build reusable components, let's revisit the preloader idea that you
used in Chapter 2. This time, you'll also utilize Container and inheritance to make it reusable in your games.
Creating a Preloader
You created a prototype of this component when you were learning how to draw graphics in Chapter 2. That prototype
was meant to give you an idea of how you can use vector graphics to create dynamic components for visual feedback.
It's time to extend on that a bit, and create it as a custom class.
This component is actually quite a bit easier than the SimpleButton class. By now, the extending process should
be familiar. Take a look at the complete class Preloader , shown in Listing 8-12.
Listing 8-12. Preloader.js, The Complete Preloader Class
(function () {
window.ui = window.ui || {};
var Preloader = function (fill, stroke) {
this.fillColor = fill;
this.strokeColor = stroke;
this.initialize();
}
var p = Preloader.prototype = new createjs.Container();
p.width = 400;
p.height = 40;
p.fillColor;
p.strokeColor;
p.bar;
p.Container_initialize = p.initialize;