Avocado Blog Zen and the Art of Flash Development

Scale9Bitmap Class

I often use Actionscript's native scale9grid -feature for scaling user interface elements. That's a neat concept as it allows the elements to have crisp borders and shaped corners, and still scale nicely to accommodate the needed space. The sad thing is that the scale9grid -feature only works for vector graphics and I often want to use bitmap graphics for the smaller user elements in order to minimize the amount of vector graphics that has to be rendered for screen, and because that obviously allows more flexibility for design.

For this reason I developed the Scale9Bitmap -class, which allows me to make, for example, a button in Photoshop, define a scale9grid for the image's bitmapData and just scale the button image so that the text or glyph fits nicely inside the button. The solution is to slice the given bitmapData into 9 pieces according to the scale9grid Rectangle, and then just to scale each one in the correct axis.

Here is a sample how the scale9grid affects the bitmap scaling:

So, if this is a feature that you think you would find useful, go ahead and download Scale9Bitmap.

A more detailed specification of the scale9grid functionality is available at Actionscript 3.0 Language Reference.

This class is provided "as is", and still needs some development. In particular, there is one key feature still missing: the bitmap doesn't scale correctly below the given grid border size. So if, for example, you define a grid that has a 10px left column and the 20px right column, the bitmap is not scaled correctly if you set the width below 30px. Besides that, it should work nicely,  and I use it very often in my daily work.