Tutorial: Page (1) of 2 - 11/09/05

email article

print page

More Related Stories

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.

Page: 1 2 Next Page