ow many times have you scaled a movie clip that started out looking like Figure 1 ...and ended up looking like Figure 2?

It's quite common to see your carefully created movie clips distort before your very eyes, losing all corner definition, thinning and thickening their strokes, and generally making messes of themselves.

How many times have you wished that your beautiful rounded-corner movie clips would scale like components, without distorting the corners or the thickness of the lines? Wouldn't you rather your scaled movie clip look like Figure 3?

Well, now it can, thanks to Flash 8's scale9grid movie clip property.

Figure 1. Before: This is the original movie clip prior to scaling.

Figure 2. After: This is the same movie clip after scaling.

This feature works on a fairly simple principle, one that should even be quite familiar to many Web designers. The idea is to divide the movie clip into 9-slices, effectively creating a 3 x 3 grid, as seen in Figure 4.

The center of the grid will scale normally. The top, center and bottom, center cells of the grid will only scale horizontally, and the left, center and right, center sides of the grid will only scale vertically. The four corners of the grid will not scale at all, thus maintaining a crisp and clean appearance.

Figure 3. Cornered: This is the same movie clip as in Figure 2 after scaling with 9-slice scaling.

Figure 4. Diced: This is the same movie clip as in Figure 1 with 9-slice scaling enabled.

Enabling 9-slice Scaling via the Flash Interface
Although you have more freedom to change your mind on the fly when using ActionScript, taking advantage of 9-slice scaling does not require code. When creating a symbol, you will see the typical Create New Symbol or Convert to Symbol dialogs. If your dialog is minimized, click on the Advanced button. You will then see Linkage options, as well as a Source section when working with imported assets. The same features can be seen in the Symbol Properties dialog (seen in Figure 5), which is accessible via the Library.

Down at the bottom of this enlarged dialog is a checkbox labeled "Enable guides for 9-slice scaling." When enabled, a default set of grid guides will be positioned 25 percent of the clip width from the left and right edges, and 25 percent of the clip height from the top and bottom edges. This grid can be seen in the Library preview, illustrated in Figure 6.

Figure 5. Sans Script: You can enable 9-slice scaling, without any ActionScript, through the Symbol Properties dialog.

Figure 6. Grid Guides: When enabled, the grid guides for movie clips that have 9-slice scaling can be seen in the Library preview.

Although the grid cannot be seen when editing a movie clip in place on the stage, each time you edit the symbol via the Library or Symbol Menu, the gridlines can be manually adjusted by dragging each with the mouse. Thereafter, scaling will honor this grid and preserve the appearance of the movie clip as you originally intended it to look. The first source file that accompanies this article, "scale9grid_01.fla," uses this technique to enable 9-slice scaling for the sole movie clip in the file.