How to anti-alias a dynamically loaded PNG in Flash

Question

Hello everyone,

I have a Flash file that I use to load in transparent PNG's (line-drawings), and use Flash to allow the user to select the color of drawing, and instantly change the color.

This is all working like it should be. I am using the UILoader component to load in the image that I recieve through flashvars, and then change the color if needed.

The only thing, that the image sometimes appears not very smooth. I have seen various articles where people talk about using smoothing=true on a bitmap. But I am not quiet sure where to set this, or how this works.

I am new to Flash and ActionScript, can anybody help me? Below is my code (main.as). I left out the changeColor() and getFlashvars() function, and the import lines. because I don't think it is relevant here, and to keep everything as simple and short as possible.

Thanks alot for any help and or pointer you can give me!

package  {
public class Main extends MovieClip {
    public function Main() {
        init();

        if(getFlashvars().img != undefined) {
            if(getFlashvars().clr != undefined) {
                loadImage(getFlashvars().img, getFlashvars().clr);
            } else {
                loadImage(getFlashvars().img);
            }
        } else {
            loadImage('example.png', 'FFFFFF');
        }
    }

    private function init() {
        ExternalInterface.addCallback('changeColor', this.changeColor);

        progressBar.visible = false;
        progressBar.mode = 'manual';
        progressBar.source = uiLoader;

        uiLoader.scaleContent = true;
        uiLoader.addEventListener(ProgressEvent.PROGRESS, eventImageProgress);
        uiLoader.addEventListener(Event.COMPLETE, eventImageLoaded);
    }

    /**
     * Load a new image from the given url. Replace the color in it with newColor
     */
    public function loadImage(url:String, newColor:String='') {
        //progressBar.visible = true;
        uiLoader.load(new URLRequest(url));

        if(newColor.length > 0) {
            changeColor(newColor);
        }
    }
}

Answer 1

as stated clearly in the documentation, smoothing is a public property of a bitmap.

myBitmap.smoothing = true;

it can also be set when calling a new bitmap constructor

var myBitmap:Bitmap = new Bitmap(myBitmapData, PixelSnapping.AUTO, true);
                      //where the last boolean represents the smoothing property

you could also try setting a light blur filter on your display object if you feel smoothing isn't enough.

Answer 2

What I did in Flex was to create a new component, which set the smoothing property on its internal bitmap if possible. Something similar might be doable in Flash.

public class SmoothImage extends Image
{

    override protected function updateDisplayList(w:Number, h:Number):void
    {
      super.updateDisplayList(w, h);
      if (content is Bitmap)
      {
        var bitmap : Bitmap = content as Bitmap;

        if (bitmap != null &&
            bitmap.smoothing == false)
        {
            bitmap.smoothing = true;
        }
      }
    }
}

Then you can use it like:

image = new SmoothImage();
image.source = url;

Might help! The main idea is to access the bitmap component itself to set the smoothing attribute, whether that happens in your file or a separate component, that's what you need to do.

Answer 3

If you have trouble with this smoothing code, this only works if you are getting the image from the same domain or a domain that has added you to their crossdomain.xml file.

In your complete handler, you could do something like this

// First, you need to copy the loaded image.
var displayObject :DisplayObject = uiLoader.content;
var bitmapData    :BitmapData    = new BitmapData(displayObject.width, displayObject.height);
bitmapData.draw(displayObject);

// Then create a new image from the loaded image.
var bitmap :Bitmap = new Bitmap(bitmapData);
bitmap.smoothing = true; // This is what actually does the anti-aliasing.

addChild(bitmap);

Answer 4

But I am not quiet sure where to set this

I would say that in its simplest form you can set smoothing to true on the loaded image (bitmap) in your handler for Event.COMPLETE, so eventImageLoaded in your case.

Something like this example:

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
loader.load(new URLRequest("http://www.google.com/images/logos/ps_logo.png"));

function imageLoaded(e:Event):void {
    e.target.content.smoothing = true;
    // Or Bitmap(e.target.content).smoothing = true; if you prefer.
}