SimpleButton Not Displaying - actionscript-3

Question

I'm just trying to get a SimpleButton to appear on the stage in an AS3 project. For some reason, it won't appear. Can anyone see why?
Thanks in advance.
Code:
//Main class:
package
{
import flash.display.Sprite;
import view.controls.CustomButton;
import view.controls.Button;
public class ButtonTest extends Sprite
{
//private var myCustomButton:Button = new Button();
private var myCustomButton:CustomButton;
public function ButtonTest()
{
myCustomButton = new CustomButton("Hello", 0xFF0000);
addChild(myCustomButton);
}
}
}
//Custom Button Class:
package view.controls
{
import flash.display.GradientType;
import flash.display.SimpleButton;
import flash.display.Sprite;
import flash.display.Stage;
import flash.events.Event;
import flash.geom.Matrix;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
public class CustomButton extends Sprite
{
private var textColor:uint = 0x000000;
private var myColor:uint = 0xFF0000;
private var btnWidth:Number = 30;
private var btnHeight:Number = 18;
public function CustomButton(buttonText:String, gradientColor:uint)
{
var colors:Array = new Array();
var alphas:Array = new Array(1, 1);
var ratios:Array = new Array(0, 255);
var gradientMatrix:Matrix = new Matrix();
var myColor:uint = 0xFF0000;
gradientMatrix.createGradientBox(btnWidth, btnHeight, Math.PI/2, 0, 0);
//
var ellipseSize:int = 2;
var btnUpState:Sprite = new Sprite();
colors = [0xFFFFFF, myColor];
btnUpState.graphics.lineStyle(3, brightencolor(myColor, -50));
btnUpState.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, gradientMatrix);
btnUpState.graphics.drawRoundRect(0, 0, btnWidth, btnHeight, ellipseSize, ellipseSize);
btnUpState.addChild(createButtonTextField(buttonText, textColor));
//
var btnOverState:Sprite = new Sprite();
colors = [0xFFFFFF, brightencolor(myColor, 50)];
btnOverState.graphics.lineStyle(1, brightencolor(myColor, -50));
btnOverState.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, gradientMatrix);
btnOverState.graphics.drawRoundRect(0, 0, btnWidth, btnHeight, ellipseSize, ellipseSize);
btnOverState.addChild(createButtonTextField(buttonText, textColor))
//
var btnDownState:Sprite = new Sprite();
colors = [brightencolor(myColor, -15), brightencolor(myColor, 50)];
btnDownState.graphics.lineStyle(1, brightencolor(myColor, -50));
btnDownState.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, gradientMatrix);
btnDownState.graphics.drawRoundRect(0, 0, btnWidth, btnHeight, ellipseSize, ellipseSize);
btnDownState.addChild(createButtonTextField(buttonText, textColor))
//
var myButton:SimpleButton = new SimpleButton(btnUpState, btnOverState, btnDownState, btnOverState);
myButton.name = buttonText;
myButton.height = btnHeight;
myButton.width = btnWidth;
}
private function createButtonTextField(Text:String, textcolor:uint):TextField {
var myTextField:TextField = new TextField();
myTextField.textColor = textcolor;
myTextField.selectable = false;
myTextField.width = btnWidth;
myTextField.height = btnHeight;
var myTextFormat:TextFormat = new TextFormat();
myTextFormat.align = TextFormatAlign.CENTER;
myTextField.defaultTextFormat = myTextFormat;
Text = "<b>"+Text+"</b>";
myTextField.htmlText = '<font face="Arial">'+Text+'</font>';
myTextField.x = (btnWidth/2)-(myTextField.width/2);
return myTextField;
}
private function brightencolor(color:int, modifier:int):int {
var hex:Array = hexToRGB(color);
var red:int = keepInBounds(hex[0]+modifier);
var green:int = keepInBounds(hex[1]+modifier);
var blue:int = keepInBounds(hex[2]+modifier);
return RGBToHex(red, green, blue);
}
private function hexToRGB (hex:uint):Array {
var colors:Array = new Array();
colors.push(hex >> 16);
var temp:uint = hex ^ colors[0] << 16;
colors.push(temp >> 8);
colors.push(temp ^ colors[1] << 8);
return colors;
}
private function keepInBounds(number:int):int {
if (number < 0) number = 0;
if (number > 255) number = 255;
return number;
}
private function RGBToHex(uR:int, uG:int, uB:int):int {
var uColor:uint;
uColor = (uR & 255) << 16;
uColor += (uG & 255) << 8;
uColor += (uB & 255);
return uColor;
}
}
}

Answer 1

You need to add the created SimpleButton object myButton to the CustomButton's display list:
// ...
var myButton:SimpleButton = new SimpleButton(btnUpState, btnOverState, btnDownState, btnOverState);
myButton.name = buttonText;
myButton.height = btnHeight;
myButton.width = btnWidth;
addChild( myButton );
}
Although in your case, maybe you should think about making the CustomButton extend the SimpleButton instead.