Scaling a dynamic background image in proportion using flash
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 & height var sw:Number = Stage.width; var sh:Number = Stage.height; //Check to see if image width or height needs adjusting if ((sh / sw) > (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);
Now the the simple line of code that makes this work so well is the quality preservation part. Just add this after your dynamic image has loaded.
backgroundImage.forceSmoothing = true;
An actionscript 3 version would not be much different to this and should be fairly easy to workout. If your struggling just let me know.
Plurk This Post 
Buzz This Post 
Delicious 
Digg This Post 
Ping This Post 
Reddit 
Stumble This Post
hi, I’m doing something similar where I want my buttons to scale depending on the viewer’s browser size…in order to try and minimize distortion. Do you think this code (referrencing my movie clip buttons) will do the trick? thanks!
Hi Colin, Are your buttons in .jpg or .png format?
hey there!
I was hoping you could help me out with some onResize code.. Basically all I have is a MC current size is 1680×980
I need it to scale proportionatly and stop scaling when the browser window is 50% or less than its original size.
This is what I am working with
var stageL:Object = new Object();
stageL.onResize = function() {
}
Stage.addListener(stageL);
Thanks in advance!
Hi Flashnutz,
I have a challenge for you! I’ve always wanted to see this full screen image work a little smarter in that if you feed it a landscape image it will scale it while preserving it’s aspect ratio, AND, also know to scale the image to fill the browser window no matter what size the window… so if the browser was tall and narrow the image would snap to the top and bottom of the screen with the sides scaling off screen. If the browser were short and wide, then the image would snap to the sides with the top and bottom scaling off screen. Portrait images wold work a little differently, so the scrip would need to be able to differentiate between landscape and portrait. Understand? I have a diagram I posted on another Flash forum a long time ago that better explains it. Hit me up if you could please to discuss further if this interests you. I’d love to find a solution.
what happened to:
image._xscale = your_scale_factor;
image._yscale = image._xscale;
or
image._width = 200;
image._yscale = image._xscale;
or
image._height = 200;
image._xscale = image._yscale
above code looks alot more compact,
just need to center the image –> [ _x = (width*.5) - (image._width*.5), _y = (height*.5) - (image._height * .5) ],
and you are on your way
Some people do not really know the correct way to complete the poetry & poets essays paper. Hence, from this moment they will follow your supreme article associated with this post and just do the highest quality research papers of all time.