Farbe mit AS3 / ColorTransform

Hier geht es um das Einfärben oder um Farbveränderungen von MC- oder Sprite-Instanzen mit Flash Actionscript 3. Man benötigt wie in AS2 auch hier ein ColorTransform Object.

Siehe dazu auch die AS3 Referenzen
flash.geom.ColorTransform
flash.geom.Transform
flash.display.DisplayObject.transform

Farben als uint oder hex oder was ist dieser dezimale uint Farbwert in Flash?

Farben können als uint oder hex Werte definiert werden. Siehe dazu auch folgenden Tipp im Netz.
Zum Thema RGB und Farbmodelle hab ich auch einges geschrieben.
Umrechnungen in meinem AS2 Tipp

RGB besteht aus 3 Farbwerten für Rot Grün und Blau mit jeweils einem Wert von 0 bis 255. Diese Zahl ist die höchste zweistellige Zahl im Hexadezimalsystem FF.
Der Farbwert ist allerdings ein Wert, wobei in Hexadezimal die letzten beiden Stellen für Blau, die mittleren für Grün und die ersten beiden Stellen für Rot reserviert sind. Diesen uint Farbwert kann man als Hex-Wert aber auch als Dezimalwert darstellen. Ich hatte anfangs Probleme das zu verstehen, geholfen hat mir folgendes Beispiel.

Ein Beispiel:
Drei dreistellige Werte in einer Zahl dargestellt. Der mindere Wert1 bleibt wie er ist der zweite, wird mit 1000 multipliziert, wert3 wird mit 1 Mill multipliziert. Diese 3 Werte werden addiert.

Stellen wir uns vor wir hätten 2 Werte, die man in einer Zahl darstellen will. Die Werte sind jeweils eine dreistellige Zahl. So könnte man für einen der beiden Werte die Stellen von 0 bis 999 reservieren und für die zweite Zahl die tausender Stellen, also von 1000 bis 999000. Das gleiche kann man sich natürlich auch mit 3 oder mehr Zahlen vorstellen, indem man einfach nochmal die Zahlen von 1Mill bis 999 Millionen reserviert. Man könnte auch damit rechnen, indem man für einen Wert alles im Tausenderbereich rechnet. Dazu muss man den Wert einfach mit 1000 multiplizieren.

Auf diese Weise wird dieser Hexadezimale Farbwert erzeugt. Wenn man das in dezimal umrechnet, hat man die ersten 256 Werte für blau, das entspräche in meinem Beispiel den Stellen 0 bis 999, dann folgen die nächsten Stellen für grün. Allerdings kann man das im Dezimalsystem nicht so schön sehen, denn es geht ja bei 256 weiter und nicht bei der vierstelligen Zahl 1000. So hätte die Farbe Grün 00FF00 den Dezimalwert 65280 und die Farbe Rot FF0000 den Wert 16.711.680. Die Farbe Gelb FFFF00 könnt ihr ja nun selber ausrechnen, indem Ihr Rot und Grün addiert und Blau 0000FF ist sowieso klar, das ist natürlich 255.

Nun mal ein Rechenbeispiel. Die Farbe Grün=30 / Rot=0 / Blau=0 (001E00) möchte ich als Dezimalzahl haben. Grün liegt in der Mitte. Bei meinem ersten Beispiel musste ich die Zahl mit 1000 multiplizieren, hier muss ich die Zahl mit 256 multiplizieren. 30 x 256 = 7680. Das ist der Hexwert 1E00 und der Wert 30 ist der hexWert 1E. Man sieht es funktioniert.

Die erste fünfstellige Zahl in Hex (FFFF+1=10000) ist in Dez 65536. Also müssen wir, um den Rotwert zu erhalten, ihn mit dieser Zahl multiplizieren. In Dez ist 30 x 65536 = 1966080 das ist in Hex 1E0000.

Ich hoffe das ist einigermaßen anschaulich erklärt.

Die Farbe Rot im Arbeitsspeicher der Grafikkarte

Wie kann man mit diesen Hexwerten rechnen?

