Posts Tagged ‘button’


Spark Icon Button with Gradient effects and Filter animation, colorized by styles. Flex 4 (Gumbo)

update: Check this example for a more advanced and generic approach

Here’s an example of a Spark Icon Button done in Flex 4. There are smooth transitions on the background gradient between the up and over states. From the over state to the down state the shadows are removed smoothly. Each button has a different base color.

Spark Icon Buttons with transitions

Click here for a demo.

Apart from the new skinning architecture there are a couple of (more…)


Custom Component in Flex 4 (Gumbo). A Knob Button - part 1.

February 26, 2009. Posted by Andy Hulstkamp in Actionscript 3, FXG, Gumbo (Flex 4 beta). 9 Comments »
Keywords: , , , , ,

In this and this post I had a look at skinning components in Flex 4. Here I had a go at creating a simple custom component in Flex 4 (Gumbo) from scratch. The goal was to create a simple knob-button like those found on many softsynths.

The user clicks the button and drags the mouse to adjust the value. The advantage of a knob compared to a slider is that it needs much less screen estate and could be more intuitive in specific contexts to control a value.

Custom Knob Component

click here to view the demo. Full source at the end of this post.

Creating a custom visual component in Flex 4 is similar to the procedure in Flex 3 but states and skins are handled differently (in a much better and cleaner way). Basically we need to (more…)