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 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.
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)
Ü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.
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.
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();
Startseite: www.pastorpixel.de