Interactive Linear Gradient Explorer

Linear Gradients in Flex are very powerful, but it’s not necessarily easy to know what values to use. This interactive tool allows you to experiment with adding and configuring as many Gradient Entries as you need so that you can see the effect immediately.

Once you have the effect you want, you can copy the MXML source code below to use in your Flex projects

[kml_flashembed movie=”/flash/LinearGradientExplorer.swf” /]

You need at least two linearGradients. If you don’t specify a ratio for either of them then the effect is a smooth transition from the first colour to the second right through the shape you are trying to fill. This is the same as having a ratio of 0 for the first linearGradient and 1 for the second.

Specifying a ratio tells Flex to start the transition at that point. So setting the ratio of the first linearGradient to 0.5 means that the transtion starts 50% of the way through the shape and continues through to the end (as shown below).

black-50pct<s:LinearGradient rotation="90">
    <s:GradientEntry color="0x000000" ratio="0.5"/>
    <s:GradientEntry color="0xffffff" ratio="1"/>
</s:LinearGradient>

Each extra linearGradient works in the same way, it acts as the destination colour and boundary for the previous transition and the starting point for the next.

In the following example you can see that the shape stays yellow for the first 30%, then transitions from yellow to red by the time it reaches 65% and then transitions from red to blue.

yellow-red-blue-30-65pct<s:LinearGradient rotation="90">
    <s:GradientEntry color="0xffff00" ratio="0.3"/>
    <s:GradientEntry color="0xff0000" ratio="0.65"/>
    <s:GradientEntry color="0x0000ff" ratio="1"/>
</s:LinearGradient>

 

2 thoughts on “Interactive Linear Gradient Explorer”

  1. This is just seemingly doing what I’m looking for, but what do I forget in the code ? I just cannot run a copy of the demo code, I can’t get the rows to move, when I click I get the cell content selected. I think I followed what’s described here.
    Thanks for advice.
    This is what I’ve put in my file…

    1
    One
    some text

    2
    Two
    some text

    3
    Three
    some text

    4
    Four
    some text

    5
    Five
    some text

    6
    Six
    some text

Leave a Reply

Your email address will not be published. Required fields are marked *