Share
Mit ColorMatrixFilter und ConvolutionFilter können Sie Ihre Flash-Objekte visuell transformieren. In diesem Artikel zeige ich Ihnen, wie einfach sie mit einem coolen Werkzeug manipuliert werden können, das ich für einfaches Experimentieren entwickelt habe.
Haben Sie jemals mit den ColorMatrix- und Convolution-Filtern von Flash experimentiert? Ich habe mich auf der Suche nach interessanten Sachen befasst, die Sie mit Flash machen können, und bin auf sie gestoßen. Wenn Sie mit ihnen experimentieren, können Sie erstaunliche Ergebnisse erzielen.
Ich habe einen EffectsTester geschrieben, um das Experimentieren zu erleichtern. Schauen Sie sich diese Camshots an, die ich beim Spielen damit gemacht habe:
Wenn Sie das interessant finden, lassen Sie mich durch die beiden Filter gehen.
Der Farbmatrixfilter dient zum Ändern der Farbe eines Anzeigeobjekts.
Lassen Sie mich die genaue Berechnung erklären, die vom ColorMatrixFilter ausgeführt wird. Jedes Pixel in einem Bild ist eine Mischung aus Rot, Grün und Blau. Diese Grundfarben, Wenn kombiniert, kann jede andere Farbe gemacht werden:
Bild aus Wikimedia Commons. Danke an Mike Horvath und Jacobolus.
Der Rotanteil in einem Pixel kann von null (überhaupt kein Rot) bis 255 variieren. Gleiches gilt für Grün und Blau. Aus dem Bild oben können Sie also sehen, dass ein reines gelbes Pixel Rot = 255 und Grün = 255 hat. Weiß hat Rot, Grün und Blau, die alle auf 255 eingestellt sind. Bei Schwarz sind alle drei auf Null gesetzt.
Der Farbmatrixfilter betrachtet jedes Pixel in einem Quellbild und ändert sie basierend darauf, wie viel Rot, Blau und Grün sich im Pixel befinden. Sie erhalten ein ganz neues Bild. das Zielbild.
Konzentrieren wir uns zunächst auf diese drei Werte:
Beschreiben wir diese Werte mit a [0], a [1] und a [2]. Denken Sie jetzt nur an ein einzelnes Pixel im gesamten Quellbild (das in der oberen linken Ecke reicht aus). Nennen wir die Menge an Rot darin srcR, die Menge an Grün srcG und die Menge an Blau srcB.
Die Frage ist: wie viel Rot wird in diesem Pixel des Zielbildes sein, destR? Flash verwendet diese Berechnung:
destR = (a [0] * srcR) + (a [1] * srcG) + (a [2] * srcB);
Hier sehen Sie, dass a [0] 1 ist, während a [1] und a [2] beide Null sind, also:
destR = (1 * srcR) + (0 * srcG) + (0 * srcB); // was bedeutet… destR = srcR;
Es gibt keine Veränderung! Was aber, wenn wir eine [0] in Null und eine [1] in 1 ändern? Dann:
destR = (0 * srcR) + (1 * srcG) + (0 * srcB); // was bedeutet… destR = srcG;
… Der Rotanteil im Zielpixel wäre gleich dem Betrag von Grün im Quellpixel! Außerdem, wenn Sie die zweite Zeile zum Lesen geändert haben "100", dann wäre der Grünanteil im Zielpixel gleich dem Rotanteil im Quellpixel; Sie hätten sie ausgetauscht und Ihr orangefarbener Fisch würde sich in grüne verwandeln:
Sie wundern sich wahrscheinlich über die EIN Spalte und Zeile und über die Versatz Säule. Nun, A steht für Alpha, was Transparenz bedeutet. Die A-Werte haben im Wesentlichen den gleichen Effekt wie die RGB-Werte. Da jedoch keines dieser Beispielbilder transparent ist, ist es schwer zu zeigen. In der Spalte Versatz können Sie einfach den Rot-, Blau- oder Grünanteil im Zielpixel erhöhen oder verringern. Geben Sie -255 in die Spalte Versatz der Zeile R ein, und Sie sehen, dass das Bild kein Rot mehr enthält.
Ich weiß, dass es schwierig ist, dies zu verstehen, wenn man davon liest. Wir werden uns also ein paar coole Beispieleffekte anschauen. Das macht sowieso viel mehr Spaß. Aber für Neugierige hier die eigentliche mathematische Formel, die Flash verwendet:
destR = (a [0] * srcR) + (a [1] * srcG) + (a [2] * srcB) + (a [3] * srcA) + a [4]; destG = (a [5] * srcR) + (a [6] * srcG) + (a [7] * srcB) + (a [8] * srcA) + a [9]; destB = (a [10] * srcR) + (a [11] * srcG) + (a [12] * srcB) + (a [13] * srcA) + a [14]; destA = (a [15] * srcR) + (a [16] * srcG) + (a [17] * srcB) + (a [18] * srcA) + a [19];
(Jeder der Werte, die Sie in der 5x4-Matrix sehen, kann zwischen -255 und 255 variieren.)
Schauen Sie sich das Beispielbild "Farbkarte" an:
Angenommen, Sie möchten die gesamte rote Farbe aus dem Bild entfernen. Setzen Sie einfach alle Werte in der R-Zeile auf Null:
Das heisst:
destR = (0 * srcR) + (0 * srcG) + (0 * srcB) + (0 * srcA) + 0; // was bedeutet: destR = 0 + 0 + 0 + 0 + 0; // also: destR = 0;
Nehmen wir an, Sie möchten noch etwas Grün hinzufügen, wo zuvor Rot war. Setzen Sie "1" an den Eingang 0x1, sodass die Zeile G "1 1 0 0 0" lautet:
Lassen Sie uns nun etwas sehr Merkwürdiges erreichen, indem Sie die G-Reihe in "0 -1 0 0 50" ändern:
Was ist gerade passiert? Wenn Sie beispielsweise an einem zufälligen Pixel grün = 30 hatten, wurde es mit '-1' multipliziert und anschließend 50 hinzugefügt, sodass das Ergebnis lautet: (30 * -1) + 50 = 20.
Daher eine Art von Schwelle wird erstellt: Für jedes Pixel mit einem grünen Wert von mehr als 50 wird das transformierte Pixel vollständig deaktiviert. Warum? Nehmen wir an, der grüne Kanal des Pixels hat einen Wert von 51:
destG = (0 * srcR) + (-1 * srcG) + (0 * srcB) + (0 * srcA) + 50; // erinnere mich an srcG = 51: destG = 0 + (-51) + 0 + 0 + 50; // also: destG = - 51 + 50; // also: destG = -1; // aber ein Pixel darf nicht negativ grün sein, also wird dies nur auf null gesetzt: destG = 0;
Versuchen Sie jetzt folgendes:
Alle Pixel mit Grünwerten größer als 50 werden deaktiviert, und diejenigen mit Grünwerten unter 50 haben alle drei Farbkanäle erhöht. So können Sie Bereiche des Bildes sehen, die wie beim Fischbild nur sehr wenig Grün enthalten:
x Hier sind nur die Pixel mit einem Grünanteil kleiner als 50. Je dunkler das Pixel, desto mehr Grün ist im Originalbild vorhanden. Das ist sowieso das Grundprinzip. Ich weiß, dass es auf den ersten Blick kompliziert erscheinen mag, aber spiele damit und du wirst es irgendwann bekommen :)
OK, lassen Sie uns etwas Standard gehen: ein Graustufenbild. Ändern Sie Ihre Matrix wie folgt:
Du hast eine Graustufen. Nett :)
Lassen Sie uns einen anderen beliebten Farbzustand erreichen: Invertierte Farben.
Um die Farben umzukehren, müssen wir es so gestalten, dass jedes Pixel mit einem roten Wert von 255 einen roten Wert von Null hat und umgekehrt. Gleiches gilt für die anderen beiden Farben. Wir müssen also Flash-Code ausführen, der folgendermaßen aussieht:
destR = 255 - srcR; destG = 255 - srcG; destB = 255 - srcB;
Aber das ist einfach! Wir müssen nur die Matrix so einstellen:
Tada! Elektrischer Fisch:
Die meisten der exotischeren Effekte, die mit dem ColorMatrixFilter erzielt werden können, werden durch Einstellen eines negativen Werts für eine Farbe und eines positiven Werts für den Offset erzielt - oder umgekehrt. Setzen Sie "-1" von 0x3 bis 2x3 (die Alphas) und 255 für den Offset des Alphas (4x3)..
Wow, jetzt weiß ich jetzt, wie sie Terminator 2 gemacht haben :)
Ehrlich gesagt bin ich mir nicht wirklich sicher, was ich gerade getan habe - Berechnungen werden nach einer Weile sehr schwer zu verfolgen.
Obwohl es möglich ist zu verstehen, wie der ColorMatrixFilter aus mathematischer Sicht funktioniert, wird es realistisch bleiben, dass er damit herumspielen muss. Sie können nie genau wissen, was angezeigt wird, wenn Sie bestimmte Werte eingeben. Deshalb habe ich diesen EffectsTester gemacht. Also herumspielen. Machen Sie sich metallisch grün oder rot oder farblos.
Wenn Sie einen Effekt haben, den Sie mögen, können Sie ihn auf jedes Anzeigeobjekt (MovieClip, Sprite, Bitmap ...) in Ihrem eigenen Code wie folgt anwenden:
// Zuerst ColorMatrixFilter oben in den Code importieren: import flash.filters.ColorMatrixFilter; //… später: var filters: Array = new Array (); // Für alles nach "= neu" kopieren und fügen Sie das Feld "Grab The Code" von EffectsTester ein: var cmf: ColorMatrixFilter = new ColorMatrixFilter (neues Array (-1,0,0,0,255,0, -1,0.) 0,255,0,0, -1,0,255,0,0,0,1,0)); // In den nächsten beiden Zeilen wird der Filter auf das Anzeigeobjekt angewendet: filters.push (cmf); myDisplayObject.filters = Filter;
Schauen wir uns jetzt den Faltungsfilter an.
Aus der Klassenreferenz von Adobe:
Eine Faltung kombiniert Pixel im Eingabebild mit benachbarten Pixeln, um ein Bild zu erzeugen. Eine Vielzahl von Bildeffekten kann durch Windungen erreicht werden, einschließlich Unschärfe, Kantenerkennung, Schärfen, Prägen und Abschrägen.
Der ConvolutionFilter durchläuft alle Pixel eines Anzeigeobjekts. Für jeden von ihnen wird der mittlere Wert in der Matrix als Wert des aktuellen Pixels verwendet, das bearbeitet wird. In einer 3 x 3-Matrix liegt der Mittelwert beispielsweise bei (1, 1). Dann multipliziert er die Werte aus der Matrix mit den umgebenden Pixeln und fügt die resultierenden Werte für alle Pixel hinzu, um den Wert für das resultierende mittlere Pixel zu erhalten.
Das Verständnis der genauen Mathematik unter der Faltungsmatrix ist einen ganz neuen Artikel wert, deshalb werde ich hier nicht weiter darauf eingehen. Wenn Sie mitmachen wollen, schauen Sie sich diesen Beitrag auf adobe.com an.
Ein einfaches Herumspielen mit den Werten führt jedoch schließlich zu allen möglichen Effekten, die Sie erzielen können. Und es wird Spaß machen :) Mal sehen, was wir machen können!
Der Faltungsfilter verwendet ebenso wie der Farbmatrixfilter eine Matrix. Wiederum variieren die Werte zwischen -255 und 255. Auch hier erzielen Sie die meisten interessanten Effekte, wenn Sie negative Werte mit positiven kombinieren.
Lassen Sie mich meine Beobachtungen darüber teilen, wie dieses Ding funktioniert. Erhöhen Sie einen zufälligen Wert aus der Matrix. Was immer Sie wählen, das Bild wird heller; Wenn das Bild auf normaler Helligkeit bleiben soll, stellen Sie sicher, dass der Wert von "divisor" der Summe aller Werte in der Matrix entspricht.
Wenn Sie nun versuchen, einen zufälligen Wert unter null zu senken, während Sie mindestens einen anderen über null halten, wird dort etwas passiert. Es wirkt sich auf Ihre Kanten aus:
Hier ist eine nette: Sie wollen wie ein Soldat aussehen? :) Probieren Sie diese Werte aus:
Senken Sie jetzt den "Divisor" -Wert auf "-1", um nachts ein Soldat auf einer Mission zu werden.
Vieles kann erreicht werden, wenn Sie die Maustaste ein wenig länger gedrückt halten :) Senken und erhöhen Sie einige Werte bis zum Äußersten. Vergessen Sie nicht, den "Divisor" einzustellen - es ist wichtig. Vergrößern Sie Ihre Matrix. Machen Sie es zum Beispiel 5x5.
Um den Effekt in Ihrem eigenen Code anzuwenden, verwenden Sie die Filter Objekt, genau wie beim ColorMatrixFilter:
// Zuerst importiere ConvolutionFilter oben in deinem Code: import flash.filters.ConvolutionFilter; //… später: var filters: Array = new Array (); // Für alles nach "= neu" kopieren und fügen Sie das Feld "Grab The Code" von EffectsTester ein: var cf: ConvolutionFilter = new ConvolutionFilter (3,3, neues Array (1,0, -10, -2,3) 1,6,1, -1), 0); // In den nächsten beiden Zeilen wird der Filter auf das Anzeigeobjekt angewendet: filters.push (cf); myDisplayObject.filters = Filter;
Zum Schluss: Kombinieren Sie beide Filter.
// Importiere zuerst die Filterklassen oben in deinem Code: import flash.filters.ColorMatrixFilter; import flash.filters.ConvolutionFilter; //… später: var filters: Array = new Array (); // Für alles nach "= neu" kopieren und fügen Sie das Feld "Grab The Code" von EffectsTester ein: var cmf: ColorMatrixFilter = new ColorMatrixFilter (neues Array (-1,0,0,0,255,0, -1,0.) 0,255,0,0, -1,0,255,0,0,0,1,0)); var cf: ConvolutionFilter = neuer ConvolutionFilter (3,3, neues Array (1,0, -10, -2,3,1,6,1, -1), 0); // In den nächsten drei Zeilen werden die Filter auf das Anzeigeobjekt angewendet: filters.push (cf); filter.push (cmf); myDisplayObject.filters = Filter;
Viel Spaß beim Spielen mit diesen Filtern und posten Sie alle Ergebnisse, die Sie in den Kommentaren erhalten! Danke fürs Lesen.
Accentsconagua