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:

1. Don’t set any image component properties before hand, once it’s loaded use it’s ‘complete’ event to resize it.

2. Use a Canvas instead of a VBox and handle positioning by hand
3. 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.