Flex Spark Rounded Image and Image Button Controls

I had the pleasure recently of collaborating with Ken Rogers (@pixels4nickels) on a couple of components. I had the need, and probably everyone has at one time or another, of having a image with rounded corners. My other desire was to have an image behave like a button.

So we came up with two components, one is called RoundedImage, this does pretty much what it advertises. It extends the Flex Spark Image control to set a corner radius of the loaded image. The other component is called ImageButton. This extends the Spark Button control and loads an image to create a button with rounded corners, pretty straight forward.

What makes these components nice is that they maintain the aspect ratio of the loaded image by simply setting either a height or width. So if you have a large image and want to scale it proportionally, you just set the width, the height will be scaled maintaining the aspect ratio. If you set both height and width values the loaded image will stretch to fit the dimensions.

Here is a screen shot of the results when setting with, height, or both:

You can take a look at the code for the Rounded Image and the Image Button at the following Gist links:

Michael Ritchie Gist: https://gist.github.com/1627989
Ken Rogers Gist: https://gist.github.com/1625442
Flex FXP File: http://thanksmr.com/examples/imagebuttons/ImageButtons.fxp

Big thanks to Ken for his help working out all the kinks and keeping it simple!

-Mister