Flash 8 marked the introduction of the scale9grid. UI writing was about to become substantially easier, because you could create components that resized dynamically and maintained their artistic integrity at all sizes. This was to usher in a new era of sexy UIs that were built in less time. In theory. In practice, the implementation was, and still is, buggy. Oh, and it only works for MovieClips. You can kinda get it working in Flex using yet another embed tag you’ll forget about as soon as you’re done copy pasting it from some reference site. Here’s a scale9 implementation that actually works.

What is Scale9?

If you don’t know what scale9 is, you can find out everything you need to know by checking the reference docs for the internal scale9 implementation on Adobe’s site. If that doesn’t explain it enough, google Flash Scale9 or ask about it here. Basically, it lets you change the size of something without creating artifacts on the borders.

Design Concerns

Because MovieClips are soooooo Actionscript 2.0, our custom scale9 implementation should work with any DisplayObject. This means we’re going to have to use a BitmapData and manually slice up the source image. Because BitmapDatas can be memory heavy, it makes sense to emulate the *Data pattern used by the Bitmap class, therefore we will have a Scale9 and a Scale9Data.

Usage

    var source : DisplayObject = new AssetWeWantToScale9();
    var scale9Rect : Rectangle = new Rectangle( 10, 10, 34, 34 );
    var scale9Data: Scale9Data = new Scale9Data( source, scale9Rect );
    var scale9 : Scale9 = new Scale9( scale9Data );

The Scale9 Example shows the scale9 in effect by creating a bunch of resized scale9′ed display objects. Yeah, it actually works.

Source Code

Well, here’s your weekly dosage of source code. Now you too can have a scale9 implementation that actually works!