Im Dezimalsystem habe ich 10 Zeichen von 0 bis 9. Im Dezimalsystem mulitpliziere ich mit 10, um die Zahl zu erhalten, die eine Stelle mehr hat. 1x10=10, 10x10=100 etc.

Im Hexsystem habe ich 16 Zeichen, von 0-F. Da mulitipliziere ich mit 16 um die Zahl zu erhalten die eine Stelle mehr hat. Allerdings müsste es korrekterweise heißen ich mulitpliziere mit der 10 des Hexsystems, welche der 16 im Dezimalsystems entspricht. Dann erhalte ich folgende Zahlen.

Die Grafikkarte zerlegt die ersten 24 Bit einer Speicherstelle in drei 8ter Gruppen (=Bytes). Das minderwertige Byte für Blau etc.
Das ist unübersichtilich. Man unterteilt für die menschliche Lesbarkeit nochmal jede Farbe in 4er Gruppen und schreibt diese als Hexwerte.

Dezimalwert in Hex mit folgender Funktion

meineZahl.toString(16)

ColorTransform Objekt

Über die Eigenschaft color legt man einen Farbwert fest und kann dann ein Objekt mittels transform einfärben. Im folgenden Beispiel kann der unveränderte MC jede beliebige Farbigkeit haben, er wird dann komplett eingefärbt.

Farbveränderung / Farben transformieren

Nicht immer möchte man ein Objekt komplett einfärben, sondern stattdessen die ursprünglichen Farben transformieren. Das geschieht im folgenden Beispiel. Unter 1 werden die Parameter des ColorTransform Objects im Konstruktor übergeben. Unter 2 werden sie über Eigenschaften definiert. Der unveränderte MC hat eine weiße Füllfarbe und eine schwarze Outline.

Siehe dazu auch meinen AS2 Tipp Color. Dort wird das Thema weitaus umfangreicher behandelt.

Die 3 Parameter für red-, green- und blueMultiplier, hier newR, newG, newB

RGB Farbregler

Hier werden die Farben über eine Slider Komponente interaktiv definiert. Beachte, dass auch hier der ursprüngliche Movieclip eine weiße Füllfarbe haben muss.

import fl.events.SliderEvent;

//------------------------------------------------------

var r:uint=0;
var g:uint=0;
var b:uint=0;

var newR:Number=1/255*r;
var newG:Number=1/255*g;
var newB:Number=1/255*b;

var hue:Number;
var saturation:Number;
var brightness:Number;

var farbTransform:ColorTransform = new ColorTransform();


//------------------------------------------------------

function init():void {

	rAnzeige.text=String(r);
	gAnzeige.text=String(g);
	bAnzeige.text=String(b);

	farbTransform.redMultiplier=newR;
	farbTransform.greenMultiplier=newG;
	farbTransform.blueMultiplier=newB;

	rechteck_mc.transform.colorTransform=farbTransform;

	
}

//------------------------------------------------------

function changeRed(event:SliderEvent):void {
	r=event.currentTarget.value;
	newR=1/255*r;
	rAnzeige.text=String(event.currentTarget.value);
	farbTransform.redMultiplier=newR;
	rechteck_mc.transform.colorTransform=farbTransform;

}

//------------------------------------------------------

function changeGreen(event:SliderEvent):void {
	g=event.currentTarget.value;
	newG=1/255*g;
	gAnzeige.text=String(event.currentTarget.value);
	farbTransform.greenMultiplier=newG;
	rechteck_mc.transform.colorTransform=farbTransform;
	
}

function changeBlue(event:SliderEvent):void {
	b=event.currentTarget.value;
	newB=1/255*b;
	bAnzeige.text=String(event.currentTarget.value);
	farbTransform.blueMultiplier=newB;
	rechteck_mc.transform.colorTransform=farbTransform;
	
}

//------------------------------------------------------

rSlider.addEventListener(SliderEvent.CHANGE, changeRed);
gSlider.addEventListener(SliderEvent.CHANGE, changeGreen);
bSlider.addEventListener(SliderEvent.CHANGE, changeBlue);

//------------------------------------------------------

init();

Funktion Farbe zu Schwarz Weiß

