Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Get Distortion-Free MovieClip Scaling in Nine Easy Slices : Page 2

When it comes to Flash 8's scale9grid feature, it really does depend on how you slice it.

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 };

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.

Rich Shupe is president of FMA, a full-service multimedia development and training facility based in New York. He is a regular Flash columnist for DevX and coauthor of the upcoming "Flash 8: Projects for Learning Animation and Interactivity" and the upcoming "Learning ActionScript 3.0," (both published by O'Reilly). FMA develops web and disc-based products for clients including McGraw-Hill, Phillips, 20th Century Fox, and Nickelodeon, and trains digital media professionals in Flash, ActionScript, HTML, JavaScript, and more.
Comment and Contribute








