[flexcoders] Re: Working with images of varying proportions

2009-02-25 Thread byte.sensei 
OK, this works great when I run the application locally, but when I 
upload to the server and run it from there the images aren't being 
resized (no error message - nothing happens). I tracked the problem 
down to:

var img_width:int = img.content.loaderInfo.width;
var img_height:int = img.content.loaderInfo.height;

These statements work fine when running the Flex app locally, but 
they cause the function to stop execution when executing the Flex app 
from the web server. If I place an Alert before these statements it 
displays fine, but if I place an Alert after these statements it 
never shows up.

Any ideas why the content.loaderInfo would work fine locally but end 
up null or undefined when running from the web server? Why the 
difference? What can I do to ensure this works on the server?

Thanks!


--- In flexcoders@yahoogroups.com, byte.sensei byte.sen...@... 
wrote:

 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.chatzinikos@ 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.sensei@ 
 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.Chatzinikos@,

Re: [flexcoders] Re: Working with images of varying proportions

2009-02-25 Thread Charlie Hubbard 
I seem to remember encountering this problem as well a while back.  I think
the problem is that you are accessing the loader's info before the loader
has a chance to finishing loading them.

If you're inside complete event dispatcher you might try callLater() and see
if that works.  I wish I could remember the solution, but it's something
like that.

Charlie


On Wed, Feb 25, 2009 at 10:12 AM, byte.sensei byte.sen...@yahoo.com wrote:

   OK, this works great when I run the application locally, but when I
 upload to the server and run it from there the images aren't being
 resized (no error message - nothing happens). I tracked the problem
 down to:


 var img_width:int = img.content.loaderInfo.width;
 var img_height:int = img.content.loaderInfo.height;

 These statements work fine when running the Flex app locally, but
 they cause the function to stop execution when executing the Flex app
 from the web server. If I place an Alert before these statements it
 displays fine, but if I place an Alert after these statements it
 never shows up.

 Any ideas why the content.loaderInfo would work fine locally but end
 up null or undefined when running from the web server? Why the
 difference? What can I do to ensure this works on the server?

 Thanks!

 --- In flexcoders@yahoogroups.com flexcoders%40yahoogroups.com,
 byte.sensei byte.sen...@...
 wrote:
 
  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 flexcoders%40yahoogroups.com, Fotis
 Chatzinikos
  fotis.chatzinikos@ 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.sensei@
  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.Chatzinikos@,

[flexcoders] Re: Working with images of varying proportions

2009-02-23 Thread oneworld95 
Have you tried taking the width/height off of the component and see
how it handles the images of varying sizes?

- Alex C

--- In flexcoders@yahoogroups.com, 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!

[flexcoders] Re: Working with images of varying proportions

2009-02-23 Thread byte.sensei 
Yes, when I try that the images don't scale into my 160x120 box. The 
images are a wide variety of sizes (e.g. 300x700, 1280x1024, 150x50) 
they are really inconsistent in proportion. When I take off the image 
width/height I get the full image size and not a scaled 160x120 
version.

-Dan


--- In flexcoders@yahoogroups.com, oneworld95 oneworl...@... 
wrote:

 Have you tried taking the width/height off of the component and see
 how it handles the images of varying sizes?
 
 - Alex C
 
 --- In flexcoders@yahoogroups.com, byte.sensei byte.sensei@ 
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!

[flexcoders] Re: Working with images of varying proportions

2009-02-23 Thread byte.sensei 
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...@...,