Enable Smoothing on Images for scaling in Flex 2

While I can’t claim any credit for the solution – most of the credit goes to my colleague from Adobe Consulting Flex Architect Brian O’Conner, and the alternative approach comes from Roger Gonzalez from the Flex Team – I recently came across a small issue. By default, when you embed or load an image in Flex, “smoothing” is set to false. This makes sense since most of the images you’d probably want in their native size, and you’d want pixel perfect. But, when you want to scale the image, either up or down, or rotate the image, the image is rendered with the “nearest neighbor” scaling method. You can read more about the issue in the flash player at Tinic Uro’s Blog. As you can see in the example that follows, the results of this are less than beautiful.

After a little trial and error on my own part, I got some help from the experts, and got a simple solution for enabling smoothing on an image in Flex.


The first approach uses the BitmapAsset class, where init() is called on creationComplete as follows:

import mx.core.BitmapAsset;

[Bindable]
public var mySmoothImage:BitmapAsset;

[Bindable]
[Embed(source="assets/myImage.png")]
public var myImage:Class;

public function init():void
{
mySmoothImage = BitmapAsset(new myImage());
mySmoothImage.smoothing = true;
}

The second approach is somewhat more compact, and uses a class level embed that extends Bitmap, as follows:


[Embed(source="myImage.png")]
public class mySmoothImage extends Bitmap
{
public function mySmoothImage()
{
smoothing = true;
}
}

Below is an example of the same image embedded twice in a flex app, the first with Smoothing enabled, and the second in the default manner. As you change the scale of the image via the slider control, you should be able to notice the difference. This would be valuable for any image that you intend to scale, or perhaps an image that you intend to apply a scale or zoom effect to.

Be warned though, enabling smoothing can affect performance, so you certainly wouldn’t want to enable smoothing for UI elements or items that never intend to scale or rotate.

Click to download the below example

_uacct = “UA-1465179-1″;
urchinTracker();