So what is 9-Slice Scaling? Well, it’s a way of dividing a MovieClip up into 9 seperate pieces in order to maintain the shape of the corners and repeat the sides. This will be a quick tutorial that will explain to you exactly how it works. I may refer to it from time to time as a scale9 grid. I’ve heard it called each so just remember that a 9-slice scaling MovieClip is the same a scale9 grid MovieClip.
The Setup
To enable 9-Slice Scaling you simply need to select the checkbox when creating a new MovieClip symbol. Seriously, it’s that simple. Just open Flash and press CTRL+F8 to create a New Symbol. Then just make sure you select the options as the picture below.
Simply create a MovieClip and make sure you enable 9-slice scaling.
Now press OK and you’re ready to go. Now the difference between a regular MovieClip and this is obvious. We now have a grid that creates 9 boxes. You can move these grid lines around by using the Selection Tool (V). But before you start playing with it let me explain to you how it works.
Our Scale9 Grid.
Let me explain.
- Blue - this is the main purpose of the 9-Slice Grid. Whatever is in the blue will not scale any when the the whole MovieClip scales. This will insure that our corners don’t resize while the rest of the object resizes. If the MovieClip gets larger or smaller, the blue corner areas will not.
- Green - these boxes resize but only in one direction. Green boxes on the left and right will resize vertically but not horizontally. Green boxes on the top and bottom will resize horizontally but not vertically. This maintains a nice frame around the outside edge of the MovieClip.
- Red - resizes like a normal MovieClip both vertically and horizontally.
Alright, now you know how to use a 9-Slice Grid. Let’s draw a box with rounded corners in it.Grab the Rectangle Tool (R) set the Rectangle Corner Radius to 30. and draw a small box. Set it up so the corners are in the blue box area as the example below.
Notice the rounded corners are completely within the corner sections of the scale 9 grid.
The Example
Alright so it’s ready to use. Simply drop your MovieClip on the stage and scale it and you’ll see that the corners do not change.
Here’s an example of the corners of a scale 9 grid and a regular movieclip during scaling.
Regular MovieClip
9-Slice Scaling MovieClip
Take a good look at the corners to see the difference.
cool dude it’s very usable!!
it works great.. though I wanted the rectangle to be a mask and whenever I turn it into a mask, it goes back to the same old distorted resize.
is there any way to make it work while using it as a mask?
Crash… I’m not sure I’ve never tried it. If I find something on it I’ll let you know.
This is quite a up-to-date info. I think I’ll share it on Twitter.
Thanks a lot. I was searching for that and have to use in my project, So this is really very helpful for me and i just solve the problem .