Home > ActionScript 2.0 > Scaling a dynamic background image in proportion using flash

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.

  1. Stage.align = "TL";
  2. Stage.scaleMode = "noScale";
  3.  
  4. //Get Background Image Container Movie Clip Name (instance)
  5. var backgroundImage:movieClip = "MovieClip Instance Name"
  6.  
  7. // Create an object for the stage listener
  8. stageListener:Object = new Object();
  9.  
  10. // Create a function for the event you want to listen for
  11. stageListener.onResize = function() {
  12.  
  13. //Get the  stage width & height
  14. var sw:Number = Stage.width;
  15. var sh:Number = Stage.height;
  16.  
  17. //Check to see if image width or height needs adjusting
  18. if ((sh / sw) > (backgroundImage._height / backgroundImage._width)) {
  19.  
  20. //get image width and adjust height to fit
  21. scale = backgroundImage._width / backgroundImage._height;
  22. backgroundImage._height = sh;
  23. backgroundImage._width = sh * scale;
  24. } else {
  25.  
  26. //get image height and adjust width to fit
  27. scale =backgroundImage._height / backgroundImage._width;
  28. backgroundImage_width = sw;
  29. backgroundImage._height = sw * scale;
  30. }
  31.  
  32. //Center the background Image
  33. backgroundImage._x = (sw - backgroundImage._width) / 2;
  34. backgroundImage._y = (sh - backgroundImage._height) / 2;
  35.  
  36. };
  37. // Add listener for the Stage object
  38. 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.

  1. 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.

Buy great image scaling software after you learn the roulette slang and online roulette history you need to beat roulette at CasinoBonus.org!

  1. Colin
    August 26th, 2009 at 12:43 | #1

    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!

  2. August 26th, 2009 at 15:01 | #2

    Hi Colin, Are your buttons in .jpg or .png format?

  3. November 15th, 2009 at 17:41 | #3

    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!

  4. December 9th, 2009 at 01:06 | #4

    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.

  5. January 11th, 2010 at 15:51 | #5

    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 ;)

  6. maggie
    March 19th, 2010 at 11:01 | #6

    wow~~ this works great! thanks for sharing!

  7. October 13th, 2010 at 09:07 | #7

    Set your life easier take the credit loans and all you want.

  8. December 27th, 2010 at 06:02 | #8

    “If your struggling just let me know.”
    What I can not believe!

  9. February 28th, 2011 at 07:03 | #9

    Nice Tutorial!

    I’ve written a similar tutorial on how to achieve the same effect without using any JavaScript at all. It’s pure css, nice and simple.

    Check it out:
    http://paulmason.name/blog/item/full-screen-background-image-pure-css-code

  10. May 25th, 2011 at 04:46 | #10

    Great looking tutorial – thanx

  11. February 15th, 2012 at 01:14 | #11

    Cool tutorial! Thanks for posting this. This tutorial will be very useful in some of my projects.

  1. August 26th, 2009 at 16:20 | #1
SEO Powered by Platinum SEO from Techblissonline