MovieClip.scale9Grid example

Wednesday 21 September 2005  –  Filed under: Flash  –  No Comments

Another cool new feature in Flash Player 8 that hasn’t got a lot of attention yet (probably due to the overwhelmingly sexy filters stuff :-) is the ability to scale MovieClips in a much more intelligent way.

The new scaling mechanism is called scale9Grid and it’s implemented as a new property of the MovieClip class. Scale9 scaling basically works by cutting the MovieClip into 9 parts, each of which are scaled differently. The effect of this is that you can easily create objects that scale just like a operating system window, without any additional coding. This will come in very handy when creating user interface elements!

When you want to use scale9Grid, you need to pass a Rectangle (also new in Player 8) to define the inner area of the clip. This area will be scaled normally, all other parts will be scaled according to their position relative to the inner rectangle (see the MM docs for all the details) :

import flash.geom.Rectangle;
var grid:Rectangle = new Rectangle(5, 5, 40, 40);
myClip.scale9Grid = grid;

To switch scale9Grid off, you must set it to undefined:

myClip.scale9Grid = undefined;

I created a simple example, see the Flash demo below. Click the mouse to flip between different clips. Press any key to switch scale9Grid on or off.

Some limitations to keep in mind: scale9Grid doesn’t work for TextFields and child clips. Also, when rotating a scale9 clip, the scale9Grid property will be ignored.

Leave a Reply