Get Distortion-Free MovieClip Scaling in Nine Easy Slices

ow many times have you scaled a movie clip that started out looking like Figure 1 …and ended up looking like Figure 2?

It’s quite common to see your carefully created movie clips distort before your very eyes, losing all corner definition, thinning and thickening their strokes, and generally making messes of themselves.

How many times have you wished that your beautiful rounded-corner movie clips would scale like components, without distorting the corners or the thickness of the lines? Wouldn’t you rather your scaled movie clip look like Figure 3?

Well, now it can, thanks to Flash 8’s scale9grid movie clip property.


Figure 1. Before: This is the original movie clip prior to scaling.
 
Figure 2. After: This is the same movie clip after scaling.

This feature works on a fairly simple principle, one that should even be quite familiar to many Web designers. The idea is to divide the movie clip into 9-slices, effectively creating a 3 x 3 grid, as seen in Figure 4.

The center of the grid will scale normally. The top, center and bottom, center cells of the grid will only scale horizontally, and the left, center and right, center sides of the grid will only scale vertically. The four corners of the grid will not scale at all, thus maintaining a crisp and clean appearance.


Figure 3. Cornered: This is the same movie clip as in Figure 2 after scaling with 9-slice scaling.
 
Figure 4. Diced: This is the same movie clip as in Figure 1 with 9-slice scaling enabled.

Enabling 9-slice Scaling via the Flash Interface
Although you have more freedom to change your mind on the fly when using ActionScript, taking advantage of 9-slice scaling does not require code. When creating a symbol, you will see the typical Create New Symbol or Convert to Symbol dialogs. If your dialog is minimized, click on the Advanced button. You will then see Linkage options, as well as a Source section when working with imported assets. The same features can be seen in the Symbol Properties dialog (seen in Figure 5), which is accessible via the Library.

Down at the bottom of this enlarged dialog is a checkbox labeled “Enable guides for 9-slice scaling.” When enabled, a default set of grid guides will be positioned 25 percent of the clip width from the left and right edges, and 25 percent of the clip height from the top and bottom edges. This grid can be seen in the Library preview, illustrated in Figure 6.


Figure 5. Sans Script: You can enable 9-slice scaling, without any ActionScript, through the Symbol Properties dialog.
 
Figure 6. Grid Guides: When enabled, the grid guides for movie clips that have 9-slice scaling can be seen in the Library preview.

Although the grid cannot be seen when editing a movie clip in place on the stage, each time you edit the symbol via the Library or Symbol Menu, the gridlines can be manually adjusted by dragging each with the mouse. Thereafter, scaling will honor this grid and preserve the appearance of the movie clip as you originally intended it to look. The first source file that accompanies this article, “scale9grid_01.fla,” uses this technique to enable 9-slice scaling for the sole movie clip in the file.

Dynamically Assigning the Property with ActionScript
Of course, using ActionScript instead of the Flash interface, typically gives you more power and flexibility. Typically, not only can you turn a feature on and off, you can adjust its parameters.

The following section will explain the three lines of ActionScript required to enable scale9Grid dynamically, as well as a handful of additional lines of code that you can use for demonstration purposes. This script assumes you have a movie clip with an instance name of “slice9” on the stage. If you copy and paste the code from this article into your own file, be sure to remove the line numbers. If you prefer, you can download the sample code that accompanies this article and follow along with file “scale9grid_02.fla.”

To use this feature, you must be able to specify a rectangle (rect) with Flash 8’s new Rectangle class. It’s part of the geom (geometry) package and can be imported into your file using one line of code:

1   import flash.geom.Rectangle;

Once the Rectangle class is available, you can specify a rect relative to the upper left corner of the movie clip. The rect requires four parameters but, unlike some other applications (like Director), a Flash rect is not specified using rect(left, top, right, and bottom). Instead, it is described using the x- and y-coordinates, and the width and height, of the rect.

For example, if you started with a movie clip with a 12-pixel corner radius, you might want to specify a grid corner of 20 x 20 pixels. If the movie clip had dimensions of 180 x 180 pixels, you would specify the location of the rect as (20,20) with a width of 160 and a height of 160. This insets the rect 20 pixels on all sides of the movie clip, thereby protecting all four corners.

2   var grid:Rectangle = new Rectangle(20,20,160,160);

All that remains is to set the value of the scale9Grid property to the rect you just created:

3   slice9.scale9Grid = grid;

Additional Code for Demo Only
The preceding code is all you need to enable distortion-free scaling of vector movie clips. However, it would be nice to be able to demonstrate this easily to see the difference between using, and not using, this feature.

This event handler does nothing more than resize the movie clip based on the position of the mouse:

4   slice9.onMouseMove = function():Void  {5       this._width = _xmouse;6       this._height = _ymouse;7   };

This event handler simply switches back and forth between enabling and disabling the scale9Grid property, and traces the result to the Output panel. Remember, to turn the feature off, you must set the property to undefined.

8   this.onMouseUp = function():Void  {9       if (slice9.scale9Grid == undefined) {10          slice9.scale9Grid = grid;11          trace("scale9Grid: " + slice9.scale9Grid);12      } else {13          slice9.scale9Grid = undefined;14          trace("scale9Grid: Disabled");15      }16  };

Gotchas
There are few things to remember when it comes to scale9Grid. The first two are documented tidbits: 9-slice scaling requires the Flash 8 Player and only works with movie clips. It has no effect on buttons or graphics. The next two items are undocumented, as far as I can tell.

Gotcha No. 1, Registration Point: Although I’ve not found any mention of this anywhere, I can only get this feature to work if the registration point of the movie clip is in its upper left corner, when using ActionScript. This is odd because, when enabling 9-slice scaling using the Library, it works just fine with a center registration point. The “scale9grid_01.fla” file is created this way. However, when using ActionScript, the effect seems to fail when the movie clip’s registration point is in its center.

Without initially finding any reference to this issue in documentation or online sources, there’s every reason to assume I missed something, or perhaps my file, or my copy of Flash, is on the fritz. I encourage anyone to fill me in on any details I may have missed. To help verify this circumstance, I’ve provided a near duplicate of the source file previously discussed. The only difference between the previous file and “scale9grid_03.fla” is that, in the latter, the registration point of the movie clip is in its center. Try it out and let me know if it behaves.

Gotcha No. 2, Bitmaps: For some reason, using scale9Grid on a movie clip with a bitmap in it, doesn’t seem to mirror the effect of applying the property to vectors. You can witness this failing in the “scale9grid_04.fla” source file. However, if you use your preferred bitmap-editing program to slice the image before importing it into Flash, it does seem to work. All you have to do is pre-create the 9-slices you intend to use in Flash, and import all of them to make up a larger whole. This can be seen in the “scale9grid_04.fla” source file.

Nothing’s Perfect
As long as you watch out for the aforementioned gotchas, 9-slice scaling can add an impressive touch of professionalism to your work. Your movie clips can scale as beautifully as well-produced components, using a fraction of the labor.

See you next month.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

Recent Articles: