I’ve posted before on caching and smooth-scaling images, but these tips don’t apply when you want to manipulate bitmap data directly.

Let’s say you want to create a scaled copy of an existing bitmap that is 25% of its original width and height.

Here’s a basic example of how to do that using a matrix transformation:

// creates a matrix to scale the bitmap data
var matrix : Matrix = new Matrix ();
matrix.scale (0.25, 0.25);

// 'source' is the existing bitmap data we want to scale
var width : Number = source.width / 4;
var height : Number = source.height / 4;

var data : BitmapData = new BitmapData (width, height);
data.draw (source, matrix);


The problem with this approach is that the scaled bitmap data often looks terrible when you load it into an Image control.

BitmapData objects have no concept of smoothing. Transformations performed directly on the bitmap data are not going to look as good as transformations performed on an image or bitmap that loads the bitmap data.

Here’s an alternative approach to scaling the bitmap that uses an Image control and a Bitmap object with smoothing enabled:

// 'source' is the existing bitmap data we want to scale
var image : Image = new Image ();
image.load (new Bitmap (source, "auto", true));

var width : Number = source.width / 4;
var height : Number = source.height / 4;

// scales the image
image.content.width = width;
image.content.height = height;

var data : BitmapData = new BitmapData (width, height);
data.draw (image.content);


This approach has two advantages.

One, it uses bitmap smoothing to produce a cleaner image. Two, it prevents the flicker that occurs when you load bitmap data into an Image control with dimensions that are smaller than the original size of the bitmap. In these cases the bitmap data will still scale appropriately, but not before it displays temporarily at its full size.