Manipulating size and scaling objects

You can measure and manipulate the size of a display object in two ways, using either the dimension properties (width and height) or the scale properties (scaleX and scaleY).

Every display object has a width property and a height property, which are initially set to the size of the object in pixels. You can read the values of those properties to measure the size of the display object. You can also specify new values to change the size of the object, as follows:

// Resize a display object. 
square.width = 420; 
square.height = 420; 
// Determine the radius of a circle display object. 
var radius:Number = circle.width / 2;

Changing the height or width of a display object causes the object to scale, meaning its contents stretch or squeeze to fit in the new area. If the display object contains only vector shapes, those shapes will be redrawn at the new scale, with no loss in quality. Any bitmap graphic elements in the display object will be scaled rather than redrawn. So, for example, a digital photo whose width and height are increased beyond the actual dimensions of the pixel information in the image will be pixelated, making it look jagged.

When you change the width or height properties of a display object, Flash Player and AIR update the scaleX and scaleY properties of the object as well.

Note: TextField objects are an exception to this scaling behavior. Text fields need to resize themselves to accommodate text wrapping and font sizes, so they reset their scaleX or scaleY values to 1 after resizing. However, if you adjust the scaleX or scaleY values of a TextField object, the width and height values change to accommodate the scaling values you provide.

These properties represent the relative size of the display object compared to its original size. The scaleX and scaleY properties use fraction (decimal) values to represent percentage. For example, if a display object’s width has been changed so that it’s half as wide as its original size, the object’s scaleX property will have the value .5, meaning 50 percent. If its height has been doubled, its scaleY property will have the value 2, meaning 200 percent.

// circle is a display object whose width and height are 150 pixels. 
// At original size, scaleX and scaleY are 1 (100%). 
trace(circle.scaleX); // output: 1 
trace(circle.scaleY); // output: 1 
// When you change the width and height properties,  
// Flash Player changes the scaleX and scaleY properties accordingly. 
circle.width = 100; 
circle.height = 75; 
trace(circle.scaleX); // output: 0.6622516556291391 
trace(circle.scaleY); // output: 0.4966887417218543

Size changes are not proportional. In other words, if you change the height of a square but not its width, its proportions will no longer be the same, and it will be a rectangle instead of a square. If you want to make relative changes to the size of a display object, you can set the values of the scaleX and scaleY properties to resize the object, as an alternative to setting the width or height properties. For example, this code changes the width of the display object named square, and then alters the vertical scale (scaleY) to match the horizontal scale, so that the size of the square stays proportional.

// Change the width directly. 
square.width = 150; 
// Change the vertical scale to match the horizontal scale,  
// to keep the size proportional. 
square.scaleY = square.scaleX;

Controlling distortion when scaling

Normally when a display object is scaled (for example, stretched horizontally), the resulting distortion is spread equally across the object, so that each part is stretched the same amount. For graphics and design elements, this is probably what you want. However, sometimes it’s preferable to have control over which portions of the display object stretch and which portions remain unchanged. One common example of this is a button that’s a rectangle with rounded corners. With normal scaling, the corners of the button will stretch, making the corner radius change as the button resizes.

<Scaling distortion on a button with rounded corners>

However, in this case it would be preferable to have control over the scaling—to be able to designate certain areas which should scale (the straight sides and middle) and areas which shouldn’t (the corners)—so that scaling happens without visible distortion.

<Button scaled without distortion>

You can use 9-slice scaling (Scale-9) to create display objects where you have control over how the objects scale. With 9-slice scaling, the display object is divided into nine separate rectangles (a 3 by 3 grid, like the grid of a tic-tac-toe board). The rectangles aren’t necessarily the same size—you designate where the grid lines are placed. Any content that lies in the four corner rectangles (such as the rounded corners of a button) will not be stretched or compressed when the display object scales. The top-center and bottom-center rectangles will scale horizontally but not vertically, while the left-middle and right-middle rectangles will scale vertically but not horizontally. The center rectangle will scale both horizontally and vertically.

<9-slice scaling grid>

Keeping this in mind, if you’re creating a display object and you want certain content to never scale, you just have to make sure that the dividing lines of the 9-slice scaling grid are placed so that the content ends up in one of the corner rectangles.

In ActionScript, setting a value for the scale9Grid property of a display object turns on 9-slice scaling for the object and defines the size of the rectangles in the object’s Scale-9 grid. You use an instance of the Rectangle class as the value for the scale9Grid property, as follows:

myButton.scale9Grid = new Rectangle(32, 27, 71, 64);

The four parameters of the Rectangle constructor are the x coordinate, y coordinate, width, and height. In this example, the rectangle’s top-left corner is placed at the point x: 32, y: 27 on the display object named myButton. The rectangle is 71 pixels wide and 64 pixels tall (so its right edge is at the x coordinate 103 on the display object and its bottom edge is at the y coordinate 92 on the display object).

<Core rectangle of the Scale-9 grid>

The actual area contained in the region defined by the Rectangle instance represents the center rectangle of the Scale-9 grid. The other rectangles are calculated by Flash Player and AIR by extending the sides of the Rectangle instance, as shown here:

<Complete Scale-9 grid derived from core rectangle>

In this case, as the button scales up or down, the rounded corners will not stretch or compress, but the other areas will adjust to accommodate the scaling.

<Effects of 9-slice scaling as button scales in both directions>
myButton.width = 131;myButton.height = 106;

myButton.width = 73;myButton.height = 69;

myButton.width = 54;myButton.height = 141;