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.
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.
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.
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.
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.
9-Slice Scaling MovieClip
Take a good look at the corners to see the difference.
- Changing Colors Dynamically with ColorTransform in AS3
- Creating Bullet Lasers with Photoshop
- Making a Complete Flash Game: Creating & Understanding the Preloader
- Using Tweener in AS3 to Move Objects
- AS3 Flash Games for Beginners: Registering Hit Tests