MACROMEDIA FLASH 8-LEARNING ACTIONSCRIPT 2.0 IN FLASH, Manual

Page: 557 / 830

Understanding scaling and slice guides 557
You can see that even though the component resized, the Button’s border and text label do
not distort. The button’s label remained centered and maintained its font size. Although
components of version 2 of the Macromedia Component Architecture do not use 9-slice
scaling, components handle scaling in the version 2 component architecture so the
outlines do not change size (as shown in the next figure).
Imagine that the button instance is sliced into 9 separate pieces, or a 3 by 3 grid, similar to
a keypad on a telephone or keyboard. When you resize the button instance horizontally,
only the three vertical segments in the center (numbers 2, 5, and 8 on a keypad) stretch so
your content doesn’t appear distorted. If you resized the button instance vertically, only
the three horizontal segments in the center (numbers 4, 5, and 6 on a keypad) would
resize. The four corners of the scaling grid are not scaled at all, which allows the
component to grow without looking like it is being stretched (see the following images).
You can enable slice guides for 9-slice scaling in the Flash environment within the Convert to
Symbol dialog box or the Symbol Properties dialog box. The Enable guides for 9-slice scaling
check box is available only if you are publishing for Flash Player 8 and the behavior is set to
movie clip. The 9-slice scaling guides are not available for earlier versions of Flash or if you are
creating a button or graphic symbol. 9-slice scaling can be enabled in ActionScript by setting
the
scale9Grid
property on a movie clip instance.
Whether you created your slice guides by using the user interface or by using ActionScript,
you can trace the
x
coordinate, y coordinate, width, and height by tracing the movie clip’s
scale9Grid
property.
trace(my_mc.scale9Grid); // (x=20, y=20, w=120, h=120)
This snippet of code traces the value of the Rectangle object being used by the
scale9Grid
property. The rectangle has a x and y coordinates of 20 pixels, a width of 120 pixels and a
height of 120 pixels.
TIP
Strokes are created from the edges after the 9-slice scaling transformation, and
therefore don't deform or lose detail.