Why does obj.getBounds().height give a larger height than obj.height?

Question

I'm new to Flash and ActionScript, but managing quite nicely. One thing that is continuously getting in my way are the width and height properties of DisplayObject(Container)s. I'm finally starting to get my head around them and learned that the width and height of a Sprite are determined solely by their contents for example.

I do not understand the following though: I've got a Sprite that I add a bunch of Buttons to. The buttons all have a height of 30 and an y of 0. As such, I'd expect the height of the containing Sprite to be 30. Surprisingly, the height is 100.

The Adobe documentation of the height property of a DisplayObject states:

Indicates the height of the display object, in pixels. The height is calculated based on the bounds of the content of the display object.

Apparently, the 'bounds' of the object are important. So I went ahead and wrote this little test in the Sprite that contains the Buttons:

for (var i:int = 0; i < numChildren; ++i)
{
    trace("Y: " + getChildAt(i).y + " H: " + getChildAt(i).height);
    trace("BOUNDS H: " + getChildAt(i).getBounds(this).height);
}
trace("SCALEY: " + scaleY + " TOTAL HEIGHT: " + height);

This code iterates through all the objects that are added to its display list and shows their y, height and getBounds().height values. Surprisingly, the output is:

Y: 0 H: 30
BOUNDS H: 100
... (5x) 
SCALEY: 1 TOTAL HEIGHT: 100

This shows that the bounds of the buttons are actually larger than their height (and the height that they appear to be, visually). I have no clue why this is the case however. So my questions are:

• Why are the bounds of my buttons larger than their height?
• How can I set the bounds of my buttons so that my Sprite isn't larger than I'd expect it to be based on the position and size of the objects it contains?

By the way, the buttons are created as follows:

var control:Button = new Button();
control.setSize(90, 30);
addChild(control);

Answer 1

From Adobe :

Returns a rectangle that defines the area of the display object relative to the coordinate system of the targetCoordinateSpace object. Consider the following code, which shows how the rectangle returned can vary depending on the targetCoordinateSpace parameter that you pass to the method:

 var container:Sprite = new Sprite();
 container.x = 100;
 container.y = 100;
 this.addChild(container);
 var contents:Shape = new Shape();
 contents.graphics.drawCircle(0,0,100);
 container.addChild(contents);
 trace(contents.getBounds(container));
  // (x=-100, y=-100, w=200, h=200)
 trace(contents.getBounds(this));
  // (x=0, y=0, w=200, h=200)

Note: Use the localToGlobal() and globalToLocal() methods to convert the display object's local coordinates to display coordinates, or display coordinates to local coordinates, respectively.

The getBounds() method is similar to the getRect() method; however, the Rectangle returned by the getBounds() method includes any strokes on shapes, whereas the Rectangle returned by the getRect() method does not. For an example, see the description of the getRect() method.

---

From what I understand getbounds of a button is set to 100 as a default. Try increasing the height beyond 100 & still getbounds will return 100. My guess is that is some sort of default value set for every control particularly.

Also if you wish to get the height why not instead of:

getChildAt(i).getBounds(this).height

Use :

getChildAt(i).height

Answer 2

You seem to be tracing the scale for the container object, but you should be more interested in the getChildAt(i).scaleY property (i.e. the scaling of the Button), which is probably 30/100 (0.3).

If the Button itself is not scaled (which is unlikely), then it could be something going on with the Button class's overriding of the scale and height properties to return values different from what its parent class's implementation would return.