advancedcolorpicker.mxml

Flex2StyleExplorer form Adobe

				var w:Number = subcp.width;
				var h:Number = subcp.height;
				
				var color1:uint = rgb2int(red, 1, blue);
				var color2:uint = rgb2int(red, 0, blue);
				
				var matrix:Matrix = new Matrix();
				matrix.createGradientBox(w, h, Math.PI/2, 0, 0);
				
				colorArea2.graphics.clear();
				colorArea2.graphics.beginGradientFill(GradientType.LINEAR, [color1, color2], [1, 1], [0, 255], matrix);
				colorArea2.graphics.drawRect(0, 0, w, h);
			}
			
			private function drawBlueColorspace():void
			{
				if ( maincp.contains(whiteArea) )
					maincp.removeChild(whiteArea);
					
				if ( maincp.contains(blackArea) )
					maincp.removeChild(blackArea);
				
				var w:Number = maincp.width;
				var h:Number = maincp.height;
				
				var matrix:Matrix = new Matrix();
				matrix.createGradientBox(w, h, Math.PI/2, 0, 0);
				
				colorArea.graphics.clear();
				for ( var x:int=0; x<w; x++ )
				{
					var endColor:uint = rgb2int(x/w, 0, blue);
					var startColor:uint = rgb2int(x/w, 1, blue);
					colorArea.graphics.beginGradientFill(GradientType.LINEAR, [startColor, endColor], [1, 1], [0, 255], matrix);
					colorArea.graphics.drawRect(x, 0, 1, h);
				}
			}
			
			private function drawBlueColorspace2():void
			{
				var w:Number = subcp.width;
				var h:Number = subcp.height;
				
				var color1:uint = rgb2int(red, green, 1);
				var color2:uint = rgb2int(red, green, 0);
				
				var matrix:Matrix = new Matrix();
				matrix.createGradientBox(w, h, Math.PI/2, 0, 0);
				
				colorArea2.graphics.clear();
				colorArea2.graphics.beginGradientFill(GradientType.LINEAR, [color1, color2], [1, 1], [0, 255], matrix);
				colorArea2.graphics.drawRect(0, 0, w, h);
			}

			private function onCreationComplete():void
			{
				this.x = 250;
				this.y = 140;
				
				initPickerHandle();
				initPickerHandles();
				
				maincp.addEventListener(MouseEvent.MOUSE_OVER, addPickerCursor);
				maincp.addEventListener(MouseEvent.MOUSE_OUT, removePickerCursor);
				
				maincp.addEventListener(MouseEvent.MOUSE_DOWN, startPickerDrag);
				this.addEventListener(MouseEvent.MOUSE_UP, stopPickerDrag);
				this.addEventListener(MouseEvent.MOUSE_MOVE, findColor);
				maincp.addEventListener(MouseEvent.CLICK, findColor);
				
				subcp.addEventListener(MouseEvent.MOUSE_DOWN, startPickers2Drag);
				this.addEventListener(MouseEvent.MOUSE_UP, stopPickers2Drag);
				this.addEventListener(MouseEvent.MOUSE_MOVE, findColor2);
				subcp.addEventListener(MouseEvent.CLICK, findColor2);
				
				maincp.addChild(colorArea);
				subcp.addChild(colorArea2);
				
				changeColorSpace(whatColorSpace);
				addEventListener("colorChanged", onColorChange);
				
				bringToFront(pickerHandle);
				
				dispatchEvent(new Event("colorChanged"));
			}
			
			private function onColorChange(e:Event):void
			{
				updatePickerLocation();
				updateColorSpace();
				updateColorSpace2();
				bringToFront(pickerHandle);
			}
			
			private function restorePreviousColor():void
			{
				red = ored;
				green = ogreen;
				blue = oblue;
				
				var hsl:Array = rgb2hsl(red, green, blue);
				hue = hsl[0];
				saturation = hsl[1];
				lightness = hsl[2];
				
				dispatchEvent(new Event("colorChanged"));
			}
			
			private function addPickerCursor(e:MouseEvent):void
			{
				CursorManager.setCursor(PickerCursor, 2);
			}
			
			private function removePickerCursor(e:MouseEvent):void
			{
				if ( !draggingPickerHandle )
					CursorManager.removeAllCursors();
			}
			
			private function startPickerDrag(e:MouseEvent):void
			{
				//change the docus so all the values update correctly...
				focusManager.setFocus(btnok);
				draggingPickerHandle = true;
			}
			
			private function startPickers2Drag(e:MouseEvent):void
			{
				//change the docus so all the values update correctly...
				focusManager.setFocus(btnok);
				draggingPickers2 = true;
			}
			
			private function findColor(e:MouseEvent):void
			{	
				if ( draggingPickerHandle || e.type == MouseEvent.CLICK )
				{
					//find the color...
					var x:Number = Math.min(Math.max(maincp.mouseX, 0), maincp.width);
					var y:Number = Math.min(Math.max(maincp.mouseY, 0), maincp.height);
					
					var rgb:Array;
					var hsl:Array;
					
					switch ( whatColorSpace )
					{
						case CS_HUE:
						{
							//lightness: vert
							//saturation: horz
							saturation = x/maincp.width;
							lightness = (maincp.height-y)/maincp.height;
							rgb = hsl2rgb(hue, saturation, lightness);
							red = rgb[0];
							green = rgb[1];
							blue = rgb[2];
							break;
						}
						
						case CS_SATURATION:
						{
							//hue: horx
							//lightness: vert
							hue = x/maincp.width;
							lightness = (maincp.height-y)/maincp.height;
							rgb = hsl2rgb(hue, saturation, lightness);
							red = rgb[0];
							green = rgb[1];
							blue = rgb[2];
							break;
						}
						
						case CS_LIGHTNESS:
						{
							hue = x/maincp.width;
							saturation = (maincp.height-y)/maincp.height;
							rgb = hsl2rgb(hue, saturation, lightness);
							red = rgb[0];
							green = rgb[1];
							blue = rgb[2];
							break;
						}
						
						case CS_RED:
						{
							//blue: x, green: y
							blue = x/maincp.width;
							green = (maincp.height-y)/maincp.height;
							hsl = rgb2hsl(red, green, blue);
							hue = hsl[0];
							saturation = hsl[1];
							lightness = hsl[2];
							break;
						}
						
						case CS_GREEN:
						{
							//blue: x, red: y
							blue = x/maincp.width;
							red = (maincp.height-y)/maincp.height;
							hsl = rgb2hsl(red, green, blue);
							hue = hsl[0];
							saturation = hsl[1];
							lightness = hsl[2];
							break;
						}
						
						case CS_BLUE:
						{
							//blue: x, red: y
							red = x/maincp.width;
							green = (maincp.height-y)/maincp.height;
							hsl = rgb2hsl(red, green, blue);
							hue = hsl[0];
							saturation = hsl[1];
							lightness = hsl[2];
							break;
						}
					}
					
					dispatchEvent(new Event("colorChanged"));
					
					pickerHandle.x = Math.min(Math.max(maincp.mouseX, 0), maincp.width);
					pickerHandle.y = Math.min(Math.max(maincp.mouseY, 0), maincp.height);
				}
			}
			
			private function findColor2(e:MouseEvent):void
			{	
				if ( draggingPickers2 || e.type == MouseEvent.CLICK )
				{
					//find the color...
					var y:Number = Math.min(Math.max(subcp.mouseY, 0), subcp.height);
					
					var rgb:Array;
					var hsl:Array;
					
					switch ( whatColorSpace )
					{
						case CS_HUE:
						{
							hue = y/subcp.height;
							rgb = hsl2rgb(hue, saturation, lightness);
							red = rgb[0];
							green = rgb[1];
							blue = rgb[2];
							break;
						}
						
						case CS_SATURATION:
						{
							saturation = (subcp.height-y)/subcp.height;
							rgb = hsl2rgb(hue, saturation, lightness);
							red = rgb[0];
							green = rgb[1];
							blue = rgb[2];
							break;
						}
						
						case CS_LIGHTNESS:
						{
							lightness = (subcp.height-y)/subcp.height;
							rgb = hsl2rgb(hue, saturation, lightness);
							red = rgb[0];
							green = rgb[1];
							blue = rgb[2];
							break;
						}
						
						case CS_RED:
						{
							red = (subcp.height-y)/subcp.height;
							hsl = rgb2hsl(red, green, blue);
							hue = hsl[0];
							saturation = hsl[1];
							lightness = hsl[2];
							break;
						}
						
						case CS_GREEN:
						{
							green = (subcp.height-y)/subcp.height;
							hsl = rgb2hsl(red, green, blue);
							hue = hsl[0];
							saturation = hsl[1];
							lightness = hsl[2];
							break;
						}
						
						case CS_BLUE:
						{
							blue = (subcp.height-y)/subcp.height;
							hsl = rgb2hsl(red, green, blue);
							hue = hsl[0];
							saturation = hsl[1];
							lightness = hsl[2];
							break;
						}
					}
					
					dispatchEvent(new Event("colorChanged"));
				}
			}
			
			private function stopPickerDrag(e:MouseEvent):void
			{
				draggingPickerHandle = false;
				
				if ( maincp.mouseX < 0 || maincp.mouseX > maincp.width )
					removePickerCursor(null);
					
				if ( maincp.mouseY < 0 || maincp.mouseY > maincp.height )
					removePickerCursor(null);
			}
			
			private function stopPickers2Drag(e:MouseEvent):void
			{
				draggingPickers2 = false;
			}
			
			public function getColorRGB():uint
			{
				return rgb2int(red, green, blue);
			}
			
			public function setColorRGB(color:uint):void 
			{
                ored = red = ((color>>16)&0xFF)/255;
                ogreen = green = ((color>>8)&0xFF)/255;
                oblue = blue = ((color)&0xFF)/255;
                var hsl:Array = rgb2hsl(red, green, blue);
                hue = hsl[0];
                saturation = hsl[1];
                lightness = hsl[2];
          
                dispatchEvent(new Event("colorChanged"));
        	}
        	
        	private function cancelMe():void
        	{
        		setColorRGB(rgb2int(ored, ogreen, oblue));
        		PopUpManager.removePopUp(this);
        	}
        	
        	private function closeMe():void
        	{
        		PopUpManager.removePopUp(this);
        	}
        	
        	private function addSwatch():void {
        		mx.core.Application.application.globalColors.push(getColorRGB());
        	}
        	
		]]>
	</mx:Script>
	<mx:Box width="100%" height="100%" backgroundColor="#FFFFFF" backgroundAlpha="0.95"  color="#000000"/>
	<mx:Canvas x="10" y="10" width="259" height="255" borderStyle="inset">
		<mx:Image top="0" bottom="0" left="0" id="maincp" right="0"/>
	</mx:Canvas>
	<mx:Canvas x="277" y="10" width="29" height="255" borderStyle="inset">
		<mx:Image left="0" top="0" bottom="0" right="0" id="subcp"/>
	</mx:Canvas>
	<mx:Canvas x="335" y="24" width="62" height="67" borderStyle="solid" cornerRadius="0" borderColor="#000000" borderThickness="1">
		<mx:Canvas borderStyle="solid" cornerRadius="0" borderColor="#000000" borderThickness="1" left="1" right="1" top="1" backgroundColor="{currentColor}" height="32" id="cvsCurr">
		</mx:Canvas>
		<mx:Canvas borderStyle="solid" cornerRadius="0" borderColor="#000000" borderThickness="1" left="1" right="1" top="32" bottom="1" backgroundColor="{previousColor}" id="cvsPrev" click="restorePreviousColor();">
		</mx:Canvas>
	</mx:Canvas>
	<mx:Label x="335" y="8" text="new" width="62" textAlign="center"/>
	<mx:Label x="335" y="89" text="current" width="62" textAlign="center"/>
	<mx:RadioButton x="325" y="117" width="36" selected="true" id="csHue" groupName="colorspace" click="changeColorSpace(CS_HUE);" tabIndex="1" label="H:" fontWeight="normal" horizontalGap="0"/>
	<mx:Label x="399" y="117" text="掳"/>
	<mx:Label x="399" y="143" text="%"/>
	<mx:Label x="399" y="169" text="%"/>
	<mx:TextInput x="363" y="115" width="34" text="{displayHue}" id="t_hue" change="displayHue=c(t_hue.text, 0, 360);" maxChars="3" tabIndex="7"/>
	<mx:RadioButton x="325" y="143" width="36" id="csSaturation" groupName="colorspace" click="changeColorSpace(CS_SATURATION);" tabIndex="2" label="S:" fontWeight="normal" horizontalGap="0"/>
	<mx:TextInput x="363" y="141" width="34" text="{displaySaturation}" id="t_saturation" change="displaySaturation=c(t_saturation.text, 0, 100);" maxChars="3" tabIndex="8"/>
	<mx:RadioButton x="325" y="169" width="36" id="csLightness" groupName="colorspace" tabIndex="3" label="B:" fontWeight="normal" horizontalGap="0">
		<mx:click>changeColorSpace(CS_HUE);changeColorSpace(CS_LIGHTNESS);</mx:click>
	</mx:RadioButton>
	<mx:TextInput x="363" y="167" width="34" text="{displayLightness}" id="t_lightness" change="displayLightness=c(t_lightness.text, 0, 100);" maxChars="3" tabIndex="9"/>
	<mx:Label x="10" y="288" text="#:"/>
	<mx:TextInput x="29" y="286" width="54" tabIndex="13" id="t_hex" change="handleHexChange();" text="{hex}"/>
	<mx:RadioButton x="325" y="200" width="36" id="csRed" groupName="colorspace" click="changeColorSpace(CS_RED);" tabIndex="4" label="R" fontWeight="normal" horizontalGap="0"/>
	<mx:TextInput x="363" y="198" width="34" text="{displayRed}" change="displayRed=c(t_red.text, 0, 255);" id="t_red" maxChars="3" tabIndex="10"/>
	<mx:RadioButton x="325" y="226" width="36" id="csGreen" groupName="colorspace" click="changeColorSpace(CS_GREEN);" tabIndex="5" label="G:" fontWeight="normal" horizontalGap="0"/>
	<mx:TextInput x="363" y="224" width="34" text="{displayGreen}" id="t_green" change="displayGreen=c(t_green.text, 0, 255);" maxChars="3" tabIndex="11"/>
	<mx:RadioButton x="325" y="252" width="36" id="csBlue" groupName="colorspace" click="changeColorSpace(CS_BLUE);" tabIndex="6" label="B:" fontWeight="normal" horizontalGap="0"/>
	<mx:TextInput x="363" y="250" width="34" text="{displayBlue}" change="displayBlue=c(t_blue.text, 0, 255);" id="t_blue" maxChars="3" tabIndex="12"/>
	<mx:Button x="244" y="286" label="Add Swatch" width="90" tabIndex="22" id="btnswatch" click="addSwatch();" fontWeight="normal"/>
	<mx:Button x="339" y="286" label="OK" width="80" click="closeMe()" tabIndex="21" id="btnok"/>
	<mx:Button x="160" y="286" label="Cancel" width="80" tabIndex="22" id="btncancel" click="cancelMe();" fontWeight="normal"/>
	
	
</mx:TitleWindow>