9-Slice Scaling for MovieClip Backgrounds

Have you ever tried to resize the same background graphic to fit different content and found that the aspect ratio or corner angles were no longer consistent? This can be frustrating, and the workarounds in older versions of Flash — creating unique graphics for each use or manually splitting up scalable and nonscalable areas of a background or border — were time-consuming and sometimes ineffective. The good news is that Flash 8 includes a new feature designed to solve this problem. The 9-slice, or Scale 9, option helps you selectively define the scaleable area of a MovieClip to make it easier to transform and reuse.

To truly appreciate this feature you have to try it. Here's how:

1. Create a new symbol in your Flash Document (Insert ð New Symbol).

2. Enter a name for your symbol and select Movie Clip as the symbol type.

3. Select the check box in the lower-left corner to Enable guides for 9-slice scaling (shown in Figure 6-18).

   Tip 

   Expand the Symbol Properties dialog box by clicking the Advanced button if you don't see the check box for 9-slice scaling.

4. Click OK and enter the edit space for the new symbol; you'll notice a grid of dotted guidelines on the Stage. These four guides are used to split shapes into nine different regions (or slices) to control how the graphic will be interpolated at run time if the MovieClip instance is scaled.

5. Don't worry about the guides just yet. Create your artwork on the Stage with any of the shape or drawing tools.

   Note 

   The most common use for Scale 9 is to preserve the corners on rounded rectangles used as button icons. For our example, we created a rounded rectangle by setting Fill and Stroke in the Property inspector, activating the Rectangle tool in the Tools panel, and then holding down the Option (or Alt) key and clicking on the Stage to invoke the Rectangle Settings dialog box. This makes quick work of creating a button icon — simply enter a width, height, and corner radius and click OK. The rectangle will be drawn on the Stage for you.

6. Make sure your graphic is positioned in the center of the Stage — select all elements and use the center horizontal and center vertical buttons in the Align panel with the align To stage toggle turned on.

7. Once you have your graphic sized and aligned as you would like it, click and drag the guides to position them so that the curved areas of your graphic will not be distorted when the scaled instance is rendered in the .swf. This is difficult to describe with text, but Figure 6-19 shows a centered rectangle with guides positioned to protect the rounded corners of the rectangle while allowing the center area of the graphic to be stretched when the symbol instance is scaled.

8. To test the results of 9-slice scaling on your symbol, return to the Main Timeline and drag an instance of your symbol onto the Stage. Use the Transform tools or the Transform panel to change the size or aspect ratio of the symbol instance. We scaled the rounded rectangle symbol instance in our example horizontally to 125 percent.

Figure 6-18: Enable guides for 9-slice scaling is a new option in Advanced symbol properties.

Figure 6-19: You can drag the four slice guides to isolate the outside edges of a graphic that should be protected when the center area is stretched to scale.

Tip 

A symbol with 9-slice scaling enabled will display with the dotted grids in the preview pane of the Library panel. The grids are not visible when the symbol is placed on the Stage.

The final effect of 9-slice scaling is only visible in the published .swf. If you scale a symbol instance in the authoring environment, the corners of the shape will look distorted, with or without 9-slice scaling, as shown in Figure 6-20.

Figure 6-20: In the authoring environment, a symbol instance with 9-slice scaling enabled (right) will show the same distortion on the corners as a symbol instance without 9-slice scaling (left) when the instances are scaled.

Caution 

To edit the position of 9-slice guides, open the symbol in Edit mode by double-clicking the symbol in the Library list. Adjusting guides while in Edit in Place mode (invoked by double-clicking a symbol instance on the Stage) can have unpredictable results.

The difference between 9-slice scaling and normal scaling is only visible in the published .swf. When you publish or test your movie (as shown in Figure 6-21), you'll see that the symbol without 9-slice scaling (left) is distorted when it's scaled larger while the symbol with 9-slice scaling enabled (right) scales gracefully and preserves the original shape of the rounded corners.

Figure 6-21: The symbol with 9-slice scaling enabled is rendered consistently in the .swf without any distortion. The rounded corners at the original size (top-right) match the rounded corners at the scaled size (lower-right).

On the CD-ROM 

The example file shown in this section is also saved on the CD-ROM. Open 9Slice_symbolScaling.fla or .swf from the ch06 folder.

How does this magic happen? If the final symbol is scaled horizontally, the three center sections (from left to right) will stretch while the corners and the top and bottom edges are constrained. If the final symbol is scaled vertically, the three sections (from top to bottom) will stretch while the corners and the left and right edges are constrained. If the symbol is scaled in both directions, the t-shaped center section will stretch to fit, while the corners remain protected. It might take a few tries to get the hang of using 9-slice scaling, but it will save you a lot of time if you need to design consistent scalable graphics.

You can enable 9-slice scaling when you create a new symbol or you can enable it in the Symbol Properties dialog box for existing Movie Clip symbols — select the symbol in the Library list and choose Properties from the contextual menu or the panel Options menu.

Tip 

If you create a Movie Clip with artwork first and then enable 9-slice scaling by accessing the Symbol Properties dialog box from the Library, the slice guides will automatically be aligned to the outside edges of your artwork. You may still need to adjust the guides to get the exact result that you want, but the starting point will be much closer than it will be if you enable the 9-slice scaling guides before you create the artwork.