Aus dem RGB Farbwert wird ein Helligkeitswert für ein Schwarzweißbild errechnet. Als Parameter wird ein Hexwert erwartet.

function colToBW(val) {
	
var col:Array = new Array();
var red:uint;
var green:uint;
var blue:uint;
var val:uint;
var brightness:uint;

col.red = (val >> 16) & 0xFF;
col.green = (val >> 8) & 0xFF;
col.blue = val & 0xFF;

brightness=(col.red + uint(col.green) + uint(col.blue))/3;

return brightness;
}



var bw:uint = colToBW(0xFFFF00);
trace(bw);

Hex zu RGB

In dieser Funktion wird ein Hexwert erwartet. Es werden die Werte für Rot, Grün und Blau als Dezimalzahlen zurückgegeben.

function hexToRGB(val) {
var col:Array = new Array();
var red:uint;
var green:uint;
var blue:uint;
var val:uint;
col.red = (val >> 16) & 0xFF;
col.green = (val >> 8) & 0xFF;
col.blue = val & 0xFF;
return col;
}


var rgb:Array = hexToRGB(0xFFFF00);
trace(rgb.red);
trace(rgb.green);
trace(rgb.blue);

Gradient / gradientFill

Füllungen mit Farbverläufen definieren. Siehe auch drawRect bei Adobe und meinen Tipp Grafiken zeichnen

AdjustColor / Farbton Sättigung Helligkeit Kontrast

Mit dem ColorMatrix Filter kann man Farben gezielt verändern. Mit der AdjustColor Klasse hat man sogar die Möglichkeit die Farben nach dem HSB Prinzip in Flash zu verändern. Viele kennen wahrscheinlich die Funktion Farbton/ Sättigung aus Photoshop oder anderen Programmen, wo man die Möglichkeit hat die Farbton-, Sättigung- und/oder Helligkeitswerte eines Bildes zu verändern. Diese Möglichkeiten zusammen mit der Kontrastregelung hat man nun auch in AS3 mit AdjustColor. Siehe dazu die Adobe Referenzen

Die Werte reichen bei Farbton von -180 bis +180 bei den anderen drei Parametern von -100 bis +100. Man muss alle 4 Parameter definieren, sonst funktioniert es nicht.

Im folgenden Beispiel wird ein Bild folgendermaßen verändert:

Normal / Farbton / Sättigung / Helligkeit / Kontrast

package 
{
	import flash.display.DisplayObject;
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.filters.ColorMatrixFilter;
	import flash.net.URLRequest;
	import fl.motion.AdjustColor;

	public class ColorMatrixFilterExample extends Sprite
	{
		private var size:uint=150;
		private var url:String="Image.jpg";

		public function ColorMatrixFilterExample()
		{
			buildChild(null);
			buildChild(applyHue);
			buildChild(applySaturation);
			buildChild(applyBrightness);
			buildChild(applyContrast);
		}

		private function buildChild(loadHandler:Function):void
		{
			var loader:Loader = new Loader();
			loader.x=numChildren*size;
			loader.y=10;
			loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
			if (loadHandler!=null) {
				loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadHandler);
			}

			var request:URLRequest=new URLRequest(url);
			loader.load(request);
			addChild(loader);
		}

		private function applyContrast(event:Event):void
		{
			var child:DisplayObject=DisplayObject(event.target.loader);
			var adCol:AdjustColor = new AdjustColor();
			
			adCol.hue=0;//-180 und 180;
			adCol.brightness=0;//-100 100;
			adCol.contrast=100;//-100 100
			adCol.saturation=0;//Saturation-100 und 100

			var matrix:Array=adCol.CalculateFinalFlatArray();

			applyFilter(child, matrix);
		}

		private function applyHue(event:Event):void
		{
			var child:DisplayObject=DisplayObject(event.target.loader);
			var adCol:AdjustColor = new AdjustColor();

			adCol.hue=150;//-180 und 180;
			adCol.brightness=0;//-100 100;
			adCol.contrast=0;//-100 100
			adCol.saturation=0;//Saturation-100 und 100

			var matrix:Array=adCol.CalculateFinalFlatArray();

			applyFilter(child, matrix);
		}

		private function applyBrightness(event:Event):void
		{
			var child:DisplayObject=DisplayObject(event.target.loader);
			var adCol:AdjustColor = new AdjustColor();


			adCol.hue=0;//-180 und 180;
			adCol.brightness=50;//-100 100;
			adCol.contrast=0;//-100 100
			adCol.saturation=0;//Saturation-100 und 100

			var matrix:Array=adCol.CalculateFinalFlatArray();

			applyFilter(child, matrix);
		}

		private function applySaturation(event:Event):void
		{
			var child:DisplayObject=DisplayObject(event.target.loader);
			var adCol:AdjustColor = new AdjustColor();
			adCol.hue=0;//-180 und 180;
			adCol.brightness=0;//-100 100;
			adCol.contrast=0;//-100 100
			adCol.saturation=100;//Saturation-100 und 100
			var matrix:Array=adCol.CalculateFinalFlatArray();
			applyFilter(child, matrix);
		}


		private function applyFilter(child:DisplayObject, matrix:Array):void
		{
			var filter:ColorMatrixFilter=new ColorMatrixFilter(matrix);
			var filters:Array = new Array();
			filters.push(filter);
			child.filters=filters;
		}

		private function ioErrorHandler(event:IOErrorEvent):void
		{
			trace("Unable to load image: " + url);
		}
	}
}

