MinimalComps advanced Color Chooser

Aug 14 2009 Published by under ActionScript, Components, Flash

Well, we have the first major contribution by someone other than myself. Rashid Ghassempouri decided to revamp the color chooser to allow for a color panel popup so you can choose a color with the mouse. Actually, he added all kinds of cool options to it, but in the interest of keeping minimal minimal, I cut it back a bit. 🙂

Anyway, now you can specify “myColorChooser.popup = true;” and you’ll get a default gradient color popup that you can choose just about any color from with a click of the mouse. You can also pass an instance of any display object to the “model” property, and that display object will be used as the popup. Finally, you can specify “popupAlign” as either “top” or “bottom” (ColorChooser.TOP, ColorChooser.BOTTOM), and the popup will appear in that direction. Here’s a bit of a demo:

Get Adobe Flash player

In the third chooser, “BoatImage” is an 100×100 pixel png, embedded as so:

[as][Embed (source=”boats.png”)]
private var BoatImage:Class;[/as]

Finally, here’s the full class for the above demo:

import com.bit101.components.*;

import flash.display.Sprite;

[SWF(backgroundColor=0xeeeeee, width=500, height=320)]
public class Playground extends Sprite
private var cc1:ColorChooser;
private var cc2:ColorChooser;
private var cc3:ColorChooser;
private var cc4:ColorChooser;

[Embed (source=”boats.png”)]
private var BoatImage:Class;

public function Playground()
new Label(this, 10, 10, “No popup (original)”);
cc1 = new ColorChooser(this, 15, 30, 0xff0000, onColor);

new Label(this, 120, 10, “usePopup = true”);
cc2 = new ColorChooser(this, 125, 30, 0xff0000, onColor);
cc2.usePopup = true;

new Label(this, 230, 10, “model = new BoatImage()”);
cc3 = new ColorChooser(this, 235, 30, 0xff0000, onColor);
cc3.model = new BoatImage();

new Label(this, 340, 110, “popupAlign = ColorChooser.TOP”);
cc4 = new ColorChooser(this, 345, 130, 0xff0000, onColor);
cc4.usePopup = true;
cc4.popupAlign = ColorChooser.TOP;


private function onColor(event:Event):void

private function draw():void
graphics.drawRect(10, 200, 100, 100);

graphics.drawRect(120, 200, 100, 100);

graphics.drawRect(230, 200, 100, 100);

graphics.drawRect(340, 200, 100, 100);

This is checked into svn now.

Update: Here are a few more possible images that you can use for popups:

swatch1 swatch2 swatch3

Just download them, embed them in your project or import them to your library, instantiate them and assign the instance to model.

15 responses so far. Comments will be closed after post is one year old.

  • jim says:

    is that boat picture from Amsterdam?

  • Scott says:

    This is actually really cool that you can just use any image you want as the chooser. Gone are the days where we have 2 columns of black padding the grey scale areas!

    Great addition.

  • dVyper says:

    Nice! With the default popup though, it’s not possible to choose a grey color…

  • kp says:

    I’m not sure what the default gradient panel should be. If someone has an ideal one, please send it over.

  • honi says:

    I think it would be usefull if somehow the ColorChooser components always stays on top of other components.

    If you first create a ColorChooser, then create some other component which is position below the ColorChooer (in Y-axis), the ColorChooser’s dropdown displays under the other component.

    Of course you can work around this little problem by creating ColorChooser components at the end, or swapping it’s depth.

  • honi says:

    Sorry to double-comment.
    Another improvement could be that when you open a ColorChooser, you can close the dropdown by clicking anywhere outside the component. Right now I can only close it if I choose a color, or click again in the selected color square. But this last one isn’t very intuitive

  • armen says:

    great addition!
    I just think that when u open pop up and click outside it should close automatically, currently u can close it only by selecting or by clicking again to the color.

  • Jeff says:

    Niceone, way more usefull. On the grey-scale: im no expert, but i guess you could do a grey-scale bar on the side.

    But also note you cannot select a tinted grey-scale, but i reckon on this is because color-space has 3 axis and this is only a smaller part of the gamut.

    This one is nice for bright-colors, but if you’d go full-spectrum you’d need a selector like the default-windows one (or the one in Photoshop) where you have a gradient-slider (usually i have it on brightness) next to the pane.

  • kp says:

    yeah, these are some of the issues that kept me from making the popup in the first place. But since someone else went through the trouble, I figured I’d release it, as it’s still more functional than the original. Will get around to those other fixes. Or, if someone wants to tackle them…

  • Jloa says:

    Dah, i love pixel x-small fonts and minimalism. Your components look just hilarious ! ^_^

  • Brendan says:

    Great components. And the tool is nice too. What would be cool is a mini mxml type of thing that you load and works at runtime instead of compile time. Basically just an xml file that can layout the components and handle simple events for the component type.

  • makc says:

    Re: “I’m not sure what the default gradient panel should be. If someone has an ideal one, please send it over.”

    how about MS Paint one?

  • 0b1kn00b says:

    Why don’t you integrate your components with “Some Random Dude”‘s layout framework? His isn’t relying on anything but display objects. in case you hadn’t seen it. Called coordy.

  • Kontör says:

    Thanks its great