Question

I’m trying to create a custom button with ActionScript 3.0. I’m suing a round rect as background, but I have a problem with it size.

This is my custom button class:

package
{
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.display.Shape;

    public class customButton extends Sprite
    {
        private var background:Shape;
        public var bgColor:uint;
        public var borderColor:uint;
        public var borderSize:uint;
        public var cornerRadius:uint;
        private var label:TextField;

        public function customButton(text:String)
        {
            super();

            this.opaqueBackground = 0xFF0000;

            background = new Shape();
            borderSize = 1;
            borderColor = 0x666666;
            bgColor = 0xFFCC00;
            cornerRadius = 9;

            label = new TextField();
            label.text = text;

            var format:TextFormat = new TextFormat();
            format.font = "Verdana";
            format.color = 0;
            format.size = 38;
            format.underline = true;

            label.defaultTextFormat = format;

            addChild(background);
            addChild(label);

            buttonMode = true;
            mouseChildren = false;
        }

        public function draw():void
        {
            background.graphics.lineStyle(borderSize, borderColor);
            background.graphics.beginFill(bgColor);
            background.graphics.drawRoundRect(0, 0, this.width, this.height cornerRadius);
            background.graphics.endFill();
        }
    }
}

And this is the code used to show the button:

    public function Test01()
    {
        super();

        // support autoOrients
        stage.align = StageAlign.TOP_LEFT;
        stage.scaleMode = StageScaleMode.NO_SCALE;

        button = new customButton("Button");
        button.x = 200;
        button.y = 300;
        button.width = 200;
        button.height = 100;
        button.draw();

        addChild(button);
    }

If I set this size to the button:

button.width = 200;
button.height = 100;

I get the following:

But I set it to button size:

button.width = 40;
button.height = 20;

(This size is the same used in customButton class). I get:

I don’t know why when I use a size of (40, 20) I get a smaller rectangle than that size.

Any advice?

Answer 1

it is happening because you are setting the width directly to the Sprite, it changes the size of the sprite no the size of the background you are drawing.

in your customButton class add some code:

private var _width:Number = 10;
private var _height:Number = 10;

override public function get width():Number { return _width; }      
override public function set width(value:Number):void 
{
    _width = value;
    draw ();
}

override public function get height():Number { return _height; }        
override public function set height(value:Number):void 
{
    _height = value;
    draw ();
}

private function draw():void
{
    background.graphics.clear ()
    background.graphics.lineStyle(borderSize, borderColor);
    background.graphics.beginFill(bgColor);
    background.graphics.drawRoundRect(0, 0, _width, _height, cornerRadius);
    background.graphics.endFill();
}

with this code you will be able to chnage the background size everytime, and you will not be affecting the other components.