Text within an image is jaggy/broken - Adobe Flash - image

Question

this is a post I have made on the adobe forum...
I'm newish to flash and i'm doing a presentation as part of a University assignment.
My problem is basically this. As part of my presentation I have a photo gallery which uses thumbnail images as buttons and then a UI loader to load a pop up version of the larger image from my webserver - as per https://www.youtube.com/watch?v=Peo_nT9HHa0
The image was created on photoshop. It is a .jpg and has text within the image that describes underneath it what the image is all about. The text within photoshop is set to anti-aliasing 'smooth' and when I test the movie within flash, the text underneath the image looks fine - just as it does in photoshop.
However, when I publish and upload the .swf file to my webserver and view the image through a browser, the text looks awful - all jaggy and broken if that makes sense.
Any ideas why?
I was given a reply of...
If you are loading the images dynamically then you will have to set the smoothing property true after the file(s) has been loaded. So if you don't currently have a listener for the images finishing loading, you will need one, and an event handler function to assign the smoothing property to true for each of them.
Can anyone help with creating the actionscript for this listener and event handler function?
I basically have a gallery movie clip with buttons that act as clickable thumbnails. The actionscript for that is...
btnImage1.addEventListener(MouseEvent.CLICK, loadimage1);
function loadimage1 (event:MouseEvent):void{
imagetxt.text = "a";
togglewindow.gotoAndPlay(2)
}
and then a UI loader that displays the larger image when a thumbnail is clicked
if (MovieClip(this.parent).imagetxt.text == "a"){
var imgurl:String ="IMAGE URL";
var myrequest:URLRequest = new URLRequest(imgurl);
myloader.load(myrequest);
}

Answer 1

As indicated, you should always turn smoothing on if the image is going to be scaled at all. It uses a different scaling algorithm that blurs pixels rather than deletes them. Take note that it is substantially slower to smooth, but on modern machines you shouldn't notice the difference unless you are doing it to thousands of images all at once.
After instantiation, add a Event.COMPLETE handler to Loader.contentLoaderInfo.
var myLoader = new Loader();
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderCompleteHandler);
Then in the handler, you can access the Bitmap and turn smoothing on.
function loaderCompleteHandler(e:Event):void {
var image:Bitmap = myLoader.content as Bitmap; //Loader.content is typed as a DisplayObject, so we need to cast it as a Bitmap
image.smoothing = true;
}
And that should solve the issue. You may need to add the image object to the stage rather than the myLoader object. I don't think you'll have to, but I can't remember.

Answer 2

Just add event an event listener to your loader. Like this:
load.addEventListener(Event.COMPLETE,doneLoad);
then in the doneLoad function get the event.data and cast it to Bitmap and set the bitmap smoothing to true:
var myBitmap:Bitmap= e.target.data as Bitmap;
myBitmap.smoothing=true;
//add bitmap to parent ....

Answer 3

I wrote you universal method for loading images, you should pass 3 arguments to the method: holder for big images, image path, and rectangle to restrict image bounds and resize them. This method should be sufficient for your task.
private function loadImage(holder:DisplayObjectContainer, path:String, bounds:Rectangle):void {
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function (e:Event):void {
var bitmap:Bitmap = loader.content as Bitmap;
if (bitmap != null) {
bitmap.smoothing = true;
//Resize bitmap to fit bounds
var availableRatio:Number = bounds.width / bounds.height;
var componentRatio:Number = bitmap.width / bitmap.height;
if (componentRatio > availableRatio) {
bitmap.width = bounds.width;
bitmap.height = bounds.width / componentRatio;
} else {
bitmap.width = bounds.height * componentRatio;
bitmap.height = bounds.height;
}
//Clear previous
var i:uint, len: uint = holder.numChildren, old: Bitmap;
for(i; i < len; ++i){
old = holder.removeChildAt(0) as Bitmap;
old.bitmapData.dispose();
}
//Here you can add some appear animation
bitmap.x = bounds.x + ((bounds.width - bitmap.width) >> 1);
bitmap.y = bounds.y + ((bounds.height - bitmap.height) >> 1);
holder.addChild(bitmap);
}
});
loader.load(new URLRequest(path));
}
Usage:
loadImage(myContainer, "Path-to-Image", new Rectangle(20, 20, 400, 200));