Here’s a skin we built recently for a very popular AIR application.

Like the gingerbread man example this skin has seamless transitions between its different states but instead of using Flash assets, everything is created programmatically.

The skin supports the following styles:

fillColors – an Array of 4 colors (the first 2 used for the background, the last 2 used for wipe)

fillAlphas – an Array of values between 0 & 1 to control the alpha of the fillColors (the first 2 used for the background, the last 2 used for wipe)

fillRatios – an Array of values between 0 & 255 to control the gradient ratios of the fillColors (the first 2 used for the background, the last 2 used for wipe)

topLeftCornerRadius – Number to specify the radius of the top left hand corner

topRightCornerRadius – Number to specify the radius of the top right hand corner

bottomRightCornerRadius – Number to specify the radius of the bottom right hand corner

bottomLeftCornerRadius – Number to specify the radius of the bottom left hand corner

type – String to define the wipe type (“wipeOn” or “wipeOff”)

direction – String to specify the direction of the wipe (“up”, “down”, “left” or “right”)

Most of the above can’t be set on the Button directly due to the way styles are implemented in Flex 3.0 (i.e. styles that belong to a skin are set on the Button itself), but you can easily define them with inline (see example below), or external CSS. You can also use these skins as Tabs due to the fact that you can round the corners individually.

WipeExample

You can get the source code for the example by right clicking in the example above, but the source code for the skin can only be downloaded from our Google Code repository.