Bitmap.smoothing - how to reduce image distortion

[Flep]

I received more questions regarding the 3D image viewer .
Mainly, those questions was about the fact of expanding images with as less as possible distortion of the image itself.
Some emails would specify that the image used were of high resolution which is wrong to start with.

The trick to avoid the distortion of images used in animations is simply in the settings of one parameter.* In your flash library, if you right click on the image, you will find the option ‘Allow smoothing’.* Once that option checked, Flash will drastically reduce the image distortion during the animation.

Now, what should we do if the image is not placed in library but is externally loaded in runtime?

The answer is the property ‘smoothing’ of the Bitmap Class of Actionscript 3.0.

Let us take a look at those2 following examples:

In the first example, the property ‘smoothing’ is set to ‘false’. In the second, the property ‘smoothing’ is set to ‘true’.

I create a FLA and save it as ‘main.fla’.
This FLA is empty.
We will assign to it a Document Class, an AS file saved as ‘Main.as’, implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.display.Loader;
	import flash.net.URLRequest;
	import flash.events.Event;
	
	public class Main extends MovieClip
	{
		private var loader:Loader;
		
		private var startWidth:Number;
		private var startHeight:Number;
		
		public function Main()
		{
			init();
			loadImage();
		}
		
		private function init():void
		{
			stage.frameRate=31;
		}
		
		private function loadImage():void
		{
			var request:URLRequest=new URLRequest('http://www.flepstudio.org/swf/sintassi/allow_smoothing/pic_0.jpg');
			loader=new Loader();
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE,completed);
			loader.load(request);
		}
		
		private function completed(evt:Event):void
		{
			addChild(loader);
			startWidth=loader.width;
			startHeight=loader.height;
			loader.addEventListener(Event.ENTER_FRAME,moveMe);
		}
		
		private function moveMe(evt:Event):void
		{
			evt.target.width+=2;
			evt.target.height+=2;
			if(evt.target.width>stage.stageWidth)
			{
				evt.target.width=startWidth;
				evt.target.height=startHeight;
			}
		}
	}
}

As we can see from the code, an external image is loaded via a Loader.
Once completely loaded, I apply to ‘loader’ (instance of Loader which loaded the image) an animation. The content of ‘loader’ is enlarged in both width and height.
In this case, we do not use the property ‘smoothing’ and the result is not one of the best to see.

Instead, if when ‘loader’ has finished to completely load the image (in the method: private function completed), we write those few next lines of codes:

I add ‘loader’ to the stage (otherwise it would not be visible)
addChild(loader);
I create a Bitmap variable to which I assign as a value the content of ‘loader’ and force it a Bitmap type
var image:Bitmap=loader.content as Bitmap;
I assign ‘true’ to the property ‘smoothing’ of ’image’
image.smoothing=true;
This way, the result is a lot better.
We took out the best we could of an image of 280x187px and of only 8KB!

See you soon!

[guitarman]

Hey Flep,

Thanks so much for your incredible tutorials and help. I'm a 2.0 programmer just now learning 3. I was gonna ask you a question but i figured it out as I was writing this!

Thanks again,

guitarman

[dan.groza]

Hello, Flep
I have just opened a thread about loading external swf, I need to do something the same you did above, but with a swf file instead of an image.

Can you help me? I get an error message when casting from Loader to Bitmap.

Thank you,
Dan

[dan.groza]

Originally Posted by dan.groza

Hello, Flep
I have just opened a thread about loading external swf, I need to do something the same you did above, but with a swf file instead of an image.

Can you help me? I get an error message when casting from Loader to Bitmap.

Thank you,
Dan

PS: I have modified your code:

package
{
import flash.display.MovieClip;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.display.Bitmap;
import flash.display.BitmapData;

public class Main extends MovieClip
{
private var loader:Loader;

private var startWidth:Number;
private var startHeight:Number;


private var image:Bitmap;

public function Main()
{
init();
loadImage();
}

private function init():void
{
stage.frameRate=31;
}

private function loadImage():void
{
var request:URLRequest=new URLRequest('img.jpg'); // it works with image files, but not with swf.
loader=new Loader();
loader.contentLoaderInfo.addEventListener(Event.CO MPLETE,completed);
loader.load(request);
}

private function completed(evt:Event):void
{
addChild(loader);
startWidth=loader.width;
startHeight=loader.height;
loader.addEventListener(Event.ENTER_FRAME,moveMe);


image = loader.content as Bitmap;
image.smoothing=true;
addChild(image);
image.x = 400;

}

private function moveMe(evt:Event):void
{
evt.target.width+=2;
evt.target.height+=2;
if(evt.target.width>stage.stageWidth)
{
evt.target.width=startWidth;
evt.target.height=startHeight;
}
}
}
}

[Flep]

private var image:MovieClip;

...

image = loader.content as MovieClip;
//image.smoothing=true;
addChild(image);
image.x = 400;