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