Thanks for the insight. I did something very similar, although I'm
using HBox/VBox components to layout my app so I had to put a VBox
wrapper around the image like this:
<mx:VBox id="image_01_wrapper" width="100"
height="100%" verticalAlign="middle" horizontalAlign="center">
<mx:Image id="image_01"
source="{'http://media.basspro.com/'+current_product.image_url_01}"
complete="{image_resize(image_01,100,75)}" alpha="0"/>
</mx:VBox>
Then my image_resize() function takes an Image object and desired
width/height as parameters:
private function image_resize
(img:Image,w:int,h:int):void {
var img_width:int =
img.content.loaderInfo.width;
var img_height:int =
img.content.loaderInfo.height;
if (img_width/img_height >= w/h) {
//image is wider than box
proportions - resize based on width
img.width = w;
img.height = w/img_width*img_height;
} else {
//image is taller than box
proportions - resize based on height
img.height = h;
img.width = h/img_height*img_width;
}
//Alert.show(img.width.toString() + "x" +
img.height.toString());
var fade_in:Fade = new Fade();
fade_in.target = img;
fade_in.alphaFrom = 0;
fade_in.alphaTo = 1;
fade_in.play();
}
I also added the fade in tween so that the images gradually fade in
when they have been resized. Anyway, your code below got me going.
Thanks!
-Dan
--- In flexcoders@yahoogroups.com, Fotis Chatzinikos
<fotis.chatzini...@...> wrote:
>
> For something similar i do the following, you should be able to
change it to
> do what you want quite easily..:
>
> <mx:Image
> id="selectedProductImageID"
> verticalCenter="0"
> complete="imageLoaded()"
> source="{selectedPhoto}"
> left="5"
> />
>
> Now the important bit is the "complete="imageLoaded()":
>
> and the imageLoaded function:
>
> private function imageLoaded():void
> {
> if (selectedProductImageID.content.loaderInfo.width
>=
> selectedProductImageID.content.loaderInfo.height)
> {
> selectedProductImageID.width = 330;
> selectedProductImageID.height =
>
330*selectedProductImageID.content.loaderInfo.height/selectedProductIm
ageID.content.loaderInfo.width
> ;
> }
> else
> {
> selectedProductImageID.height = 330 ;
> selectedProductImageID.width =
>
330*selectedProductImageID.content.loaderInfo.width/selectedProductIma
geID.content.loaderInfo.height;
> }
> }
>
> On Mon, Feb 23, 2009 at 9:36 PM, byte.sensei <byte.sen...@...>
wrote:
>
> > I have an app that loads several images into mx:Image tags with
> > scaleContent=true and width=160 / height=120. The problem is not
all of
> > my images have these proportions, and for odd sized images they
end up
> > being loaded into the upper left hand corner instead of centered
in the
> > restricting image box.
> >
> > All I'm trying to do is have a box 160x120 pixels, then load in
images
> > of various sizes dynamically and have them 1) scale to fit within
this
> > box, and 2) render centered vertically/horizontally in this box.
Is
> > there any way I can do this not knowing the actual image sizes
(and
> > using images of different proportions)?
> >
> > Thanks!
> >
> >
> >
>
>
>
> --
> Fotis Chatzinikos, Ph.D.
> Founder,
> Phinnovation
> fotis.chatzini...@...,
>
