BIT-101 [2003-2017]

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.