Scale-9 From Outer Space

As I dive deeper and deeper into Flash 8 Pro, a few things are starting to stand out as "stealth" features, meaning that while not exactly highly touted, they are proving themselves highly useful. One such feature is 9-slice scaling (AKA Scale-9), which, judging by its various names, would seem to refer to some sort of scaling and/or slicing. So what exactly is Scale-9, and just how "highly useful" could it possibly be?

Where were you in January?

The best way to illustrate what Scale-9 does to cite a real-world example, so I'll use one which caused your humble author no small amount of pain and consternation. At the beginning of this year, I was working on a project that needed to have several text boxes, each of varying sizes and coordinates depending on the section the user was reading. I've abstracted the look of these boxes somewhat for our purposes today, but suffice it to say that it was something like the one shown in Figure 1.

Figure 1

This was a big project, one with more than a few text boxes, so I came up with a single Movie Clip that I could drag onto the stage, "attach" (in ActionScript) properties such as the height and width (which were calculated automatically from the size of the text in the field), x and y coordinates, the label, and text for each instance, and it would assume the correct position and size at runtime. Think of it as a poor man's Component I was building, since I did everything short of actually compiling it as a Component. Anyway, with the thin lines and drop shadow and everything, I had to write an inordinate amount of ActionScript in order to take all the input and essentially rebuild the "simple" box out of its various pieces each time a new instance was made. As for the shadow itself, I had to generate out several semi-transparent PNG files so the corners of the shadow would stay the same size while the left, right, top and bottom borders of the shadow would scale to fit. It was a huge pain to do, but ultimately very much worth it, as the up-front effort made the development process a lot easier for myself once it came time to put the content in. I was especially thankful I was doing it this way after text changes started coming in that altered the size of the boxes, since all that was required was to drop the new text into an external file and my pseudo-Component would resize itself on the fly based on the whatever text was there. A pain, but handy. But then Flash 8 came along and made that whole exercise moot. Enter Scale-9.

An abstract example

The simplest definition I can come up with is this: Scale-9 is the process in Flash whereby you define a 3x3 grid over a Movie Clip. This grid bisects your clip into nine sections (think of a tic-tac-toe grid), and allows scaling of the clip so that the corners will stay the same size, the top and bottom edges scale horizontally, the left and right edges scale vertically, and the center scales both ways. So, if I were to take a simple circle and enable Scale-9, you'd get something like Figure 2:

Figure 2: On the left, our base circle. In the middle, the circle scaled to 3x width and 1.5x height. On the right, same circle, same scaling, but with Scale-9 enabled.

Makes sense so far, right? Scale-9 keeps things like corners, edges, and strokes from getting wonky, yet still scales your clips as smooth as buttah. So the question becomes: how do I turn this super-cool feature on and use it in my Flash movies?

How to turn this super-cool feature on and use it in your Flash movies

There are two ways to enable Scale-9: through the GUI, and through ActionScript. Neither is particularly hard, so I'll go through both using the text area example I spoke of earlier. Let's do the GUI first.

The first thing you need to do is make a Movie Clip. It can be a pre-existing one, or you can start one from scratch. In this example, I've already made a couple of lines and semi-transparent boxes into a clip that approximates the shape we saw way back in Figure 1, but do whatever you want here. If you're making a new Movie Clip (either by converting an object to a Symbol or via the Insert New Symbol option), you'll be presented with a box that looks something like Figure 3:

Figure 3

Click on the Advanced button, and the panel magically turns into what you see in Figure 4:

Figure 4

Way down at the bottom of the panel is a checkbox, which is labeled "Enable guides for 9-slice scaling." Check that, hit OK, and you're in business. Now, if you want to enable Scale-9 for a pre-existing Movie Clip, just click the Symbol Properties button (the little "i" icon at the bottom of the Library Panel) and enable the same checkbox. Now that we've got Scale-9 enabled, you should see several guides inserted into your Movie Clip, like the ones shown in Figure 5:

Figure 5

