Flex Improved Image Component- Advanced resizing, aligning, and fitting functionality

Published 2010-10-10 By Florin Horne

ImageEx, CommitHandler and 

We prepared an small demo using three basic and easy concepts of our framework: ImageEx, CommitHandler and ImageCacheManager.

This is a version modified for easy and fast implementation and further usage in your own projects.

Description for demo:


ImageEx contains resize functionality for the BitmapData received from ImageCache class like:

  • basic resize – without keeping the aspect ratio (scale = true)
  • scale and keep the aspect ratio of the image – scale the content as long as it’s possible without losing image information  (scale = true,  maintainAspect=true)
  • scale and fit the image – scale the content as long as it’s possible in such a way that the whole drawing area to be filled by losing image information (cropping) (scale=true, fit=true)

and also alignment in the case which there is some available space around the image: vertical top, middle and bottom;  horizontal left, center and right


A small simple concept for optimizing the drawing in this case of an image, by listening to a Timer event which will be surely executed much later after a series of 5 or 10 properties called one after another, thanks to the false ActionScript3 asynchronous Timer functionality. See theImageEx for better understanding in commit() method and follow using trace console in debug mode for “drawings” values when click the Reset properties button.

ImageCacheManager (ImageCache)

Class that enables static caching of  loaded image in you application, an useful feature that must be seen in a DataGrid render for example when scrolling many images rows.

Please be careful because some extra functionality that was strongly tied to our framework was stripped, so please feel free to customize this code for your own implementation.

Click here to view example in a new window


No comments

Comments are closed for this article.