Farben in ActionScript

Neben der weitgehenden Browserunabhängigkeit bietet ein SWF dem Entwickler auch die Möglichkeit, Umgebungen zu schaffen die den User zu begeistern. Der Weg dorthin ist vielfältig. So sind, im Vergleich zu HTML, die freie Schriftwahl, einfach zu erstellende Animationen oder die Integration verschiedenster Medien wichtige Bestandteile davon. Aber auch der richtige Umgang mit Farben ist ungemein wichtig.

Farbe ist in ActionScript nicht nur einfach eine bunte Fläche. Das ist was der User am Bildschirm sieht. Jede Farbe ist letztlich ein HEX-Code. So lässt sich weiß zum Beispiel mit 0xFFFFFF aus drücken oder wenn eine Alphakanal dabei sein soll eben 0xFFFFFFFF.

Beschränken wir uns aber zunächst auf den RGB-Raum ohne Alphakanal. Jeder Farbkanal umfasst einen Bereich von 0 (0x00) bis 255 (0xFF), oder binär ausgedrückt 0 bis 11111111. Durch diese Definition kommen die fast 16,6 Millionen Farben zusammen, denn 255 * 255 * 255 ergibt eben fast 16,6 Millionen. Und mit 16 Millionen Farben lässt sich wirklich einiges Anfangen.

Zu beachten ist aber, bevor man anfängt mit Farben zu rechnen, dass Farben im 16er-System definiert sind und nicht, wie der normale Mensche rechnet, im 10er-System. Um die Farben ausgeben zu können ist es daher notwändig anzugeben in welchen Zahlensystem. Gibt man den Farbwert einfach über einen trace aus, schreibt der FlashPlayer den Wert im 10er-System. Will man aber eine hexadezimale oder binäre Ausgabe, muss man die toString-Methode nutzen, wobei hier als Parameter das System angegeben werden kann (z.B. 16 für hexadezimal).

Will man die einzelnen Känale getrennt von einander bearbeiten, muss die Farbwert zerlegt werden. Dafür werden bitweise Operatoren benötigt. Will man nun den Wert für den grünen Kanal auslesen sieht das Script dazu wie folgt aus:

var baseColor:uint = 0x4598FF;
var green:unit = (baseColor & 0x00FF00) >> 8;
trace (green.toString(16)); // 0x98

Um das kurz zu erklären: Zunächst nimmt man die Ausgangsfarbe und entfernt alle Farbwerte, außer die grünen, durch den logischen AND-Operator (&). And ist so definiert, dass, nur wenn beide miteinander zu „verundende“ Bits den Wert 1 haben, das Ergebnis 1 zurückgegeben wird. Deswegen gibt diese Rechnung nur die grünen Werte zurück. Anschließend werden die Bits noch um 8 Stellen nach rechts verschoben, damit die grünen Werte am Ende stehen. Diese Prozedur ist für alle anderen Farbbereiche die selbe.

Hat man nun alle seine Berechnung durchgeführt und will die einzelnen Känale wieder zusammensetzen geschieht auch dies wieder mit bitweisen Operatoren:

var color:uint = alpha << 24 | red << 16 | green << 8 | blue;

Hier nimmt man die Werte für die einzelnen Känale schiebt sie soweit, wie eben eine ARBG oder RGB Farbe definiert ist und „verodert“ die einzelnen Werte. Das logische oder sagt aus, dass sobald eines der beiden zu vergleichenden Bits 1 ist, das Ergebnis 1 zurück gegeben wird. Wie die einzelnen nun Farben berechnet werden, ist jedem Entwickler freigestellt. Nur eben die oben gezeigt Basics müssen beachtet werden, dmait die richtigen Farben zu sehen sind.

Aber nicht alles muss berechnet werden. So bietet die TweenMax-Bibliothek auch schon die Möglichkeit Farbtweens zu scripten:

TweenMax.to(colors, 0.15, {hexColors:{targetColor}, onUpdate:updateColorizedObject});

Hier ist colors ein Object das einen oder möglicherweise mehrere Farbwerte einhält. TweenMax macht dann einen Tween über die Farbe. Dabei werden Update-Events dispatched und im Handler lässt sich der aktuelle Farbewert aus colors wiederum auslesen.

Auch ein interessante Ansatz Farben zu verändern ist der ColorMatrixFilter. Dieser ist als 4×5 Matrix definiert und ist ein BitmapFilter. Mit Hilfe dieser Matrix lässt sich aber nicht nur die Farbe verändern sondern auch die Sättigung und die Luminanz. Anwendbar ist dieser filter auf jedes DisplayObject.
Weiter auf diese Klasse einzugehen ist aber wiederum ein eigener Blogeintrag wert.

http://blog.greensock.com/tweenmaxas3/
http://www.adobe.com/devnet/flash/articles/bitwise_operators_03.html
http://help.adobe.com/de_DE/AS3LCR/Flash_10.0/flash/filters/ColorMatrixFilter.html

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.