topical media & game development
mobile-graphic-easel-tutorials-Inheritance-Button.js / js
(function() {
var Button = function(label, color) {
this.initialize(label, color);
}
var p = Button.prototype = new createjs.Container(); // inherit from Container
p.label;
p.background;
p.count = 0;
p.Container_initialize = p.initialize;
p.initialize = function(label, color) {
this.Container_initialize();
this.label = label;
if (!color) { color = "#CCC"; }
var text = new createjs.Text(label, "20px Arial", "#000");
text.textBaseline = "top";
text.textAlign = "center";
var width = text.getMeasuredWidth()+30;
var height = text.getMeasuredHeight()+20;
this.background = new createjs.Shape();
this.background.graphics.beginFill(color).drawRoundRect(0,0,width,height,10);
text.x = width/2;
text.y = 10;
this.addChild(this.background,text);
this.addEventListener("click", this.handleClick);
this.addEventListener("tick", this.handleTick);
}
p.handleClick = function (event) {
var target = event.target;
alert("You clicked on a button: "+target.label);
}
p.handleTick = function(event) {
p.alpha = Math.cos(p.count++*0.1)*0.4+0.6;
}
window.Button = Button;
}());
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.