Scale Image In Proprtion

Scaling a dynamic background image in proportion using flash

August 13th, 2009

6 comments

Recently I was playing around with scaling background images and had issues with how the scaling behaved and image quality. When scaling an image in proportion you want to make sure that the image container is centered to the movie clip it belongs to.

My example below is the scaling code within a stage listener which will re size the background image according to the stage width & height.

Stage.align = "TL";
Stage.scaleMode = "noScale";
 
//Get Background Image Container Movie Clip Name (instance)
var backgroundImage:movieClip = "MovieClip Instance Name"
 
// Create an object for the stage listener
stageListener:Object = new Object();
 
// Create a function for the event you want to listen for
stageListener.onResize = function() {
 
//Get the  stage width &amp; height
var sw:Number = Stage.width;
var sh:Number = Stage.height;
 
//Check to see if image width or height needs adjusting
if ((sh / sw) &gt; (backgroundImage._height / backgroundImage._width)) {
 
//get image width and adjust height to fit
scale = backgroundImage._width / backgroundImage._height;
backgroundImage._height = sh;
backgroundImage._width = sh * scale;
} else {
 
//get image height and adjust width to fit
scale =backgroundImage._height / backgroundImage._width;
backgroundImage_width = sw;
backgroundImage._height = sw * scale;
}
 
//Center the background Image
backgroundImage._x = (sw - backgroundImage._width) / 2;
backgroundImage._y = (sh - backgroundImage._height) / 2;
 
};
// Add listener for the Stage object
Stage.addListener(stageListener);