Flex 4 Spark RadioButtonSkin Dissected

When I first started trying to skin a radio button I was stumped for a little while because there are so many elements in the skin. It was difficult to tell what each one did and making modifications sometimes resulted in no apparent change. In some cases, this was because I was using a skin containing ActionScript styling. Skins with ActionScript styling can override values set in the skin’s MXML. Until I figured that out I was pretty confused.

However, in other cases, the lack of any visible change was due to the subtlety of the features. For example, the alpha value for the stroke surrounding the circle is 0.011 at its top and 0.121 at its bottom. With that much transparency any change in a 1-pixel stroke is real tough to see. In another case, the change between the color of a fill in the over state (0xBBBDBD) and the down state (0xAAAAAA) is barely perceptible.

The Visible RadioButtonSkin

So, I’ve created a skin called RadioButtonSkinDissected in which I’ve increased the size of many of the features so that they will be easily visible. And I’ve changed the colors to make elements and state changes quite obvious. Also, there is no ActionScript styling code to confuse matters. With so many elements it may still be difficult to see which is which. But now, if you make changes it will be much easier to see the change.

The skin elements in the standard Flex 4 Spark RadioButtonSkin are:

1. Drop shadow
2. (Unselected) fill
3. Fill highlight
4. "layer 6: highlight stroke"
5. Border
6. Dot
7. Label

In some cases, I’ve retained a copy of the original Flex SDK code, commented out, for comparison. Also, most of my comments have my initials (DLS) so you can distinguish between my comments and the original Flex 4 SDK skin comments.

If you can’t see what any given element is doing right away just change its color or turn it off. At this size, the change should be pretty clear, particularly if you take before and after screen shots. Hopefully, this will help you when creating your own RadioButtonSkin.

Download the Flex 4 project (.fxp)

Tagged as: Skinning