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

Beispiel
  wert3   Wert2   Wert1    
  324   200   430   324.200.430
  wert3 x1.000.000 + wert2 x 1000 + wert1    
  324.000.000 + 200.000 + 430 = 324.200.430
Farbwert
  Rot   Grün   Blau    
hex 98   5A   F4   985AF4
hex R x 1.00.00 + G x 1.00 + B    
hex 980000

+

5A00 + F4 = 985AF4
               
dez 152   90   244   9984756
dez R x 65536 + G x 256 + B    
dez 9961472 + 23040 + 244 = 9984756

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

Farbdarstellung 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.

Dez Hex Bin
1 x 16 = 16 10 1.0000
16 x 16 = 256 1 00 1.0000.0000
256 x 16 = 4.096 10 00 1.0000.0000.0000
4096 x 16 = 65.536 1 00 00 1.0000.0000.0000.0000
65536 x 16 = 1.048.576 10 00 00 1.000.0000.0000.0000.0000
1048576 x 16 = 16.777.216 1 00 00 00 1.000.0000.0000.0000.0000.00000

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.

  Rot Grün Blau
bin 0000.0000 0000.0000 0000.0000
hex 00 00 00
dez 1.048.576 | 65536 4096 | 256 16 | 1

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.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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

redMultiplier:Number (default = 1.0) — Der Wert des Multiplikators für den Rotkanal im Bereich zwischen 0 und 1.

 

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen


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();


 


Startseite: www.pastorpixel.de