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:
The Flash Builder Spark Button control doesn’t come with an icon property out of the box. So you have to extend the Button class and add your own. I created a Spark Skin to add two icons to the Button control, one for the up/disabled state and one for the over/down states.
The Spark ButtonBar control does accommodate an icon, but there is no way to change the icon when the selected index changes. So to change the icon of the selected item, I built a Spark Skin for the ButtonBarButton and the ButtonBar to accomplish the job. Here is the running example of the buttons in action:
This is a little example of how to create a skinned rollover popup on a LinkElement object in Flash Builder 4 (Flex 4) within a TextFlow object. This is something I have been waiting for since 2001. The old way to create a rollover action on an HTML link was to create an invisible MovieClip that floats over your hyperlink. Flex Builder 4 greatly simplifies this by adding rollover, mouse, and click events to all hyperlinks within the TextFlow object. This is a HUGE plus