Color Picker with HSB

Auf der Suche nach einer Color Picker Komponente zum freien download habe ich immer wieder die Color Picker gefunden, die aus einem Bild ein BitmapData Objekt erzeugen und daraus dann mit getPixel die Farbwerte herauslesen. Wie das geht seht ihr in meinem Tipp BitmapData Leider erfüllen die Bilder die dort benutzt werden nicht meine Ansrpüche, denn gerade Pastelltöne, also die Farben die nahe einem Grauwert liegen, kann man aus den Farbbildern nicht herausholen. Daher habe ich mir eine Lösung gebastelt, wo ich die Sättigung der Farbe mittels Sliderkomponente einstellen kann. Die Farben werden auch nicht aus einem Jpg geholt sondern in Flash mittels setPixel in ein BitmapData Objekt gesetzt. Dadurch erhält man alle Farben, die es so gibt im Farbsystem. Einen großen Teil des Codes habe ich von Zevan bei Actionsnippets übernommen, vielen Dank dafür.

Erstellt und importiert meine ColorPick.as. Es befindet sich ein dynamisches Textfeld names "anzeige" auf der Bühne, um die Funktionsweise des EventDispatcher zu demonstrieren. Über die Variable rgb kann man auf die ausgewählte Farbe zugreifen.

 


