Mariosh » Blog Archive » Gradient Editor

Gradient Editor

September 13, 2008, 8:36 pm

Gradient Editor is a component you are probably familiar with from Flash, Photoshop, Fireworks. Unfortunately, there was no such prebuilt component included with Flex Builder. So here you go, i built one. Feel free to use it in your own projects.

You can add gradient colors by clicking on rectangular gradient area. To remove gradient color simply press slider thumb, move below component and release mouse.

View the app here(or click on a screenshot above).
View the source here
Download the source

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    xmlns:components="com.mariosh.components.*"
    backgroundColor="#FFFFFF"
    backgroundGradientAlphas="1,1"
    xmlns:local="*" viewSourceURL="srcview/index.html">

    <components:GradientEditor id="gEditor"
        width="200"
        height="50"
        x="32"
        y="40"
        colors="[0xff0000, 0x000000]"
        alphas="[.5, 1]"
        ratios="[100, 255]"/>
    <mx:HSlider
        minimum="0"
        maximum="1"
        change="gEditor.selectedAlpha=event.value"
        x="62"
        y="99"
        value="{gEditor.selectedAlpha}"/>
    <mx:ColorPicker id="cPicker"
        x="32"
        y="98"
        change="gEditor.selectedColor=cPicker.selectedColor"
        selectedColor="{gEditor.selectedColor}"/>
</mx:Application>

Category: Components | Comment (RSS) | Trackback

11 Comments

Simon Gladman:

Thanks for this - very useful. I’ve just plugged it into my CFD demo to define colors for pseudo color rendering.

FYI: http://flexmonkey.blogspot.com/2009/02/falsepseudo-colour-rendering-of-flex.html

Best wishes,

Simon
February 20, 2009, 2:49 am
Erno:

This looks great! Cant wait when I need it! Thanks for open source!
February 20, 2009, 6:22 pm
Nako Ruru:

hi man,
I really like it. But I found a problem that how can other components listen the events of gradient editor? I tried “thumbChange”, “selectedColorChange” & “selectedAlphaChange”, none of them can work. I believe “set selectedColor” should call “set colors”, and “set selectedAlpha” should call set “set alphas”, in this way can synchronized selected color with colors.

Thanks,
Nako Ruru
February 21, 2009, 2:10 am
Composant Flex - Editeur de dégradé (Flex Gradient Editor) - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3:

[...] Voir la page de l’auteur officielle de ce composant [...]
February 23, 2009, 4:38 pm
Adobe Flex Tutorial:

Great Component, thanks for sharing it
I made a little review (french) on my blog:
http://www.flex-tutorial.fr/2009/02/23/composant-flex-editeur-de-degrade-flex-gradient-editor/
February 23, 2009, 4:42 pm
Mariosh:

Hi Nako Ruru,
I updated the gradient component. Now You can listen for ’selectedColorChange’ and ’selectedAlphaChange’ events.
Thanks,
Mariosh
February 24, 2009, 8:16 am
Mariosh:

Great tutorial, i wish i could understand french :).
Thanks,
Mariosh
February 24, 2009, 8:21 am
Nako Ruru:

many thanks, I will have a try.
February 24, 2009, 9:39 pm
Nako Ruru:

I still found a problem.
if “set selectedColor(value:uint)” is called, why not update _colors?
February 25, 2009, 12:09 am
Mariosh:

Selected color in gradient editor is updated when selectedColor(value:uint) property is changed. If you need to change 2 or more colors at the same time, use colors(value:Array) property.
February 25, 2009, 9:22 am
Justin J. Moses:

Really nice component - absolutely fantastic work.
March 5, 2009, 1:26 am