Working with 9-slice scaling in ActionScript

In the following example, you use the drawing tools to draw a 300 pixel by 300 pixel square which is resized by using 9-slice scaling. The square is split up into nine smaller squares, each one approximately 100 pixels wide by 100 pixels high. When you resize the square, each segment that isn't a corner expands to match the specified width and height.

Create a new Flash document and save it as ninescale.fla.
Drag a Button component into the current document's library.
Select the Rectangle tool and draw a red square (300 pixels by 300 pixels) with a 15-pixel black stroke on the Stage.
Select the Oval tool and draw a purple circle (50 pixels by 50 pixels) with a 2-pixel black stroke on the Stage.
Select the purple circle and drag it into the upper-right corner of the red square created earlier.
Select the Oval tool and draw a new circle that is approximately 200 pixels by 200 pixels and position it off of the Stage.
Select the new circle on the Stage and drag it so that the circle's center-point is in the lower-left corner of the square.
Click outside of the circle instance to deselect the circle.
Double-click the circle again to select it and press backspace to delete the shape and remove a circular portion of the square.
Using the mouse, select the entire red square and inner purple circle.
Press F8 to convert the shape into a movie clip symbol.
Give the movie clip on the Stage an instance name of my_mc.

Add the following ActionScript to Frame 1 of the main Timeline:

import mx.controls.Button;
import flash.geom.Rectangle;

var grid:Rectangle = new Rectangle(100, 100, 100, 100);

var small_button:Button = this.createClassObject(Button, "small_button", 10, {label:"Small"});
small_button.move(10, 10);
small_button.addEventListener("click", smallHandler);
function smallHandler(eventObj:Object):Void {
        my_mc._width = 100;
        my_mc._height = 100;
}

var large_button:Button = this.createClassObject(Button, "large_button", 20, {label:"Large"});
large_button.move(120, 10);
large_button.addEventListener("click", largeHandler);
function largeHandler(eventObj:Object):Void {
        my_mc._width = 450;
        my_mc._height = 300;
}

var toggle_button:Button = this.createClassObject(Button, "toggle_button", 30, {label:"scale9Grid=OFF", toggle:true, selected:false});
toggle_button.move(420, 10);
toggle_button.setSize(120, 22);
toggle_button.addEventListener("click", toggleListener);
function toggleListener(eventObj:Object):Void {
    if (eventObj.target.selected) {
        eventObj.target.label = "scale9Grid=ON";
        my_mc.scale9Grid = grid;
    } else {
        eventObj.target.label = "scale9Grid=OFF";
        my_mc.scale9Grid = undefined;
    }
}

The preceding code is separated into five sections. The first section of code imports two classes: mx.controls.Button (the Button component class) and flash.geom.Rectangle. The second section of code creates a new Rectangle class instance and specifies x and y coordinates of 100 pixels as well as a width and height of 100 pixels. This rectangle instance is used to set up the 9-slice scaling grid for a movie clip shape created later on.

Next, you create a new Button component instance and give it an instance name of small_button. Whenever you click this button, the movie clip that you created earlier resizes to 100 pixels wide by 100 pixels high. The fourth section of code dynamically creates a new Button instance named large_button which, when clicked, resizes the target movie clip to 450 pixels wide by 300 pixels high. The final section of code creates a new Button instance that the user can toggle on and off. When the button is in the on state, the 9-slice grid is applied. If the button is in the off state, the 9-slice grid is disabled.

Save the Flash document and select Control > Test Movie to test the SWF file.
This code example adds and positions three Button component instances on the Stage and creates event listeners for each button. If you click the Large button with the 9-slice grid disabled, you can see that the image becomes distorted and looks stretched. Enable the 9-slice grid by clicking the toggle button and click the Large button again. With the 9-slice grid enabled, the circle in the upper-left corner should no longer appear distorted.

Working with 9-slice scaling in ActionScript

To use 9-slice scaling with ActionScript: