Re: [Flashcoders] Resizing a background image only.And keeping aspectratio.
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"
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"
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.
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"
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.
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.
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.
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.
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"
> 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.
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"
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.
Thanks for the reply, will give it a go.
Cheers,
from
Sydney, Australia.
- Original Message -
From: "Kenneth Kawamoto" <[EMAIL PROTECTED]>
To: "Flash Coders List"
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.
Thanks for the reply,
Cheers,
from
Sydney,
Australia.
- Original Message -
From: "Pedro Kostelec" <[EMAIL PROTECTED]>
To: "Flash Coders List"
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
