Skip to content
September 11, 2008 / Shrikant Patil

Flex Color Chooser Component : Alternate Flex ColorPicker Component

There is standard ColorPicker component in Flex Framework, which displays the colors in grid format. Some time developer needs to provide users to select color with alternate graphical way. That is what i began to develop a component which display the colors in graphical way and let the user select required color clicking on the graphic representation.

here is the screen shot of the component:
ColorChooser component has three script files;

  • ColorChooser.mxml – Extends PopUpButton – This is main component file. It uses ColorSwatch.as as its PopUp and adds a listener to the ColorSwatch which gets triggered when user clicks on the color swatch, passing the selecting color. It overrides the updateDisplaylist() method to draw a rect with selected color from the ColorSwatch.
  • ColorSwatch.as : extends UIComponent. This UIComponent is used as PopUp for the ColorChooser PopUpButton Component. This class creates three frames of UIComponents a) spectrum – Which is used to draw a gradient colors, using Bitmap class methods. b) overlay – Which is used to draw a bottom up black linear gradient on the spectrum component. c) picker – Which acts as container for both spectrum and overlay. A listener is attached to listen for the click event for the picker, so that the class will dispatch a custom ColorSelectEvent along with the selected color code.
  • ColorSelectEvent.as – A custom Event class which is used to trigger a colorSelected event when user clicks on the colorSwatch, passing the selected color uint value to the listener.

So Here is the codes of all classes:

1) ColorChooser.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:PopUpButton xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
    <mx:Script>
        <!&#91;CDATA&#91;
            import flexScript.ColorSwatch;
            import flexScript.ColorSelectEvent;

            private var drawColor:uint = 0xffffff;

            private function init():void{
                this.setStyle("cornerRadius",0);
                popUp = new ColorSwatch();
                popUp.addEventListener(ColorSelectEvent.COLOR_SELECTED, selectColor);
            }
            public function get selectedColor():String{
                return uintToString(drawColor);
            }
            private function selectColor(e:ColorSelectEvent):void{
                drawColor = e.pickedColor;
                invalidateDisplayList();
                close();
            }
            override protected function updateDisplayList(w:Number, h:Number):void{
                super.updateDisplayList(w,h);
                graphics.beginFill(drawColor);
                graphics.drawRect(0,0,w-20,h);
                graphics.endFill();
            }
            private function uintToString(hex:uint):String {
                var hexString:* = hex.toString(16).toUpperCase();
                var cnt:int = 6 - hexString.length;
                var zeros:String = "";
            for (var i:int = 0; i < cnt; i++) {
                zeros += "0";
            }
                return "#" + zeros + hexString;
            }
        &#93;&#93;>
    </mx:Script>
</mx:PopUpButton>

2) ColorSwatch.as

package flexScript
{
    import flash.display.BitmapData;
    import flash.display.GradientType;
    import flash.events.MouseEvent;
    import flash.geom.Matrix;
    import mx.containers.Canvas;
    import mx.core.FlexSprite;
    import mx.core.UIComponent;
    [Event(name="colorSelected", type="flexScript.ColorSelectEvent")]
    public class ColorSwatch extends Canvas
    {
        private var colorPicker:UIComponent = new UIComponent();
        private var colors:Array = [0xFF0000, 0xFFFF00, 0x00FF00, 0x00FFFF,0x0000FF, 0xFF00FF, 0xFF0000];
        private var alphas:Array = [1, 1, 1, 1, 1, 1, 1];
        private var ratios:Array = [0, 42, 84, 126, 168, 210, 255];
        private var spectrum:UIComponent;
        private var picker:UIComponent = new UIComponent();
        private var SwatchSize:Number = 150;
        private var selectedColor:uint;
        private var tmpDta:BitmapData;

        public function ColorSwatch()
        {
            super();
            width = SwatchSize;
            height = SwatchSize;
            spectrum = drawGradientBox(SwatchSize, colors, alphas, ratios, 0);
            picker.addChild(spectrum);
            colors = [0x000000, 0x000000];
            alphas = [1, 0];
            ratios = [0, 255];
            var overlay:FlexSprite = drawGradientBox(SwatchSize, colors, alphas, ratios, deg2rad(-90));
            picker.addChild(overlay);
            addChild(picker);
            picker.addEventListener(MouseEvent.MOUSE_DOWN, onDown, false,0,true);
        }
        private function drawGradientBox(size:uint, col:Array, alp:Array, rat:Array, matRot:Number):UIComponent{
            var ui:UIComponent = new UIComponent();
            var mat:Matrix = new Matrix();
            var fill:String = GradientType.LINEAR;
            mat.createGradientBox(size,size,matRot,0,0);
            ui.graphics.beginGradientFill(fill,col,alp,rat,mat);
            ui.graphics.drawRect(0,0,size,size);
            ui.graphics.endFill();
            return ui;
        }

        private function onDown(e:MouseEvent):void{
            tmpDta = new BitmapData(SwatchSize, SwatchSize);
            tmpDta.draw(picker);
            if(spectrum.hitTestPoint(parent.mouseX,parent.mouseY,true)){
                selectedColor = tmpDta.getPixel(spectrum.mouseX, spectrum.mouseY);
                dispatchEvent(new ColorSelectEvent(ColorSelectEvent.COLOR_SELECTED,true,false,selectedColor));
            }
        }
        private function deg2rad(deg:Number):Number {
            return deg * (Math.PI/180);
        }
    }
}

3) ColorSelectEvent.as

package flexScript
{
    import flash.events.Event;

    public class ColorSelectEvent extends Event
    {
        public static const COLOR_SELECTED:String = "colorSelected";
        public var pickedColor:uint;
        public function ColorSelectEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false, pColor:uint=0xffffff)
        {
            super(type, bubbles, cancelable);
            this.pickedColor = pColor;
        }
        override public function clone():Event{
            return new ColorSelectEvent(type, bubbles, cancelable, pickedColor);
        }
    }
}

And Here is the sample code using the component:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:com="*" xmlns:flexScript="flexScript.*">
    <flexScript:ColorChooser x="174" y="156" width="46"/>
</mx:Application>

Take care of the package names and placement of the files in packages.

Advertisements

6 Comments

Leave a Comment
  1. Jason / Jan 19 2009 3:43 pm

    Nice component, but have you considered that making selectedColor a string makes it an incompatible drop-in replacement for ColorPicker?

    Also, what license is this released under, or is it public domain?

    Thanks for posting it. Always cool to see what other developers are up to.

    • Shrikant Patil / Jan 20 2009 5:40 pm

      Hi,
      Thanks for your kind comment. I will update the code….so that selected color will be in uint data type.
      It is public domain… you can do anything with this code…..feel free to play with it 🙂

    • Gundoseoz / Nov 28 2009 11:44 pm

      Aloha! slu

  2. Gundostin / Nov 28 2009 11:43 pm

    Aloha! reu

  3. Anshul Goel / Feb 10 2011 8:08 am

    Hi,

    How does one select lighter colors like white in your component?

  4. Andy / Jun 28 2011 5:32 pm

    Hi, I’m new using Flex. How do I place the files and name the packages? Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: