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.