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:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.bit-101.com/blog/wp-content/uploads/2009/08/colorchooser.swf” width=”500″ height=”320″ targetclass=”flashmovie”]
[/kml_flashembed]
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:
[as]package
{
import com.bit101.components.*;
import flash.display.Sprite;
import flash.events.Event;
[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;
draw();
}
private function onColor(event:Event):void
{
draw();
}
private function draw():void
{
graphics.clear();
graphics.beginFill(cc1.value);
graphics.drawRect(10, 200, 100, 100);
graphics.endFill();
graphics.beginFill(cc2.value);
graphics.drawRect(120, 200, 100, 100);
graphics.endFill();
graphics.beginFill(cc3.value);
graphics.drawRect(230, 200, 100, 100);
graphics.endFill();
graphics.beginFill(cc4.value);
graphics.drawRect(340, 200, 100, 100);
graphics.endFill();
}
}
}[/as]
This is checked into svn now.
http://code.google.com/p/minimalcomps/
Update: Here are a few more possible images that you can use for popups:
Just download them, embed them in your project or import them to your library, instantiate them and assign the instance to model.
is that boat picture from Amsterdam?
Jim, yes it is. Took it when I was there earlier this year at FiTC.
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.
Nice! With the default popup though, it’s not possible to choose a grey color…
I’m not sure what the default gradient panel should be. If someone has an ideal one, please send it over.
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.
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
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.
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.
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…
Dah, i love pixel x-small fonts and minimalism. Your components look just hilarious ! ^_^
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.
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? http://img90.imageshack.us/img90/3875/mspaint.png
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.
Thanks its great