advancedcolorpicker.mxml

Flex2StyleExplorer form Adobe

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" styleName="colorPickerPanel" 
	layout="absolute" width="436" height="352" title="Color Picker" creationComplete="onCreationComplete()" showCloseButton="true" close="closeMe();">
	<mx:Script>
		<![CDATA[
			import mx.core.Application;
			import mx.managers.PopUpManager;
			import mx.managers.CursorManager;
			import mx.events.MoveEvent;
			import mx.events.ResizeEvent;
			import mx.events.DragEvent;
			import mx.events.FlexEvent;
			import mx.core.UIComponent;
			import mx.binding.utils.ChangeWatcher;
			import mx.binding.utils.BindingUtils;
			import mx.controls.Alert;
			import flash.utils.getTimer;
			import mx.graphics.GradientEntry;
			import mx.graphics.RadialGradient;
			
			private static const CS_HUE:String = "hue";
			private static const CS_SATURATION:String = "saturation";
			private static const CS_LIGHTNESS:String = "lightness";
			private static const CS_RED:String = "red";
			private static const CS_GREEN:String = "green";
			private static const CS_BLUE:String = "blue";
			
			private static var whatColorSpace:String = CS_HUE;
			
			private static function rgb2int(r:Number, g:Number, b:Number):uint
			{
				return 	uint((Math.round(r*255))<<16) | 
						uint((Math.round(g*255))<<8) | 
						uint(Math.round(b*255));
			}
			
			private static function rgb2hsl(r:Number, g:Number, b:Number):Array
			{
				var H:Number;
	            var S:Number;
	            var B:Number;
	            
	            var cmax:Number = (r > g) ? r : g;
	            if (b > cmax) {
	                cmax = b;
	            }
	            var cmin:Number = (r < g) ? r : g;
	            if (b < cmin) {
	                cmin = b;
	            }
	            B = cmax;
	            if (cmax != 0) {
	                S = (cmax - cmin)/cmax;
	            } else {
	                S = 0;
	            }
	            if (S == 0) {
	                H = 0;
	            } else {
	                var redc:Number   = (cmax - r)/(cmax - cmin);
	                var greenc:Number = (cmax - g)/(cmax - cmin);
	                var bluec:Number  = (cmax - b)/(cmax - cmin);
	                if (r == cmax) {
	                    H = bluec - greenc;
	                } else if (g == cmax) {
	                    H = 2.0 + redc - bluec;
	                } else {
	                    H = 4.0 + greenc - redc;
	                }
	                H = H / 6.0;
	                if (H < 0) {
	                    H = H + 1.0;
	                }
	            }
	            return [ H, S, B ];
			}
			
			private static function hsl2rgb(H:Number, S:Number, B:Number):Array
			{   
	            var r:Number = 0;
	            var g:Number = 0;
	            var b:Number = 0;
	            
	            if (S == 0) {
	                r = B;
	                g = r;
	                b = r;
	            } else {
	                var h:Number = (H - Math.floor(H)) * 6.0;
	                var f:Number =  h - Math.floor(h);
	            
	                var p:Number = B * (1.0 - S);
	                var q:Number = B * (1.0 - S * f);
	                var t:Number = B * (1.0 - (S * (1.0 - f)));
	            
	                switch(Math.floor(h)) {
	                    case 0:
	                        r = B; g = t; b = p;
	                        break;
	                    case 1:
	                        r = q; g = B; b = p;
	                        break;
	                    case 2:
	                        r = p; g = B; b = t;
	                        break;
	                    case 3:
	                        r = p; g = q; b = B;
	                        break;
	                    case 4:
	                        r = t; g = p; b = B;
	                        break;
	                    case 5:
	                        r = B; g = p; b = q;
	                        break;
	                }
	            }
	            return [r,g,b];
			}
			
			private var updateColorSpace:Function = drawHueColorspace;
			private var updateColorSpace2:Function = drawHueColorspace2;

			private var colorArea:Sprite = new Sprite();
			private var blackArea:Sprite = new Sprite();
			private var whiteArea:Sprite = new Sprite();
			
			private var colorArea2:Sprite = new Sprite();
			
			private var pickerHandle:Sprite;
			private var pickerHandleLeft:UIComponent;
			private var pickerHandleRight:UIComponent;
			
			private var draggingPickerHandle:Boolean = false;
			private var draggingPickers2:Boolean = false;
			
			private var hue:Number = 0;
			private var saturation:Number = 1;
			private var lightness:Number = 1;
			
			private var red:Number = 1;
			private var green:Number = 0;
			private var blue:Number = 0;
			
			private var ored:Number = 1;
			private var ogreen:Number = 0;
			private var oblue:Number = 0;
			
			private function initPickerHandle():void
			{
				pickerHandle = new Sprite();
				pickerHandle.graphics.lineStyle(2,0x000000,1);
				pickerHandle.graphics.drawCircle(0,0,4.5);
				pickerHandle.graphics.endFill();
				pickerHandle.graphics.lineStyle(1,0xFFFFFF,1);
				pickerHandle.graphics.drawCircle(0,0,4);
				
				pickerHandle.graphics.lineStyle();
				pickerHandle.graphics.beginFill(0xFFFFFF, 0);
				pickerHandle.graphics.drawRect(-3, -3, 6, 6);
				pickerHandle.graphics.endFill();
				maincp.addChild(pickerHandle);
			}
			
			private function initPickerHandles():void
			{
				pickerHandleLeft = new UIComponent();
                
                pickerHandleLeft.graphics.beginFill(0x000000, .2 );
                pickerHandleLeft.graphics.moveTo(-1,-4);
                pickerHandleLeft.graphics.lineTo( 7, 2);
                pickerHandleLeft.graphics.lineTo(-1, 8);
                pickerHandleLeft.graphics.endFill();
                pickerHandleLeft.graphics.beginFill(0x000000, .2);
                pickerHandleLeft.graphics.moveTo(-1,-5);
                pickerHandleLeft.graphics.lineTo( 7, 1);
                pickerHandleLeft.graphics.lineTo(-1, 7);
                pickerHandleLeft.graphics.endFill();
                pickerHandleLeft.graphics.beginFill(0x000000);
                pickerHandleLeft.graphics.moveTo(-1,-6);
                pickerHandleLeft.graphics.lineTo( 7, 0);
                pickerHandleLeft.graphics.lineTo(-1, 6);
                pickerHandleLeft.graphics.endFill();
                pickerHandleLeft.graphics.beginFill(0xcccccc);
                pickerHandleLeft.graphics.moveTo( 0,-4);
                pickerHandleLeft.graphics.lineTo( 5, 0);
                pickerHandleLeft.graphics.lineTo( 0, 4);
                pickerHandleLeft.graphics.beginFill(0xffffff);
                pickerHandleLeft.graphics.moveTo( 0,-4);
                pickerHandleLeft.graphics.lineTo( 3, -2);
                pickerHandleLeft.graphics.lineTo( 0, 0);
                pickerHandleLeft.graphics.endFill();
                pickerHandleLeft.x = subcp.parent.x+3;
                pickerHandleLeft.y = subcp.parent.y + 2;
                this.addChild(pickerHandleLeft);

                pickerHandleRight = new UIComponent();
                pickerHandleRight.graphics.beginFill(0x000000, .2);
                pickerHandleRight.graphics.moveTo( 4,-4);
                pickerHandleRight.graphics.lineTo(-4, 2);
                pickerHandleRight.graphics.lineTo( 4, 8);
                pickerHandleRight.graphics.endFill();
                pickerHandleRight.graphics.beginFill(0x000000, .2);
                pickerHandleRight.graphics.moveTo( 4,-5);
                pickerHandleRight.graphics.lineTo(-4, 1);
                pickerHandleRight.graphics.lineTo( 4, 7);
                pickerHandleRight.graphics.endFill();
                pickerHandleRight.graphics.beginFill(0x000000);
                pickerHandleRight.graphics.moveTo( 4,-6);
                pickerHandleRight.graphics.lineTo(-4, 0);
                pickerHandleRight.graphics.lineTo( 4, 6);
                pickerHandleRight.graphics.endFill();
                pickerHandleRight.graphics.beginFill(0xcccccc);
                pickerHandleRight.graphics.moveTo( 3,-4);
                pickerHandleRight.graphics.lineTo(-2, 0);
                pickerHandleRight.graphics.lineTo( 3, 4);
                pickerHandleRight.graphics.beginFill(0xffffff);
                pickerHandleRight.graphics.moveTo( 3,-4);
                pickerHandleRight.graphics.lineTo(0, -2);
                pickerHandleRight.graphics.lineTo( 3, 0);
                pickerHandleRight.graphics.endFill();
                pickerHandleRight.x = subcp.parent.x+subcp.parent.width-6;
                pickerHandleRight.y = subcp.parent.y + 2;
                this.addChild(pickerHandleRight);
			}			
			
			private function bringToFront(child:Sprite):void
			{
				var parent:* = child.parent;
				parent.removeChild(child);
				parent.addChild(child);
			}
			
			private function c(num:String, min:Number, max:Number):Number
			{
				var theNum:Number = Number(num);
				
				if ( isNaN(theNum) )
					return NaN;
				
				return Math.min(Math.max(theNum, min), max);
			}
			
			/*
			Getter Functions
			
			You will notice in the getters I am checking if the textbox
			is currently focused, I do this because if I return the actual
			value it interferes with typing because I am clamping the value
			between 0 and 255.
			*/
			
			[Bindable("colorChanged")]
			private function get displayHue():*
			{
				if ( focusManager.getFocus() == t_hue )
				{
					return t_hue.text;
				}
				
				return Math.round( 360*hue );
			}
			
			[Bindable("colorChanged")]
			private function get displaySaturation():*
			{
				if ( focusManager.getFocus() == t_saturation )
				{
					return t_saturation.text;
				}
				
				return Math.round( 100*saturation );
			}
			
			[Bindable("colorChanged")]
			private function get displayLightness():*
			{
				if ( focusManager.getFocus() == t_saturation )
				{
					return t_lightness.text;
				}
				
				return Math.round( 100*lightness );
			}
			
			[Bindable("colorChanged")]
			private function get displayRed():*
			{
				if ( focusManager.getFocus() == t_red )
				{
					return t_red.text;
				}
				return Math.round( 255*red );
			}
			
			[Bindable("colorChanged")]
			private function get displayGreen():*
			{
				if ( focusManager.getFocus() == t_green )
				{
					return t_green.text;
				}
				return Math.round( 255*green );
			}
			
			[Bindable("colorChanged")]
			private function get displayBlue():*
			{
				if ( focusManager.getFocus() == t_blue )
				{
					return t_blue.text;
				}
				return Math.round( 255*blue );
			}
			
			[Bindable("colorChanged")]
			public function get hex():String
			{
				if ( focusManager.getFocus() == t_hex )
				{
					return t_hex.text;
				}
				else
				{
					var hex:String = toHex(displayRed) + toHex(displayGreen) + toHex(displayBlue);
	            	return hex;
   				}
            }
            
            [Bindable("prevColorChanged")]
			public function get prevhex():String
			{
				var hex:String = toHex(Math.round(255*ored)) + toHex(Math.round(255*ogreen)) + toHex(Math.round(255*oblue));
            	return hex;
            }
            
            [Bindable("colorChanged")]
            private function get currentColor():uint
            {
            	return rgb2int(red, green, blue);
            }
            
            [Bindable("colorChanged")]
            private function get previousColor():uint
            {
            	return rgb2int(ored, ogreen, oblue);
            }
            
            //just for reverse compatibility
            public function get lastColor():Number
            {
            	return rgb2int(ored, ogreen, oblue);
            }
            
            public function set lastColor(color:Number):void
            {
            	ored  = ((color>>16)&0xFF)/255;
                ogreen  = ((color>>8)&0xFF)/255;
                oblue  = ((color)&0xFF)/255;
                var hsl:Array = rgb2hsl(ored, ogreen, oblue);
                hue = hsl[0];
                saturation = hsl[1];
                lightness = hsl[2];
          
                dispatchEvent(new Event("colorChanged"));
            }
       		
			
			/*
			Setter Functions
			*/
			private function set displayHue(value:Number):void
			{
				if ( isNaN(value) )
					return;
					
				hue = value/360;
				var rgb:Array = hsl2rgb(hue, saturation, lightness);
				red = rgb[0];
				green = rgb[1];
				blue = rgb[2];
				dispatchEvent(new Event("colorChanged"));
			}
			
			private function set displaySaturation(value:Number):void
			{
				if ( isNaN(value) )
					return;
					
				saturation = value/100;
				var rgb:Array = hsl2rgb(hue, saturation, lightness);
				red = rgb[0];
				green = rgb[1];
				blue = rgb[2];
				dispatchEvent(new Event("colorChanged"));
			}
			
			private function set displayLightness(value:Number):void