Using-9 Slice Scaling to Preserve a Shape

In this tutorial you'll learn how to preserve the corner radiuses of a rectangle by converting the rectangle to a movie clip and enabling 9-slice scaling.

Traditionally when a movie clip instance containing a vector shape is scaled up or down in Flash, it is scaled both horizontally and vertically. Sometimes scaling geometric shapes, such as rectangles with curved corners, can yield some pretty ugly results. You can avoid an ugly mess by using Flash CS3€™s 9-slice scaling allows you to specify the areas of a movie clip to scale.

Step 1. Draw a rectangle

Select the Rectangle Primitive tool from the Tool panel. Draw a rectangle on the Stage while pressing the Up Arrow. Release the mouse button when you are satisfied with the size of your rectangle. The rectangle€™s corners will be inverted. If you prefer to draw a rectangle with rounded corners, press the Down Arrow while clicking-and-dragging. You can also switch between pressing the down and up arrow as you draw to modify the corner radiuses.

To change the corner radius after releasing the mouse, switch to the Selection tool (V). Select the rectangle and change the corner radius in the Properties Inspector.

Tip: When you use the Rectangle Primitive tool to draw a shape, you can select it again and use the settings in the Properties Inspector to change its shape.

Click to enlarge

Step 2. Convert to a symbol

To apply 9-slice scaling an object must be converted to a Movie clip Symbol.

Select the rectangle then Right-mouse click. Choose Convert to Symbol from the menu. The Convert to Symbol dialog will open. Enter a name and select Movie clip for the type. Click the Advanced button. At the bottom of the window click the checkbox next to Enable guides for 9-slice scaling. Click OK to close the window.

Step 3. Working with slice guides

Open the Library panel if it isn't already open. You can open the panel by pressing Command + L (PC: Control + L) Select your Movie clip. Notice the symbol€™s slice guides are displayed in the Library Preview area. Double-click the Movie clip icon in the Library. This will open the Symbol in its editing mode. Reposition the guides so that the corners are outside the guides. This tells Flash not to scale the corners. Click the Scene 1 button to return to Scene 1.

Step 4. Scale

Select the Free Transform tool (Q) in the Tool Panel. Click on the Instance of the Movie clip rectangle on the Stage. Click the Scale button in the Tool Panel. Click-and-drag a corner point outward to make the rectangle larger. Notice the radiuses of the four corners do not scale. Try scaling the rectangle down. Only the parts of the rectangle inside the slice guides scale.