I don't know how you are loading/adding the image to the Stage, but just
fire image resize command as soon as the image is ready. For example:

private function fillStage():void {
  picture_mc.width = Math.max(stage.stageWidth, minW);
  picture_mc.height = Math.max(stage.stageHeight, minH);
  picture_mc.scaleX = picture_mc.scaleY = Math.max(picture_mc.scaleX,

private function onLoadInit(e:Event):void {
  minW = picture_mc.width;
  minH = picture_mc.height;

private function onStageResize(e:Event):void {

(this example is using Loader to load the image and adding it to picture_mc)

By the way your HTML does not display Flash content on Firefox (Mac).

Kenneth Kawamoto

Vlado Krempl wrote:

Your script is perfect.
Except this happens........click the link. (It doesn't resize until you adjust the browser.)


I have set the html to percent 100% width and length.

Thanks again for all your help.


----- Original Message ----- From: "Kenneth Kawamoto" <[EMAIL PROTECTED]> To: "Vlado Krempl" <[EMAIL PROTECTED]>; "Flash Coders List" <flashcoders@chattyfig.figleaf.com>
Sent: Monday, February 04, 2008 3:14 AM
Subject: Re: [Flashcoders] Resizing a background image only.And keeping aspectratio.


The site you're referring is slightly different, i.e. my code shows ALL
regions of the image while maintaining the aspect ratio, but the site
fills the Stage and crops the image if the Stage aspect ratio does not
match the image's. There is also a "minimum width/height" of the image and the image does not get smaller than that width.

Ivan's approach is good but it's Math.max(), not Math.min() I believe.

Here's the revised code:

private const MINW:uint = 1024;
private const MINH:uint = 768;

private function onStageResize(e:Event = null):void {
   picture_mc.width = Math.max(stage.stageWidth, MINW);
   picture_mc.height = Math.max(stage.stageHeight, MINH);
picture_mc.scaleX = picture_mc.scaleY = Math.max(picture_mc.scaleX, picture_mc.scaleY);
   picture_mc.x = Math.floor((stage.stageWidth - picture_mc.width)/2);
   picture_mc.y = Math.floor((stage.stageHeight - picture_mc.height)/2);

(You could add where to "anchor" the image too, so that eyes are always seen, for example.)

Kenneth Kawamoto

Vlado Krempl wrote:

Works fantastic. Thanks.
One problem though, in the browser ( IE ) the image shows up small and only resizes when you adjust the browser. Is it possible to have the image in the browser and have the image touching the sides at all times.
Here is a great example site.




----- Original Message ----- From: "Kenneth Kawamoto" <[EMAIL PROTECTED]>
To: "Flash Coders List" <flashcoders@chattyfig.figleaf.com>
Sent: Sunday, February 03, 2008 11:03 PM
Subject: Re: [Flashcoders] Resizing a background image only.And keeping aspectratio.

It could be cleaner, but here we go:

private function onStageResize(e:Event):void {
  var picRatio:Number = picture_mc.width/picture_mc.height;
  var stageRatio:Number = stage.stageWidth/stage.stageHeight;
  if(picRatio > stageRatio){
     picture_mc.width = stage.stageWidth;
     picture_mc.height = picture_mc.width/picRatio;
  } else {
     picture_mc.height = stage.stageHeight;
     picture_mc.width = picture_mc.height*picRatio;

Kenneth Kawamoto

Vlado Krempl wrote:
Hello everyone,

Question:  (Using actionscript 3)
How to scale just the background image (photograph) fullscreen in the browser but still keep it's aspect ratio. All the solutions on the internet seem to still be in Actionscript 2. I'm using the code below - ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

stage.addEventListener(Event.RESIZE, onStageResize);
 function onStageResize(event:Event):void {

picture_mc = ???? }

I've tried stage.stagewidth and scaleX = stage.width; but they all distort the image when resized.

Anyone have a clue?



Flashcoders mailing list

Reply via email to