AS3 draws bigger Sprite than i have set (padding/margin ?)

Question

i created my own Button which simply extends from Sprite. Its able to show 3 different text fading in and out using a timer. In my draw function i first draw a rectangle with the Sprites graphics object representing the background of the button.

I added a function to set the button width. This property is used to draw the rectangle. I know that the sprites's size is updated after the rectangle drawing. But for some reason the sprite's width is always more than what i have set via my "setButtonWidth" function.

Now i have a simple sprite acting as a button having a graphics.drawRectangle part drawing a simple rect. with lets say 500px width. But when i trace the width of that button it is always about 10% more. Where are these 10% coming from?

I read about calling validateNow(). But this is only for Labels, or Checkboxes. For some reason i cannot access the library for Label. This must work somehow with TextFields. But how?

// this function is part of MyButtonClass.as file
function drawButton()
{
  this.graphics.clear();
  this.graphics.beginFill( currentBackColor);
  this.graphics.drawRoundRect(0, 0, int(this.buttonWidth)+20, 30, 10, 10);
  this.graphics.endFill();
}

// this code is in main action code frame
// the buttonWidth is set this way
stage.addEventListener( Event.RESIZE, updateBtn);
function updateBtn( event:Event)
{
  // access the container in which the buttons are in like ...
  for( var i = 0; i < buttonContainer.numChildren; i++) {
    var btn = buttonContainer.getChildAt( i) as MyButtonClass;
    // MyButtonClass is the class which extends from Sprite drawing my button
    // and using buttonWidth to draw the backgrounds width.
    btn.setButtonWidth( (stage.stageWidth / 2) - 20);
    // i set half of stageWidth because i have two columns with a list of buttons
    // after setButtonWidth is called in MyButtonClass, the draw function is called
    // which does the graphics stuff above.
  }
}

this.buttonWidth is set to 500. There is nothing special done on that sprite. No children to be added, only this drawing stuff. But this sets the sprite's width to 550 or something.

Are you certain that the button width is actually 500px wide and you're not missing the width of the border / text fields / low alpha content? — Marty
care to show how this.buttonWidth is set? All this code whos is that the width is calculated from a variable called buttonWidth + 20 pixels, I doubt that this is causing the issues you're having. — Daniel
how is buttonWidth set ? what is the type of buttonWidth and what is the use of typecasting using int ? — Diode
please check my updated text above with more code to understand. — NovumCoder
i cast buttonWidth to int because the setButtonWidth function can get a decimal number like 300.45, so i need to cast it to int to get 300. — NovumCoder

Diode Diode · Accepted Answer · 2012-03-30T07:04:09

Define Button like this

package {

    import flash.display.Sprite;

    public class Button extends Sprite {

        private var _buttonWith: int = 0;
        private var _buttonHeight: int = 0;

        public function Button() {
            // constructor code
        }

        public function set buttonWidth(w: int): void {
            _buttonWith = w;
            updateButton();
        }

        public function get buttonWidth(): int {
            return _buttonWith;
        }

        public function set buttonHeight(h: int): void {
            _buttonHeight = h;
            updateButton();
        }

        public function get buttonHeight(): int {
            return _buttonHeight;
        }

        protected function updateButton() {
            graphics.clear();
            graphics.beginFill(0xff00ff);
            graphics.drawRoundRect(0, 0, buttonWidth, buttonHeight, 10, 10);
            graphics.endFill();
        }
    }
}

And create instance like this

var button:Button = new Button();
addChild(button);

button.buttonWidth = 100;
button.buttonHeight  = 30;

AS3 draws bigger Sprite than i have set (padding/margin ?)

1 Answers