Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Animation, Filters, and Drawings > Understanding scaling and slice guides

Understanding scaling and slice guides

You can use 9-slice scaling (Scale-9) to specify component-style scaling for movie clips. 9-slice scaling lets you create movie clip symbols that scale appropriately for use as user interface components, as opposed to the type of scaling typically applied to graphics and design elements.

Understanding how 9-slice scaling works

The easiest way to explain how 9-slice scaling works is to look at an example of how 9-slice scaling works in Flash.

To understand scaling in Flash:

1. Create a new Flash document and save it as dynmask.fla.
2. Drag a copy of the Button component to the Stage from the Components panel (Window > Components).
3. Increase the Stage's zoom level to 400% by using the Zoom tool.

   
   
   

   By default, the Button component instance is 100 pixels wide by 22 pixels high.

4. Resize the Button component instance to 200 pixels width by 44 pixels high by using the Property inspector.

   
   
   

   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 Adobe 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).

   
   
   

   TIP

   Strokes are created from the edges after the 9-slice scaling transformation, and therefore don't deform or lose detail.

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 later 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.

Flash CS3