Flex Tutorials

Flex Video Tutorials and Examples

flex color chooser component

Labels:

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 usesColorSwatch.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 theColorChooser 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

view plaincopy to clipboardprint?
  1. xml version="1.0" encoding="utf-8"?>  
  2. <mx:PopUpButton xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">  
  3.     <mx:Script>  
  4.          
  5.             import flexScript.ColorSwatch; 
  6.             import flexScript.ColorSelectEvent; 
  7.  
  8.             private var drawColor:uint = 0xffffff; 
  9.  
  10.             private function init():void{ 
  11.                 this.setStyle("cornerRadius",0); 
  12.                 popUp = new ColorSwatch(); 
  13.                 popUp.addEventListener(ColorSelectEvent.COLOR_SELECTED, selectColor); 
  14.             } 
  15.             public function get selectedColor():String{ 
  16.                 return uintToString(drawColor); 
  17.             } 
  18.             private function selectColor(e:ColorSelectEvent):void{ 
  19.                 drawColor = e.pickedColor; 
  20.                 invalidateDisplayList(); 
  21.                 close(); 
  22.             } 
  23.             override protected function updateDisplayList(w:Number, h:Number):void{ 
  24.                 super.updateDisplayList(w,h); 
  25.                 graphics.beginFill(drawColor); 
  26.                 graphics.drawRect(0,0,w-20,h); 
  27.                 graphics.endFill(); 
  28.             } 
  29.             private function uintToString(hex:uint):String { 
  30.                 var hexString:* = hex.toString(16).toUpperCase(); 
  31.                 var cnt:int = 6 - hexString.length; 
  32.                 var zeros:String = ""; 
  33.             for (var i:int = 0; i < cnt; i++) { 
  34.                 zeros += "0"; 
  35.             } 
  36.                 return "#" + zeros + hexString; 
  37.             } 
  38.         ]]>  
  39.     mx:Script>  
  40. mx:PopUpButton>  

2) ColorSwatch.as

view plaincopy to clipboardprint?
  1. package flexScript  
  2. {  
  3.     import flash.display.BitmapData;  
  4.     import flash.display.GradientType;  
  5.     import flash.events.MouseEvent;  
  6.     import flash.geom.Matrix;  
  7.     import mx.containers.Canvas;  
  8.     import mx.core.FlexSprite;  
  9.     import mx.core.UIComponent;  
  10.     [Event(name="colorSelected", type="flexScript.ColorSelectEvent")]  
  11.     public class ColorSwatch extends Canvas  
  12.     {  
  13.         private var colorPicker:UIComponent = new UIComponent();  
  14.         private var colors:Array = [0xFF0000, 0xFFFF00, 0x00FF00, 0x00FFFF,0x0000FF, 0xFF00FF, 0xFF0000];  
  15.         private var alphas:Array = [1, 1, 1, 1, 1, 1, 1];  
  16.         private var ratios:Array = [0, 42, 84, 126, 168, 210, 255];  
  17.         private var spectrum:UIComponent;  
  18.         private var picker:UIComponent = new UIComponent();  
  19.         private var SwatchSize:Number = 150;  
  20.         private var selectedColor:uint;  
  21.         private var tmpDta:BitmapData;  
  22.   
  23.         public function ColorSwatch()  
  24.         {  
  25.             super();  
  26.             width = SwatchSize;  
  27.             height = SwatchSize;  
  28.             spectrum = drawGradientBox(SwatchSize, colors, alphas, ratios, 0);  
  29.             picker.addChild(spectrum);  
  30.             colors = [0x000000, 0x000000];  
  31.             alphas = [1, 0];  
  32.             ratios = [0, 255];  
  33.             var overlay:FlexSprite = drawGradientBox(SwatchSize, colors, alphas, ratios, deg2rad(-90));  
  34.             picker.addChild(overlay);  
  35.             addChild(picker);  
  36.             picker.addEventListener(MouseEvent.MOUSE_DOWN, onDown, false,0,true);  
  37.         }  
  38.         private function drawGradientBox(size:uint, col:Array, alp:Array, rat:Array, matRot:Number):UIComponent{  
  39.             var ui:UIComponent = new UIComponent();  
  40.             var mat:Matrix = new Matrix();  
  41.             var fill:String = GradientType.LINEAR;  
  42.             mat.createGradientBox(size,size,matRot,0,0);  
  43.             ui.graphics.beginGradientFill(fill,col,alp,rat,mat);  
  44.             ui.graphics.drawRect(0,0,size,size);  
  45.             ui.graphics.endFill();  
  46.             return ui;  
  47.         }  
  48.   
  49.         private function onDown(e:MouseEvent):void{  
  50.             tmpDta = new BitmapData(SwatchSize, SwatchSize);  
  51.             tmpDta.draw(picker);  
  52.             if(spectrum.hitTestPoint(parent.mouseX,parent.mouseY,true)){  
  53.                 selectedColor = tmpDta.getPixel(spectrum.mouseX, spectrum.mouseY);  
  54.                 dispatchEvent(new ColorSelectEvent(ColorSelectEvent.COLOR_SELECTED,true,false,selectedColor));  
  55.             }  
  56.         }  
  57.         private function deg2rad(deg:Number):Number {  
  58.             return deg * (Math.PI/180);  
  59.         }  
  60.     }  
  61. }  

3) ColorSelectEvent.as

view plaincopy to clipboardprint?
  1. package flexScript  
  2. {  
  3.     import flash.events.Event;  
  4.   
  5.     public class ColorSelectEvent extends Event  
  6.     {  
  7.         public static const COLOR_SELECTED:String = "colorSelected";  
  8.         public var pickedColor:uint;  
  9.         public function ColorSelectEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false, pColor:uint=0xffffff)  
  10.         {  
  11.             super(type, bubbles, cancelable);  
  12.             this.pickedColor = pColor;  
  13.         }  
  14.         override public function clone():Event{  
  15.             return new ColorSelectEvent(type, bubbles, cancelable, pickedColor);  
  16.         }  
  17.     }  
  18. }  

And Here is the sample code using the component:

view plaincopy to clipboardprint?
  1. xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
  3. layout="absolute" xmlns:com="*" xmlns:flexScript="flexScript.*">  
  4.     <flexScript:ColorChooser x="174" y="156" width="46"/>  
  5. mx:Application>  

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

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Welcome! Flex Video Tutorials

Flex Video Tutorials on Flash, Flex and AIR with ActionScript 3.0 . You will aslo find the source of each tutorials. Visit: Flex Showcase | Flex Examples

Sponsors

Latest Flex Tutorials

Loading...