Wipe ButtonSkin

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.

6 Responses to “Wipe ButtonSkin”

  1. [...] m/player.php?id=84″>Introduction to Pixel Bender 2 (from gotoAndLearn() Tutorial Feed) Wipe ButtonSkin (from Tink) Flex Bu [...]

  2. This sample wont compile ‘out of the box’ as the view source download is missing MathUtil and GraphicUtil – only the latter appears in the code repo.

  3. Tink says:

    Thanks Tom

    GraphicUtil isn’t referenced in the code (or not that I can see) and MathUtil was only imported, not used.

    I’ve now removed this import for MathUtil and pushed the new version up to Google Code.

  4. Cheers Tink – the ‘view source’ is still missing the actual skin class though.

  5. Tink says:

    “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.”

    I have only included the source for the example of the skin in use. The source for the skin itself will need to be download from the Google Code repository.

    The reason for this is that in the past it has been a pain updating source found within examples, and also when the source changes, people who have downloaded it get the option to be alerted instead of having to keep checking back on this page.

  6. Wow, great stuff Tink! Thanks — seamless animation btn is very handy.

Leave a Reply