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



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.
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 }}