Take the 2-minute tour ×

Event if the container is scaled, both itself and its children not change width value, so how can they change their width?

            private function scaleOutContainer():void {
                outerContainer.scaleX = slider.value;
                trace("outerContainer.width: " + outerContainer.width);
                trace("outerContainer.scaleX: " + outerContainer.scaleX);
                trace("image width: " + fotoImig.width);
                trace("image scaleX: " + fotoImig.scaleX);
                var containerBound:Rectangle = outerContainer.getBounds(this);
        <s:Group id="outerContainer" left="50" top="80" width="500">
            <s:BitmapImage id="fotoImig" source="@Embed('assets/foto.jpg')"/>
            <s:Label id="info" text="Test Scale"/>
        <s:HGroup left="50" top="50">
            <s:Label text="scale outContainer"/><s:HSlider id="slider" snapInterval="0.1" value="1" change="scaleOutContainer()"/>
share|improve this question
I tested your code, it works fine for me, the container and the image inside both got scaled. –  Barış Uşaklı Nov 8 '12 at 14:26
DisplayObjects .width and .height properties DO reflect the current scale modifier. So if you have a display object that is 50 pixels width, then set it's scaleX to 4, it's width will now report 200. What's likely happening in your situation, is you're using a component that is overriding the default get .width behaviour. I'm not really a flex user, so I don't have any experience with the layout controls like your example to confirm this. –  LDMediaServices Nov 8 '12 at 17:18
Children widths/heights will never reflect the scale properties of their parents –  LDMediaServices Nov 8 '12 at 17:23
You can also try using the .getBounds() property –  LDMediaServices Nov 8 '12 at 18:18
@LondonDrugs_MediaServices, the geBounds() will change when scale, but the width, measuredWidth, explicitWidth will NOT change –  jason Nov 15 '12 at 3:48
show 1 more comment

2 Answers

scaleX and scaleY do not affect the actual size of the object in any way. The scale properties simply modify how they are displayed on screen. To the application, that 50x50 box is still 50x50, even if it looks like it is 200x200 on screen with scaleX = scaleY = 4.

Scaling is done this way so that the original size is never lost. This way you can freely scale an object repeatedly with it always being relative to the original size.

I'm unsure how the scale properties actually work. If you actually dig through some of the properties of a DisplayObject there are multiple width values (width, measuredWidth, explicitWidth, plus percentWidth in UIComponent). My guess (purely a guess, unfortunately) is that one of those values is changed while the width/height values stay the same.

If you need the width/height value of a scaled object, you can just multiply the width/height values by their respective scale properties.

share|improve this answer
the DisplayObject only has width and height, it doesn't have measuredWidth and explicitWidth –  jason Nov 15 '12 at 3:39
@jason Then that is my mistake. Those are apparently inherited from UIComponent, not DisplayObject. Regardless, what I said still remains true. It's just that my initial guess as to why it works the way it does was wrong. –  Josh Janusch Nov 15 '12 at 16:05
@Apocalyptic0n3 - The base DisplayObject width/height properties do reflect the current scaleX/Y. Many UI components though override that behavior on the get height/width properties. –  LDMediaServices Nov 15 '12 at 17:06
@LondonDrugs_MediaServices, Thanks for your help. Your point is right. –  jason Nov 25 '12 at 7:02
add comment

Each DisplayObject has transform matrix only (available at object.transform.matrix). Values, such as x, y, scaleX, scaleY, rotation, width, height ... are just setter / getter functions, that work with matrix.

E.g. scaleX getter is Math.sqrt(m[0]*m[0] + m[1]*m[1] + m[2]*m[2]); which corresponds to diagonal of box having the size defined by first row of transform matrix.

width getter is o.getBounds(o.parent).width

height getter is o.getBounds(o.parent).height

But I still don't understand, how width and height setters work. E.g.

var rect = new Sprite();
rect.rotation = 20;
trace(rect.width);  // 128.15
rect.width = 80;
trace(rect.width);  // 92.85
rect.width = 80;
trace(rect.width);  // 89.4
share|improve this answer
add comment

Your Answer