package 
{

	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.*;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.display.GradientType;
	import flash.display.SpreadMethod;
	import flash.geom.ColorTransform;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFieldAutoSize;
	import flash.text.AntiAliasType;
	import flash.text.TextFormatAlign;
	import flash.geom.Rectangle;
	import flash.geom.Matrix;

	// hsv to rgb ported from here:
	//http://www.cs.rit.edu/~ncs/color/t_convert.html
	//http://actionsnippet.com/?p=1627


	public class ColorPick extends MovieClip
	{
		public var rgb:uint;
		private var b1:Sprite;
		private var butCol:Sprite;
		private var slideCol:Sprite= new Sprite();
		private var canvas:BitmapData;
		private var colorField:Bitmap;
		private var sld:Sprite= new Sprite();
		private var dreieck:Sprite= new Sprite();
		private var draggin:Boolean=false;
		private var slideHeight:Number=158;
		private var colorRect:Sprite = new Sprite();
		private var colorRect2:Sprite = new Sprite();
		private var container:Sprite = new Sprite();
		private var einfaerben:ColorTransform=new ColorTransform();
		protected var format:TextFormat;
		private var textfeld1:TextField;
		private var textfeld2:TextField;
		public static const COLOR_CLICK:String="ColorPickEvent_COLOR_CLICK";



		public function ColorPick( _rgb:uint=0xFF6600):void
		{

			rgb=_rgb;
			if (stage) {
				init();
			}
			else {
				addEventListener(Event.ADDED_TO_STAGE,init);
			}
		}



		private function init(e:Event=null):void
		{
			canvas=new BitmapData(360,200,false,0x000000);
			colorField=new Bitmap(canvas);
			colorField.x=10;
			colorField.y=10;
			container.addChild(colorField);
			setSaturation(1);
			drawContent();
			removeEventListener(Event.ADDED_TO_STAGE, init);
			addEventListener(Event.REMOVED_FROM_STAGE, destroy);
			b1.addEventListener(MouseEvent.CLICK,buttonClick);
			dreieck.addEventListener(MouseEvent.MOUSE_DOWN, startSlide);
			stage.addEventListener(MouseEvent.MOUSE_UP, stopSlide);
			addEventListener(MouseEvent.MOUSE_MOVE, changeValue);
			addEventListener(MouseEvent.MOUSE_MOVE, setColor);
			addEventListener(MouseEvent.MOUSE_DOWN, setColor2);
			addEventListener(MouseEvent.ROLL_OUT, closeColor);
		}


		private function hsv(h:Number, s:Number, v:Number):Array
		{
			var r:Number,g:Number,b:Number;
			var i:int;
			var f:Number,p:Number,q:Number,t:Number;

			if (s==0) {
				r=g=b=v;
				return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
			}

			h/=60;
			i=Math.floor(h);
			f=h-i;
			p = v *  (1 - s);
			q = v * (1 - s * f);
			t = v * (1 - s * (1 - f));

			switch ( i ) {
				case 0 :
					r=v;
					g=t;
					b=p;
					break;
				case 1 :
					r=q;
					g=v;
					b=p;
					break;
				case 2 :
					r=p;
					g=v;
					b=t;
					break;
				case 3 :
					r=p;
					g=q;
					b=v;
					break;
				case 4 :
					r=t;
					g=p;
					b=v;
					break;
				default :// case 5:
					r=v;
					g=p;
					b=q;
					break;
			}
			return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
		}


		private function setSaturation(val:Number):void
		{
			canvas.lock();
			var size:int=canvas.width*canvas.height;
			var xp:int,yp:int,c:Array,i:int;

			for (i = 0; i < size; i++) {
				xp=i%360;
				yp=i/360;
				c=hsv(xp,val,yp/canvas.height);
				canvas.setPixel(xp, yp, c[0] <<16 | c[1] <<8 | c[2]);
			}
			canvas.unlock();
		}


		private function startSlide(evt:MouseEvent):void
		{
			draggin=true;
			var rect:Rectangle=new Rectangle(0,0,0,slideHeight);
			dreieck.startDrag(true, rect);
		}

		private function stopSlide(evt:MouseEvent):void
		{
			if (draggin) {
				dreieck.stopDrag();
			}
			draggin=false;
		}


		private function changeValue(event:MouseEvent):void
		{
			setSaturation(dreieck.y/slideHeight);
		}


		private function showColor():void
		{
			if (colorField.mouseX < canvas.width&&colorField.mouseY < canvas.height) {
				rgb=canvas.getPixel(colorField.mouseX,colorField.mouseY);
				einfaerben.color=rgb;
			}
		}

		private function setColor(evt:MouseEvent):void
		{
			showColor();
			textfeld1.text=rgb.toString(16);
			colorRect.transform.colorTransform=einfaerben;
		}


		private function setColor2(evt:MouseEvent):void
		{
			if (colorField.mouseX < canvas.width&&colorField.mouseY < canvas.height) {
				showColor();
				textfeld2.text=rgb.toString(16);
				colorRect2.transform.colorTransform=einfaerben;
				butCol.transform.colorTransform=einfaerben;
				einfaerben.color=hex2Hue(rgb);
				slideCol.transform.colorTransform=einfaerben;
				dispatchEvent(new Event(COLOR_CLICK));
			}

		}


		private function drawContent():void
		{


			var xpos:Number=390;
			var ypos:Number=52;
			sld.x=slideCol.x=xpos;
			sld.y=slideCol.y=ypos;

			container.addChild(slideCol);
			container.addChild(sld);
			//Dreieck, Anfasser für Slider

			sld.addChild(dreieck);
			dreieck.x=0;
			dreieck.y=slideHeight;
			dreieck.graphics.beginFill(0x000000);
			dreieck.graphics.lineTo(0,0);
			dreieck.graphics.lineTo(15,-8.75);
			dreieck.graphics.lineTo(15,8.75);
			dreieck.graphics.endFill();
			// Sensorpunkt Kreis unsichtbar
			dreieck.graphics.beginFill(0x000000, 0);
			dreieck.graphics.drawCircle(9, 0, 16);
			//Rechteck zeichnen
			var colors:Array=[0x707070,0x000000];
			var alphas:Array=[1,0];
			var ratios:Array=[0,250];
			var matr:Matrix = new Matrix();
            matr.createGradientBox(slideHeight, slideHeight);
			matr.rotate(Math.PI/2);
			var spreadMethod:String=SpreadMethod.REFLECT;
			//this.graphics.beginFill(0xFFaa45);
			sld.graphics.beginGradientFill(GradientType.LINEAR,colors, alphas, ratios,matr, spreadMethod);
			sld.graphics.drawRect(-10, 0, 10, slideHeight);
			sld.graphics.endFill();

			slideCol.graphics.beginFill(rgb);
			slideCol.graphics.drawRect(-10, 0, 10, slideHeight);
			slideCol.graphics.endFill();

			container.addChild(sld);
			colorRect.graphics.beginFill(rgb);
			colorRect.graphics.drawRect(0, 0, 100, 30);
			colorRect.graphics.endFill();
			colorRect2.graphics.beginFill(rgb);
			colorRect2.graphics.drawRect(0, 0, 100, 30);
			colorRect2.graphics.endFill();

			format= new TextFormat();
			format.size=18;
			format.font="Arial";
			textfeld1 = new TextField();
			textfeld2 = new TextField();
			textfeld1.defaultTextFormat=format;
			textfeld1.autoSize=TextFieldAutoSize.LEFT;
			textfeld1.antiAliasType=AntiAliasType.ADVANCED;
			textfeld1.selectable=false;
			textfeld1.mouseEnabled=true;
			textfeld1.text=rgb.toString(16);
			textfeld2.defaultTextFormat=format;
			textfeld2.autoSize=TextFieldAutoSize.LEFT;
			textfeld2.antiAliasType=AntiAliasType.ADVANCED;
			textfeld2.selectable=true;
			textfeld2.mouseEnabled=true;
			textfeld2.text=rgb.toString(16);
			colorRect.x=10;
			colorRect.y=215;
			textfeld1.x=115;
			textfeld1.y=215;
			textfeld2.x=295;
			textfeld2.y=215;
			colorRect2.x=190;
			colorRect2.y=215;
			container.addChild(textfeld1);
			container.addChild(textfeld2);
			container.addChild(colorRect);
			container.addChild(colorRect2);
			container.graphics.lineStyle(1, 0x333333, .75);
			container.graphics.beginFill(0xffffff);
			container.graphics.drawRect(0, 0, 430, 255);
			container.graphics.endFill();
			addChild(container);
			container.visible=false;

			b1 = new Sprite();
			b1.graphics.lineStyle(1, 0x000000);
			b1.graphics.beginFill(0xffffff);
			b1.graphics.drawRect(0, 0, 30, 30);
			b1.graphics.endFill();
			b1.buttonMode=true;
			b1.useHandCursor=true;
			butCol=new Sprite();
			butCol.graphics.beginFill(rgb);
			butCol.graphics.drawRect(0, 0, 22, 22);
			butCol.graphics.endFill();
			butCol.x=4;
			butCol.y=4;
			b1.x=380;
			b1.y=10;
			b1.addChild(butCol);
			addChild(b1);
		}

		private function buttonClick(e:MouseEvent)
		{
			if (container.visible) {
				container.visible=false;
			}
			else {
				container.visible=true;
			}
		}


		private function closeColor(e:MouseEvent)
		{
			container.visible=false;
		}


		private function destroy(e:Event):void
		{
			removeEventListener(Event.REMOVED_FROM_STAGE, destroy);
			b1.removeEventListener(MouseEvent.CLICK,buttonClick);
			dreieck.removeEventListener(MouseEvent.MOUSE_DOWN, startSlide);
			stage.removeEventListener(MouseEvent.MOUSE_UP, stopSlide);
			removeEventListener(MouseEvent.MOUSE_MOVE, changeValue);
			removeEventListener(MouseEvent.MOUSE_MOVE, setColor);
			removeEventListener(MouseEvent.MOUSE_DOWN, setColor2);
			removeEventListener(MouseEvent.ROLL_OUT, closeColor);
		}

		private function hex2Hue(color:uint):uint
		{
			var ar1:Array=hex2hsb(color);
			ar1[1]=100;
			ar1[2]=100;
			return hsb2hex(ar1);
		}

		private function hex2rgb(hex:uint):Array
		{
			var rgb:Array = new Array();
			rgb[0]=hex>>16;
			rgb[1]=hex>>8&0xFF;
			rgb[2]=hex&0xFF;
			return rgb;
		}

		private function rgb2hex(rgb:Array):uint
		{
			var hex=rgb[0]<<16^rgb[1]<<8^rgb[2];
			return hex;
		}

		private function hsb2rgb(hsb:Array):Array
		{
			var red,grn,blu,i,f,p,q,t;
			hsb[0]%=360;
			if (hsb[2]==0) {
				return (new Array(0,0,0));
			}
			hsb[1]/=100;
			hsb[2]/=100;
			hsb[0]/=60;
			i=Math.floor(hsb[0]);
			f=hsb[0]-i;
			p = hsb[2]*(1-hsb[1]);
			q = hsb[2]*(1-(hsb[1]*f));
			t = hsb[2]*(1-(hsb[1]*(1-f)));
			if (i==0) {
				red=hsb[2];
				grn=t;
				blu=p;
			}
			else if (i==1) {
				red=q;
				grn=hsb[2];
				blu=p;
			}
			else if (i==2) {
				red=p;
				grn=hsb[2];
				blu=t;
			}
			else if (i==3) {
				red=p;
				grn=q;
				blu=hsb[2];
			}
			else if (i==4) {
				red=t;
				grn=p;
				blu=hsb[2];
			}
			else if (i==5) {
				red=hsb[2];
				grn=p;
				blu=q;
			}
			red=Math.floor(red*255);
			grn=Math.floor(grn*255);
			blu=Math.floor(blu*255);
			return (new Array(red,grn,blu));
		}

		private function rgb2hsb(rgb:Array):Array
		{
			var x,f,i,hue,sat,val;
			rgb[0]/=255;
			rgb[1]/=255;
			rgb[2]/=255;
			x=Math.min(Math.min(rgb[0],rgb[1]),rgb[2]);
			val=Math.max(Math.max(rgb[0],rgb[1]),rgb[2]);
			if (x==val) {
				return (new Array(undefined,0,val*100));
			}
			f = (rgb[0] == x) ? rgb[1]-rgb[2] : ((rgb[1] == x) ? rgb[2]-rgb[0] : rgb[0]-rgb[1]);
			i = (rgb[0] == x) ? 3 : ((rgb[1] == x) ? 5 : 1);
			hue = Math.floor((i-f/(val-x))*60)%360;
			sat = Math.floor(((val-x)/val)*100);
			val=Math.floor(val*100);
			return (new Array(hue,sat,val));
		}

		private function hsb2hex(hsb:Array):uint
		{
			var rgb=hsb2rgb(hsb);
			return (rgb2hex(rgb));
		}

		private function hex2hsb(hex:uint):Array
		{
			var rgb=hex2rgb(hex);
			return (rgb2hsb(rgb));
		}




	}
}

