Re: [Flashcoders] Resizing a background image only.And keeping aspectratio.

2008-02-03 Thread Vlado Krempl

Thanks for the reply,

Cheers,

from
Sydney,
Australia.
- Original Message - 
From: Pedro Kostelec [EMAIL PROTECTED]

To: Flash Coders List flashcoders@chattyfig.figleaf.com
Sent: Sunday, February 03, 2008 10:29 PM
Subject: Re: [Flashcoders] Resizing a background image only.And keeping 
aspectratio.




Perhaps sth like this would work:
original_picture_width=550;
original_picture_height=400;

picture_mc.width=stage.stageWidth;
picture_mc.height=(stage.stageWidth /
original_picture_width)*original_picture_height;

I am not sure it is completely as3, becasue i just started learning it, so
you perhaps should mdify it a bit.
WIth this i think you should keep the aspect ratio


On Feb 3, 2008 4:12 AM, Vlado Krempl [EMAIL PROTECTED] 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?

Thanks.



Vlado

Please consider the environment before printing this e-mail.
The contents of this message should be treated as COMMERCIAL IN 
CONFIDENCE

unless otherwise specified in the message
and is intended solely for the use of the individual or entity to whom it
is addressed.
If you have received this email in error please notify the sender. If you
are not the named addressee you should not disseminate, distribute or 
copy

this e-mail.
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders





--
Pedro D.K.
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders




___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders


Re: [Flashcoders] Resizing a background image only.And keeping aspectratio.

2008-02-03 Thread Vlado Krempl

Thanks for the reply, will give it a go.
Cheers,
from
Sydney, Australia.
- 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
http://www.materiaprima.co.uk/

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?

Thanks.



Vlado



___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders




___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders


Re: [Flashcoders] Resizing a background image only.And keeping aspectratio.

2008-02-03 Thread Vlado Krempl

Kenneth,

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.

http://www.zinkmag.com

Cheers,

vlado


- 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
http://www.materiaprima.co.uk/

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?

Thanks.



Vlado



___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders




___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders


Re: [Flashcoders] Resizing a background image only.And keeping aspectratio.

2008-02-03 Thread Ivan Dembicki
Hello

oops

private function onAddedToStage(e:Event=null):void {
 onStageResize();
}
private function onStageResize(e:Event=null):void {
 picture_mc.width = stage.stageWidth;
 picture_mc.height = stage.stageHeight;
 picture_mc.scaleX = picture_mc.scaleY =
 Math.max (picture_mc.scaleX, picture_mc.scaleY);
}

-- 
iv
http://www.bezier.ru
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders


Re: [Flashcoders] Resizing a background image only.And keeping aspectratio.

2008-02-03 Thread Pedro Kostelec
You mean you want to update it all the time(the image size)?

Try sth like this:




private function init():void {

stage.addEventListener(Event.ENTER_FRAME,onEnterFrame);
}
private function onEnterFrame(event:Event):void {
var picRatio:Number=picture_mc.width / picture_mc.height; //i
took kenneths code!!
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;
}

}


On Feb 3, 2008 2:11 PM, Vlado Krempl [EMAIL PROTECTED] wrote:

 Kenneth,

 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.

 http://www.zinkmag.com

 Cheers,

 vlado


 - 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
  http://www.materiaprima.co.uk/
 
  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?
 
  Thanks.
 
 
 
  Vlado
 
 
  ___
  Flashcoders mailing list
  Flashcoders@chattyfig.figleaf.com
  http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
 


 ___
 Flashcoders mailing list
 Flashcoders@chattyfig.figleaf.com
 http://chattyfig.figleaf.com/mailman/listinfo/flashcoders




-- 
Pedro D.K.
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders


Re: [Flashcoders] Resizing a background image only.And keeping aspectratio.

2008-02-03 Thread Ivan Dembicki
Hello

private function onAddedToStage(e:Event=null):void {
  private function onStageResize();
}
private function onStageResize(e:Event=null):void {
  picture_mc.width = stage.stageWidth;
  picture_mc.height = stage.stageHeight;
  picture_mc.scaleX = picture_mc.scaleY =
  Math.max (picture_mc.scaleX, picture_mc.scaleY);
}


-- 
iv
http://www.bezier.ru
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders


Re: [Flashcoders] Resizing a background image only.And keeping aspectratio.

2008-02-03 Thread Ivan Dembicki
Hello

oops again :)

private function onAddedToStage(e:Event):void {
  onStageResize();
}
private function onStageResize(e:Event=null):void {
  picture_mc.width = stage.stageWidth;
  picture_mc.height = stage.stageHeight;
  picture_mc.scaleX = picture_mc.scaleY =
  Math.min(picture_mc.scaleX, picture_mc.scaleY);
}


-- 
iv
http://www.bezier.ru
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders


Re: [Flashcoders] Resizing a background image only.And keeping aspectratio.

2008-02-03 Thread Kenneth Kawamoto

Vlado,

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
http://www.materiaprima.co.uk/

Vlado Krempl wrote:

Kenneth,

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.

http://www.zinkmag.com

Cheers,

vlado


- 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
http://www.materiaprima.co.uk/

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?

Thanks.



Vlado 


___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders


Re: [Flashcoders] Resizing a background image only.And keeping aspectratio.

2008-02-03 Thread Kenneth Kawamoto

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,
picture_mc.scaleY);
}

private function onLoadInit(e:Event):void {
  picture_mc.addChild(e.target.content);
  minW = picture_mc.width;
  minH = picture_mc.height;
  fillStage();
}

private function onStageResize(e:Event):void {
  fillStage();
}

(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
http://www.materiaprima.co.uk/

Vlado Krempl wrote:

Kenneth,

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


http://experiments.vkd.com.au/

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


Thanks again for all your help.

vlado

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




Vlado,

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
http://www.materiaprima.co.uk/

Vlado Krempl wrote:

Kenneth,

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.

http://www.zinkmag.com

Cheers,

vlado


- 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
http://www.materiaprima.co.uk/

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?

Thanks.



Vlado


___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders