Here’s the brief load an external image into Flex, resize it to fit in a container (but don’t make it bigger than the original), center it in the container, and smooth the image to get rid of any aliasing. Sounds like a simple job, slap down a VBox, set vertical and horizontal alignment, add an Image component and set it’s width and height to 100%, grab some handy image smoothing code, you’re done no? No. There’s a issue with every one of those steps.
First up the VBox. If a VBox contains a dynamic image (who’s size is undermined) the VBox will no pick up the Image component’s new size once the image has loaded so it can’t adjust the image to be centered properly.
Next is the Image component, setting the Image Component’s width and height to 100% seems like a good idea until you get an image with smaller dimensions than it’s container. The image will stretch to fit and become blurry. Setting the scaling to false will then not allow images that are larger than the container to scale down. We’ll have to handle image resizing manually.
Finally smoothing, dynamically loaded images do not smooth when you change their size. The solution is to use Ben Longoria’s image smoothing component but it if you don’t set your security model property your app will still crash and burn as you can’t get an image’s properties if the Flash player barfs a security sand box violation (no smoothing and no resizing as you can’t even get contentWidth or contentHeight).
Anyways long story short here is my solution to the problem:
- Don’t set any image component properties before hand, once it’s loaded use it’s ‘complete’ event to resize it.
- Use a Canvas instead of a VBox and handle positioning by hand
- Set a loaderContext for the image, and make sure your cross domain policy is set up correctly
Here’s an example. The top image isn’t centered correctly and it’s aliased because it’s a regular Image component (you can see jaggies on the curves and angles). Right click to view source.
10 Comments
Wow, that is funny you just wrote this blog entry because this exactly solves a current issue of mine. Thanks a lot!
Very nice post, thank you
Thanks! This is just what I was looking for.
That is very helpful! Thanks!
“There’s a issue with every one of those steps.”
That line made me lol — typical flex
thanks for the post.
Hi,
This is a great example, but I was wondering if it is possible that I can resize the image as I drag it and release the mouse, instead of pre-defining the constants of how much the image is to be resized.
Does anyone have any suggestions on this?
So how do you get the dimensions of the loaded image?
This is definitely a great solution. If you want to take care of the vertical spacing and still use a VBox, it’s as simple as nesting the Image inside a Box element and setting a padding left.
To simplify my previous post, it looks like horizontalAlign for a VBox with an image does work correctly now. They must have read your entry!
Thank you ,
this was really helpful!!!