Action in der fla

var myCol:ColorPick= new ColorPick(0x76b100);
myCol.x=20;
myCol.y=20;
addChild(myCol);


myCol.addEventListener(ColorPick.COLOR_CLICK, showText);

function showText(evt:Event):void
{
	trace(myCol.rgb);
	anzeige.text=myCol.rgb.toString(16);
}

HSB to Hex / Hex to RGB / RGB to Hex / HSB to RGB

Ich weiß leider nicht mehr, wo ich diesen Code gefunden haben. Aber da sie so schön praktisch sind, will ich euch diese nicht vorenthalten. Ich füge gerne einen Link ein, wenn ich den Autor kenne. Bitte melden. mail [q]pastorpixel.de

function hex2rgb(hex:uint):Array{
 var rgb:Array = new Array();
 rgb[0] = hex >> 16;
 rgb[1]= hex >> 8 & 0xFF;
 rgb[2] = hex & 0xFF;
 return rgb;
}

function rgb2hex (rgb:Array):uint{
 var hex = rgb[0] << 16 ^ rgb[1] << 8 ^ rgb[2];
 return hex;
}

function hsb2rgb(hsb:Array):Array {
 var red, grn, blu, i, f, p, q, t;
 hsb[0]%=360;
 if(hsb[2]==0) {return(new Array(0,0,0));}
 hsb[1]/=100;
 hsb[2]/=100;
 hsb[0]/=60;
 i = Math.floor(hsb[0]);
 f = hsb[0]-i;
 p = hsb[2]*(1-hsb[1]);
 q = hsb[2]*(1-(hsb[1]*f));
 t = hsb[2]*(1-(hsb[1]*(1-f)));
 if (i==0) {red=hsb[2]; grn=t; blu=p;}
 else if (i==1) {red=q; grn=hsb[2]; blu=p;}
 else if (i==2) {red=p; grn=hsb[2]; blu=t;}
 else if (i==3) {red=p; grn=q; blu=hsb[2];}
 else if (i==4) {red=t; grn=p; blu=hsb[2];}
 else if (i==5) {red=hsb[2]; grn=p; blu=q;}
 red = Math.floor(red*255);
 grn = Math.floor(grn*255);
 blu = Math.floor(blu*255);
 return (new Array(red,grn,blu));
}

