Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Skinning soft "Shake" style buttons in Flex 4

DZone's Guide to

Skinning soft "Shake" style buttons in Flex 4

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.



Many years ago, I used a video compositing application called Shake. One of my memories of the application was its beautifully soft, almost organic, widget set. I thought I'd have a play with Flex skinning to replicate the look.


To create a nice 3D border programmatically, I use Spark Paths to draw four trapezoids which mimic the shape of the mitred parts of a picture frame and act as borders. The top and left borders graduate in colour from the background through near-white to the button face colour. The bottom and right borders also graduate from the background through to the face but through near-black.


A blur to the borders smooths out the colour difference at the corners and gives a nice 3D impression.

When the button is depressed, I swap out the middle gradient colours on the borders to change the effect from an outset button to an inset one. I use an AnimateColor to soften the transition.

The application is available here and the source code here.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}