Just drag these guides to where you want them to go. That's it. That really is all. In my case, the bottom guide needed to go above the label area so it would always stay the same size. In the case of the circle we saw earlier, it was a tiny grid that only extended one pixel out from the center in each direction. It can be any size rectangle, at any coordinate in your clip. Now, whenever you have an instance of your Scale-9-enabled clip on the Stage, you can resize it to your heart's content (either via the GUI or through ActionScript) and the clip will scale according to the guides you've set.

The ActionScript way

The GUI method is insanely easy, but if you feel compelled to get your code on and do this all via ActionScript, you're not exactly in for a rough ride either. You only need three lines of code to enable Scale-9, which breaks down as follows:

1. Import the Rectangle class
2. Create a rectangle
3. Tell a clip to use the rectangle as its Scale-9 grid

Here's what that looks like in actual code:

import flash.geom.Rectangle;
var s9grid:Rectangle = new Rectangle(x, y, width, height);
target_mc.scale9Grid = s9grid;

Substitute your clip's name for target_mc, enter in actual numbers for x, y, width, and height, and that's that. To turn off Scale-9, you'd simply write:

target_mc.scale9Grid = undefined;

The only difficult part of this may be in ascertaining the coordinates and dimensions, since there may be some guesswork involved to hit the x's and y's correctly so everything works as it should. Here's a tip: use the GUI method outlined above first, and once you have the guides dragged to where they need to be, put the following code into your movie:

trace(target_mc.scale9Grid);

Test your movie, and the Output panel will give you the precise coordinates, which you can then put directly into your script. In the case of my text area, the Output panel was kind enough to tell me:

(x=-50, y=-50, w=100, h=80)

So that's it for the ActionScript version (at least the basics). It's rare when you can say that doing something with ActionScript is almost as easy as doing it in the Flash GUI, but such is the case with Scale-9.

Playtime

So far, a lot of theory. Time to see Scale-9 in action. Figure 6 shows you my text area example, to which I've added a live drop shadow (through Flash 8's new Filters panel) to more closely approximate the original we saw way back in Figure 1. The percentage buttons will scale the box on the fly, and clicking the Scale-9 on/off radio buttons will show you what happens with the effect enabled or disabled. You'll need Flash Player 8, which is available from Macromedia's site. Anyway, knock yourself out. Not literally.

Figure 6

As you can see, with Scale-9 off, all Flash is doing is resizing the clip wholesale—the strokes get thicker as the clip gets bigger, and the label area is always a fixed percentage of the entire clip. With Scale-9 on, the strokes stay the same width, and the label area always maintains the same height. Of course, were I doing this for real, there's still the little matter of dynamically sizing and placing the various text fields, but that's cake compared to how much code I had to write in Flash MX 2004 just for the window to do its thing like that. And don't even get me started on how nasty it was to make the drop shadow scale properly. So with Scale-9 and a live drop shadow, I've probably eliminated 90% of my code from the version I did back in January.

Caveats

A couple of issues cropped up when I was working my way through figuring out Scale-9. One is that it only works on Movie Clips, so Graphics and Buttons need not apply. Of course, a Button is a form of Movie Clip, and Graphics suffer from Movie Clip envy in so many other areas of Flash anyway, so I don't think many of you will struggle with that particular limitation.

The other potential pitfall is a little more frustrating. Even though I wasn't able to find any evidence precluding the use of bitmaps as Scale-9-enabled objects, my tests in this area always ended with extremely unpredictable results. In all cases, it just seemed that bitmaps simply can't or won't scale properly this way, and I'm not sure why that is. It didn't matter what format I was using, whether I embedded the bitmap inside of a container clip, or if I used a mixture of bitmaps or vectors, it never came out right. I don't know if this is a bug or by design, but I would stick to vectors only for now. Besides, with the new Filters in Flash 8, you've got more design options, so it's not too hard to work around the bitmap issue.

Well, that's it, folks. Scale-9 may not be an attention-grabbing new feature in Flash 8, but it has the potential to be a real workhorse, not to mention a huge timesaver. I find myself wishing I had some sort of time machine to bring Flash 8 back to my January self (which would be the least of my nefarious deeds if I actually had a time machine), but that's another story entirely.

Filed under: Tutorial on November 9th, 2005

^ Top of Page

Got Feedback? to send an email. I'll do my best to answer. Really.