Flash CS3 Documentation

ActionScript 2.0 Language Reference > ActionScript classes > MovieClip > scale9Grid (MovieClip.scale9Grid property)

scale9Grid (MovieClip.scale9Grid property)

The rectangular region that defines the nine scaling regions for the movie clip. If set to null, the entire movie clip scales normally when any scale transformation is applied.

When a scale9Grid property is defined for a movie clip, the movie clip is divided into a grid with nine regions, based on the scale9Grid rectangle, which defines the center region of the grid. The grid has eight other regions:

• The area in the upper-left corner outside the rectangle
• The area above the rectangle
• The area in the upper-right corner outside the rectangle
• The area to the left of the rectangle
• The area to the right of the rectangle
• The area in the lower-left corner outside the rectangle
• The area below the rectangle
• The area in the lower-right corner outside the rectangle

You can think of the eight regions outside of the center (defined by the rectangle) as being like a picture frame that has special rules applied to it when the movie clip is scaled.

When the scale9Grid property is set and a movie clip is scaled, all text and child movie clips scale normally, regardless of which regions of the scale9 grid they are located in; however, for other types of objects the following rules apply:

• All content in the center region scales normally.
• Any content in the corners are only scaled when the center region is scaled to 0.
• Any content in the top and bottom regions scale only horizontally. Content in the left-hand and right-hand regions scale only vertically.
• All fills (including bitmaps, video, and gradients) are stretched to fit their shapes.

If a movie clip is rotated, subsequent scaling is normal (and the scale9Grid property is ignored).

For example, consider the following movie clip and a rectangle that is applied as the movie clip's scale9Grid property:

When the movie clip is scaled or stretched, the objects within the rectangle scale normally, but the objects outside of the rectangle scale according to the scale9Grid rules:

A common use for setting scale9Grid is to set up a component in which edge lines retain the same width when the component is scaled.

In the Adobe Flash authoring environment, you can enable guides for 9-slice scaling for a movie clip symbol in a library. This lets you graphically determine the scale9grid for the object. When you set 9-slice scaling for a symbol, the scale9grid property of any instance of that symbol is automatically set. For a symbol that has 9-slice scaling enabled, when you create the SWF file any curve that spans more than one region of the 9-slice scaling grid is divided into separate curves for each region of the grid. For instance, consider a curve in a movie clip symbol for which 9-slice scaling is enabled and the same curve in a movie clip symbol for which 9-slice scaling is not enabled:

When Flash creates the SWF file, the curve in first movie clip illustrated is divided into three curves. This is not the case for the second movie clip, for which the 9-slice scaling is not enabled. Even if you set scale9Grid for the second movie clip to a rectangle that matches the scale9Grid of the first movie clip, when you scale these movie clips the results differ because of the way Flash divides the curves in the first movie clip:

Availability: ActionScript 2.0; Flash Player 8

Example

The following creates a movie clip that contains a 20-pixel line (which forms a border) and a gradient fill. The movie clip scales based on the mouse position, and because of the scale9Grid set for the movie clip, the thickness of the 20-pixel line does not vary when the movie clip scales (although the gradient in the movie clip does scale):

import flash.geom.Rectangle;
import flash.geom.Matrix;

this.createEmptyMovieClip("my_mc", this.getNextHighestDepth());

var grid:Rectangle = new Rectangle(20, 20, 260, 260);
my_mc.scale9Grid = grid ;

my_mc._x = 50;
my_mc._y = 50;

function onMouseMove() 
{
    my_mc._width = _xmouse;
    my_mc._height = _ymouse;
}

my_mc.lineStyle(20, 0xff3333, 100);
var gradient_matrix:Matrix = new Matrix();
gradient_matrix.createGradientBox(15, 15, Math.PI, 10, 10);
my_mc.beginGradientFill("radial", [0xffff00, 0x0000ff], 
            [100, 100], [0, 0xFF], gradient_matrix, 
            "reflect", "RGB", 0.9);
my_mc.moveTo(0, 0);
my_mc.lineTo(0, 300);
my_mc.lineTo(300, 300);
my_mc.lineTo(300, 0);
my_mc.lineTo(0, 0);
my_mc.endFill();

See also

Rectangle (flash.geom.Rectangle)

Flash CS3

Comments

Add Comment

MotionMaker said on Jul 31, 2007 at 2:12 PM :

I believe with the example in Flash CS3, you need to go to the File Publish Settings and under the Flash tab set to Actionscript 2.

tderich said on Aug 1, 2007 at 8:13 PM :

MotionMaker is correct. Since
this is the ActionScript 2
language reference and not the
ActionScript 3 language reference,
the examples were made to
compile in a Flash File
(ActionScript 2) document.

eirkeirkeirk said on Oct 16, 2007 at 1:29 PM :

It's worth noting that scale9Grid scaling does NOT work with imported bitmap
images. I imported a PNG, converted it to a MovieClip, and attempted to use
scale9Grid scaling without success. Had to basically recreate the image in
the PNG with the Flash drawing tools to achieve the effect I was looking for.

Joe ... Ward said on Oct 19, 2007 at 3:13 PM :

This is correct. It is noted here:http://livedocs.adobe.com/flash/9.0/UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7db8.html, but should be noted on this page as well.

No screen name said on Mar 30, 2008 at 8:40 PM :

I tried applying a motion tween to a movie clip that had a scale9Grid applied without success. The first frame had the _alpha set to 0 and the 25th frame had the _alpha set to 100. Strangely though, if the _alpha values are reversed, the tween works fine.

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/9.0/main/00001967.html

Add Comment