Smoothing Loaded Images in AS3

Wed Jun 23 06:11:51 2010

Today, there I was, sitting at my desk working hard on a project involving loading images into a ActionScript constructed gallery. I needed the images in the gallery to animate and scale, as one would expect to be able to do with rich internet content.

Herein the problem lies, because the images looked very pixelated when they did anything other than just remain still.

Now, this isn't a big problem if you know how to go about it the right way, but I would imagine that there are tons of people out there who need to do the same kind of thing in their galleries, and probably 9 times out of ten are frustrated by the quality of the images output in the flash player. After all, rich internet applications should display rich image content. Then it hit me! Why not write a little about it here and spread the message that, although the flash player can sometimes be a CPU hog, it is something special, even when dealing when dealing with images.

As you will have probably seen by now, in the top left of this post there is a .swf file playing a scaling image, which reads "I love AS3" (and I admit proudly that I do). At the bottom of the swf there is a button, which when pressed will add/remove bitmap smoothing to the image loaded. Smoothing in ActionScript 3 is surprisingly simple and can be done by setting the smoothing property of any Bitmap instance to true. Take a look at the example below.

var ldr:Loader = new Loader();
addChild(ldr);
ldr.scaleX = ldr.scaleY = 5;
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
ldr.load(new URLRequest("myImage.jpg"));

function imageLoaded(event:Event):void{
   var contentToSmooth:Bitmap = event.target.content;
   // contentToSmooth.smoothing = true;
}

If we were to compile this code as it, assuming we've entered the correct URL to the image, we should see our image scaled by 5x and looking quite pixelated depending on how high the quality is of the image used. Now all we have to do to see the effects of smoothing is uncomment line 9 by removing the // from the beginning and recompile. This time you should notice a much less pixelated image displayed, even at 5x the size.

If you're interested in the example at the top left of this post, you can download the source code below.