Flash glossary: 9-slice scaling

The idea behind 9-slice scaling is to make it easy to specify how to scale specific areas of a movie clip. With 9-slice scaling, you can ensure that the movie clip does not become distorted when scaled. Compare that with normal scaling, where Adobe Flash Professional scales all parts of a movie clip equally, in both the horizontal and vertical dimensions. For many movie clips, this equal scaling can make the clip's graphics look strange, especially at the corners and edges of rectangular movie clips. This is often true of movie clips used as user interface elements, such as buttons.

The movie clip is visually divided into nine sections with a grid-like overlay, and each of the nine areas is scaled independently. To maintain the visual integrity of the movie clip, corners are not scaled, while the remaining areas of the image are scaled (as opposed to being stretched) larger or smaller, as needed.

When a movie clip symbol has 9-slice scaling applied, it appears in the Library panel preview window with the guides displayed. If Enable Live Preview is turned on (Control > Enable Live Preview) when you scale instances of the movie clip on the Stage, you will see the 9-slice scaling applied on the Stage.

Note: You cannot apply 9-slice scaling to Graphic or Button symbols. Bitmaps inside 9-slice enabled movie clips are scaled normally, without 9-slice distortion, while the other movie clip contents are scaled according to the 9-slice guides.

A 9-slice-enabled movie clip can contain nested objects within it, but only certain types of objects inside the movie clip properly scale in the 9-slice manner. To make a movie clip with internal objects that also adhere to 9-slice scaling when the movie clip is scaled, the nested objects must be shapes, drawing objects, groups, or graphic symbols.

To enable 9-slice scaling for symbols in Flash, select an instance on the Stage and press F8 (or choose Modify > Convert to Symbol). Expand the Advanced settings in the Convert to Symbol dialog box and click the check box next to the Enable for 9-slice Scaling Guides option.

To apply 9-slice guides to a symbol, use Adobe Fireworks or Adobe Illustrator to create a symbol and then follow these steps:

1. Double-click the symbol or button to enter symbol-editing mode.
2. In the Properties panel, select Enable for 9-slice Scaling Guides.
3. Move the guides and place them appropriately on the button or symbol. Make sure that the parts of the symbol that you don't want to be distorted when scaling (such as the corners) are outside the guides.
4. (Optional) Lock the guides: In the Properties panel, select the Lock option for 9-slice scaling guides.
5. Return to the containing page by clicking the page icon at the top of the document panel.
6. Resize the symbol as needed by using the Scale tool as desired.
7. Import the symbol into Flash. The 9-slice scaling will still be enabled when you transform the symbol in Flash using the Free Transform tool.

To learn more about working with 9-slice scaling, read the section titled Scaling and caching symbols in the Flash documentation, as well as the article titled Improved 9-slice scaling in Fireworks.