function rgb2hsb(rgb:Array):Array {
 var x, f, i, hue, sat, val;
 rgb[0]/=255;
 rgb[1]/=255;
 rgb[2]/=255;
 x = Math.min(Math.min(rgb[0], rgb[1]), rgb[2]);
 val = Math.max(Math.max(rgb[0], rgb[1]), rgb[2]);
 if (x==val){
  return(new Array(undefined,0,val*100));
 }
 f = (rgb[0] == x) ? rgb[1]-rgb[2] : ((rgb[1] == x) ? rgb[2]-rgb[0] : rgb[0]-rgb[1]);
 i = (rgb[0] == x) ? 3 : ((rgb[1] == x) ? 5 : 1);
 hue = Math.floor((i-f/(val-x))*60)%360;
 sat = Math.floor(((val-x)/val)*100);
 val = Math.floor(val*100);
 return(new Array(hue,sat,val));
}

function hsb2hex(hsb:Array):uint{
 var rgb=hsb2rgb(hsb);
 return(rgb2hex(rgb));
}

function hex2hsb(hex:uint):Array{
 var rgb=hex2rgb(hex);
 return(rgb2hsb(rgb));
}

//flash only function: I dont have an inverse for this. maybe someone could post one in the comments?
function hex2matrix ( hex:uint, alpha:Number ){
 var matrix:Array = [];
 matrix = matrix.concat([((hex & 0x00FF0000) >>> 16)/255, 0, 0, 0, 0]);// red
 matrix = matrix.concat([0, ((hex & 0x0000FF00) >>> 8)/255, 0, 0, 0]); //green
 matrix = matrix.concat([0, 0, (hex & 0x000000FF)/255, 0, 0]); // blue
 matrix = matrix.concat([0, 0, 0, alpha/100, 0]); // alpha
 return matrix;
}

//USAGE:
trace('YELLOW HSB: 60,100,100 in hex mode is:'+hsb2hex([60,100,100])); //see note below *
trace('YELLOW HEX: FFFF00 in HSB mode is:'+hex2hsb(0xFFFF00));

Startseite: www.pastorpixel.de