Share
Zweimal im Monat besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte von Activetuts +. Dieses Tutorial wurde erstmals im September 2009 veröffentlicht.
Hallo, nochmal, mein Name ist Andr? In diesem Tutorial zeige ich Ihnen, wie Sie mit dem Pixel Bender Toolkit benutzerdefinierte Filter erstellen und diese dann mit Flash CS4 zur Ausgabe von .pbj-Dateien verwenden.
* Diese Funktion steht nur in Flash Player 10 zur Verfügung.
Das Pixel Bender Toolkit wird mit dem Adobe Master Collection CS4-Paket geliefert oder kann unter http://labs.adobe.com/downloads/pixelbender.html heruntergeladen werden.
Bevor Sie einen Filter erstellen, müssen wir die grundlegenden Funktionen und Typen der Sprache verstehen. Es unterscheidet sich von Flash und ist viel einfacher.
Das eingegebene Schlüsselwort: Dies ist die Eingabe Bild, das Bild, das gelesen und bearbeitet wird. Wir können bis zu zwei Eingabebilder im Code enthalten. Wenn Sie mit einem Bild arbeiten, wird ein Filter erstellt, und wenn Sie mit 2 Bildern arbeiten, wird ein Mischmodus erstellt. Die Eingabe ist immer vom Typ "image4", dh ein Bild im RGBA-Modus (Rot, Grün, Blau und Alpha)..
Das Ausgabeschlüsselwort: Dies ist die Ausgabe Pixel, im Gegensatz zur Eingabe. Dadurch wird das Bild nicht ausgegeben, sondern nur der in RGBA gelesene Pixel. Dies ist der Typ "pixel4" (und nicht image4 wie die Eingabe).
Das Parameter-Schlüsselwort: Das Parameter-Schlüsselwort funktioniert wie eine Setter-Funktion. Mit dem Parameter können die Filterwerte während der Verwendung geändert werden. Auf den Parameter müssen Typ und Name folgen. Außerdem können Mindestwert, Maximalwert und Standardwert angegeben werden. Beispiel: Parameter int dimension oder Parameter Float myfloat . Der Parameter kann auch eingegeben werden float2, float3, float3, int1, int2? Beispiel: Parameter float2 test
Wir haben auch die Typen float, float2, float3, float4, int, int2, int3, int4 und viele andere, die wir hier nicht verwenden werden. Außerdem funktionieren einige Typen nicht mit Flash Player 10, daher kann ich jetzt nicht darauf eingehen. Ich werde jedoch ein wenig darüber sprechen, welche Typen ich hier erwähnt habe und wie sie funktionieren.
Geben Sie float, float2, float3 und float4 ein: Wenn Sie beispielsweise einen float4-Typ erstellen, erstellen Sie ein Array mit 4 Float-Werten. In Pixelbender werden die Gleitkommawerte durch Punkt definiert, aber float () funktioniert auch wie eine Funktion zum Konvertieren anderer Zahlenwerte in Gleitkommazahlen. Zum Beispiel float4 test = float4 (1,2,3,4);. Hier haben wir ein Objekt mit 4 Werten (Typ float) in der Variablen "test". Sie können ein Float4-Objekt auch aus einem Wert erstellen, zum Beispiel: float4 test = float4 (3);. Hier haben wir ein Objekt mit 4 Werten (RGBA) und alle Werte sind gleich (3.0 Float). Wenn Sie einen Float-Wert erstellen, können Sie ihn auch mit einem Punkt wie erstellen "Flottentest = 1,0;". Wenn Sie versuchen, es wie zu definieren "Flottentest = 1;" Es wird ein Fehler ausgegeben, da Zahlen ohne Punkt in Pixelbender wie int-Werte funktionieren.
Float wird also immer durch Punkt definiert. Selbst wenn Sie "float ()" verwenden, um den Float-Wert zu erstellen, wird eine Zahl mit einem Punkt zurückgegeben. Für den Zugriff auf Float-Werte mit mehr als einem Wert können Sie die Syntax wie einen Array-Zugriff verwenden "Variable [0] oder Variable [1] oder Variable [2]?".
Typ int, int2, int3 und in4 sind identisch mit Float-Typen, haben jedoch keine Punkte. Sie können Zahlenwerte auch mit "int" -ähnlichen Funktionen konvertieren.
bewertenPixel (): Diese Funktion wird Pixel für Pixel über das gesamte Bild ausgeführt und gibt dann den Ausgabetyp pixel4 zurück. In benutzerdefinierten Filtern für Flash verwenden wir immer diese Funktion.
outCoord (): Diese Funktion gibt die aktuelle Koordinate des Pixels zurück, das von der evaluPixel-Funktion gelesen wird. Sie gibt einen Werttyp float2, x- und y-Werte zurück und kann mit [] wie array oder .x und .y wie object aufgerufen werden. Zum Beispiel: var out = outCoord (); //out.x ist dasselbe von out [0] und out.y ist das gleiche von out [1].
sampleNearest (source, pixelCoordinate): Diese Funktion gibt den float4-Wert des Pixels aus dem Quellbild (image4) bei den Koordinationen "pixelCoordinate" zurück. Normalerweise verwenden wir hier die Funktion "outCoord".
Eine Beobachtung muss gemacht werden; Wenn Sie Float-Werte verwenden und die Werte addieren, subtrahieren, multiplizieren oder mit anderen Float-Werten derselben Länge teilen möchten, können Sie sie wie folgt verwenden:
float4 test1 = float4 (3.0,2.0,2.0,3.0); float4 test2 = float4 (1,0,2,0,2,0,1,0); float4 Ergebnis = test1-test2;
Das Ergebnis ist ein Variablentyp float4 mit den Werten 2.0, 0.0, 0.0 und 2.0. Sie könnten auch verwenden:
float4 test1 = float4 (3.0,2.0,2.0,3.0); float4 test2 = float4 (1,0,2,0,2,0,1,0); float4 Ergebnis = test1; Ergebnis [0] = Test1 [0] -Test2 [0]; Ergebnis [2] = 0,5;
Ich denke, das reicht aus, um die Struktur des Pixel Bender-Codes zu verstehen. Lassen Sie uns zum nächsten Schritt übergehen, nachdem ich nur eine weitere Sache erwähnt habe:
Bevor Sie einen Filter testen, müssen Sie mindestens ein Image laden (Datei> Image 1 laden "). Um den Filter zu testen, können Sie Build> Run ausführen, sofern der Filter über Parameter verfügt, die sich rechts von der Anwendung befinden. Mit den Schiebereglern können Sie die Werte ändern. Sie ändern sich zur Laufzeit und haben eine Live-Vorschau, da Sie jedes Mal erneut auf Ausführen drücken.
Dieser Filter wird mit Pixel Bender Toolkit geliefert, ist aber einer der einfacheren Filter, die erklärt werden müssen. Um mehr über die Pixel Bender-Sprachreferenz zu erfahren, drücken Sie einfach die F1-Taste im Programm. Die Hilfe in .pdf wird geöffnet.
Wenn das Programm geöffnet ist, erstellen Sie einen neuen Kernel-Filter (Datei> Neuer Kernel-Filter). Das Programm erstellt eine Standardstruktur für den Filter:
Kernel NewFilter < namespace : "Your Namespace"; vendor : "Your Vendor"; version : 1; description : "your description"; > input image4 src; Ausgangspixel4 dst; void evaluPixel () dst = sampleNearest (src, outCoord ());
Im Kernel NewFilter ändern Sie den Namen NewFilter für den Namen Ihres Filters. Namensraum, Hersteller, Version und Beschreibung muss ich nicht erklären, nur Ihre Zeichenfolgen wie Autor, Version (int) und die Beschreibung.
Das Eingabebild ist das vom Filter geladene Bild, und die Ausgabe ist das von der Auswertepixel-Funktion erzeugte Pixel. Die Ausgabe wird ein Pixel4-Wert sein, der von der evaluPixel-Funktion erzeugt wird. Dieser Wert wird Pixel für Pixel des Eingabebilds ausgeführt, wie ich es erklärt habe.
An der Linie "dst = sampleNearest (src, outCoord ());"Wir erhalten den Wert des aktuellen Pixels und die Koordinate outCoord () von image src (das Eingabebild), sodass wir die Werte des rgba-Werts von dst ändern können. Zum Beispiel, wenn wir die Farben invertieren möchten des Eingabebildes können wir Folgendes tun:
dst = sampleNearest (src, outCoord ()); dst.rgb = float3 (1) -dst.rgb;
Was machen wir hier?
Wir stellen fest, dass der rgb-Wert dieses Pixels das Array von float3-Wert minus dem ursprünglichen Wert von rgb ist, sodass die Farbe invertiert wird. Sie können dst.rgb anstelle von dst [0], dst [1] verwenden. und die Reihenfolge nach dem Punkt kann eine beliebige Reihenfolge sein. Jeder Buchstabe wird als Wert der Farbe gelesen. Beispielsweise können Sie dst.gbr = float3 (1) -dst.gbr verwenden. Sie können auch versuchen, die Farben des Bildes zu ändern. Verwenden Sie zum Beispiel den folgenden Code (in der Funktion comparePixel):
dst = sampleNearest (src, outCoord ()); dst.rgb = dst.brg;
Dieser Code gibt ein ungerade farbiges Bild aus.
Lassen Sie uns einen Filter von Adobe testen. Der Pixelat-Filter eignet sich hervorragend zum Testen. Gehe zu Datei> Öffnen. In dem Ordner, in dem Pixel Bender installiert ist, befinden sich einige Filter. Wählen wir den Pixelatfilter. Sobald der Filter geöffnet ist, können Sie die Schaltfläche "Ausführen" drücken, um den Filter zu testen. Wenn Sie exportieren möchten, gehen Sie zu Datei> Kernel-Filter für Flash Player exportieren. Dadurch wird der Filter zur Verwendung mit Flash exportiert. Sie können den Filter mit dem URLLoader laden oder mit dem Embed-Tag aus dem Flex SDK einbetten. In diesem Tutorial werde ich zeigen, wie man mit der eingebetteten Datei arbeitet, da der Filter nur etwa 4 bis 15 KB (wiegt) sehr leicht ist..
Die Ausgabeerweiterung ist eine .pbj-Datei.
Wenn Sie über einen Klassenpfad für Flash verfügen, verwenden Sie Ihren Klassenpfad. Wenn Sie noch keinen haben und einen erstellen möchten, öffnen Sie mein vorheriges Lernprogramm und führen Sie Schritt 1 aus. Wenn Sie keinen Klassenpfad wünschen, verwenden Sie denselben Ordner in Ihrem .fla-Dokument . Nehmen wir den Klassenpfad für das Tutorial an.
Erstellen Sie in Ihrem Klassenpfad den Ordner "Pixelbender". Dann erstellen Sie im Ordner "pixelbender" im Klassenpfad den Ordner "pbj". Kopieren Sie die .pbj-Datei (Beispiel: pixelate.pbj) in den von Ihnen erstellten pbj-Ordner.
Öffnen Sie Flash CS4 oder Flex mit aktualisiertem SDK für FP10. Wenn Sie Flash verwenden, müssen Sie das Flex SDK für Flash einrichten. Wenn Sie nicht wissen, wie das geht, drücken Sie "Strg + u", um die Voreinstellungen von Flash zu öffnen. Wählen Sie dann unter "Kategorien" die "Aktionsskripte" und dann "Einstellungen von Actionsctipt 3.0". Klicken Sie im Fenster "Erweiterte Einstellungen für Actionscript 3.0" auf die Schaltfläche "+" des Bibliothekspfads und fügen Sie Folgendes hinzu: $ (FlexSDK) /frameworks/libs/flex.swc. Klicken Sie auf die Schaltfläche OK.
Erstellen Sie nun eine neue .as-Datei und fangen Sie an, Folgendes zu codieren:
Zuerst setzen wir das Paket und importieren die notwendigen Klassen.
package pixelbender import flash.display.Shader; import flash.filters.ShaderFilter; import flash.utils.ByteArray;
Erstellen Sie die öffentliche Klasse PixelateFilter, die den ShaderFilter erweitert. Der ShaderFilter kann als normaler Filter im Filterarray eines beliebigen DisplayObjects angewendet werden.
public class PixelateFilter erweitert ShaderFilter
Betten Sie die pixelate.pbj -Datei in den Ordner pbj ein (wir gehen davon aus, dass wir die .as im pixelate-Ordner unseres Klassenpfads speichern). Das eingebettete Tag ist ein Flex-Tag, das Dateien in eine SWF-Datei einbettet, anstatt sie zu laden. Es gibt viele Arten, die Sie einbetten können, wie .flv, .jpg und andere. Als mimeType application / octet-stream wird die Datei als ByteArray eingebettet. Das embed-Tag erstellt eine Klasse für die eingebettete Datei. Hier verwende ich eine Klasse mit dem Namen "Filter"..
[Embed (source = "pbj / pixelate.pbj", mimeType = "application / octet-stream")] private var Filter: Klasse;
Erstellen Sie im Konstruktor eine Instanz unserer eingebetteten Datei als ByteArray. Das ByteArray ist der Parameter des Shader-Konstruktors. Daher erstellen wir auch die Shader-Instanz und setzen den Filter auf "ByteArray" als Parameter des Konstruktors. Da wir den ShaderFilter erweitern, müssen wir keine Instanz des ShaderFilter erstellen. Diese Klasse ist bereits um ShaderFilter erweitert, wir müssen also nur den Shader-Parameter unserer ShaderFilter-Klasse als Shader-Instanz festlegen.
öffentliche Funktion PixelateFilter (): void var filter: ByteArray = new Filter () als ByteArray; // Die eingebettete Datei als ByteArray var-Shader: Shader = new Shader (Filter); // Die Instanz von Shader this.shader = Shader; // den Parameter-Shader unserer Klasse setzen
Jetzt erstellen wir einen neuen Parameter für unsere Klasse, den Parameter "dimension". Dieser Parameter wirkt sich auf den "Parameter int dimension" aus, der im Pixelbender erstellt wird. Die Setterfunktion ändert den Wert und die Getterfunktion erhält nur den aktuellen Wert. Auf die Shader-Datenwerte kann über "instance.data.value" zugegriffen werden, die Werte sind Arrays. Wenn wir einen Parameter "Parameter int2 position;" Im Filter würden wir zum Beispiel über "instance.data.position [0]" bzw. "instance.data.position [1]" darauf zugreifen.
public function set dimension (Wert: Anzahl): void shader.data.dimension.value [0] = value; public function get dimension (): Number return shader.data.dimension.value [0];
Schließen Sie einfach das Paket und die Klasse.
Nun wird die Klasse für diesen Filter erstellt. Speichern Sie die .as-Datei mit dem Namen "PixelateFilter.as" (derselbe Name wie die Klasse) im Pixelbender-Ordner in Ihrem Klassenpfad (derselbe Name wie Ihr Paket und wo Sie auch sind.) erstellt den PBJ-Ordner).
Erstellen Sie zunächst ein neues .fla AS3-Dokument, und speichern Sie es an einem beliebigen Ort, z. B. c: / mycustomfilter.
Definieren Sie eine Klasse für dieses .fla-Dokument. Öffnen Sie das Eigenschaftenfenster des .fla-Dokuments aus dem Fenster Eigenschaften>, geben Sie im Feld "Klasse" "Main" ein und erstellen Sie eine neue Actionscript-Datei.
Kopieren Sie ein beliebiges Bild in denselben Ordner des .fla-Dokuments. Ich habe beispielsweise eines der Beispielbilder aus den Pixel Bender-Beispielen verwendet. YellowFlowers.png, die mit den Quelldateien gefunden werden kann.
Wenn Sie noch nicht über die TweenLite-Klasse verfügen, laden Sie sie bitte unter http://blog.greensock.com/tweenliteas3/ herunter und entpacken Sie den Inhalt des Ordners gs im Ordner gs in Ihrem Klassenpfad.
Erstellen Sie ein neues .as-Dokument.
Fügen Sie unserem Klassenpfad die erforderlichen Klassen hinzu:
package import flash.display.Sprite; import flash.display.Bitmap; import pixelbender.PixelateFilter; // Unser benutzerdefinierter Filter import gs.TweenLite; // die beste Tweening-Klasse
Erstellen Sie die Main-Klasse, die die Sprite-Klasse erweitert:
öffentliche Klasse Main erweitert Sprite
Betten Sie das Bild zum Testen ein. Der mimeType lautet "image / png". Daher werden wir als Bild und nicht als ByteArray einbetten. Nennen Sie seine Klasse "Img". Zusätzlich geben wir eine Variable mit dem Namen "filter" vom Typ PixelateFilter ein, damit wir sie später in jeder Funktion verwenden können.
[Embed (source = "YellowFlowers.png", mimeType = "image / png")] private var Img: Class; Privater Var-Filter: PixelateFilter;
Im Konstruktor erstellen wir unser Bild, das vom Filter beeinflusst wird, und fügen dann das Bild untergeordnet zur Bühne hinzu. Dann erstellen Sie eine Instanz von PixelateFilter. Wir haben die Variable bereits zuvor erstellt und müssen nicht erneut eingeben. Setzen Sie das Filtermaß auf 100, damit wir den Effekt besser sehen können, und fügen Sie den Filter der Filterliste unserer Main-Klasse hinzu.
Dann verwenden wir die TweenLite-Klasse, um den Filterparameter zu animieren. Der Dimensionsparameter wird von 100 bis 1 animiert. Während die Animation aktualisiert wird, wird die Funktion "tweenLiteUpdate" ausgeführt. Wenn die Animation abgeschlossen ist, wird die Funktion "newTween" ausgeführt.
öffentliche Funktion Main (): void var image: Bitmap = new Img () as Bitmap; addChild (Bild); filter = new PixelateFilter (); Filterabmessung = 100; this.filters = [filter]; TweenLite.to (filter, 3, dimension: 1, onUpdate: tweenLiteUpdate, onComplete: newTween);
Während TweenLite aktualisiert wird, wird das TweenLiteUpdate ausgeführt und der Filter unserer Main-Klasse aktualisiert. Ohne diese Methode würden wir nicht sehen, dass der TweenLite den Filter aktualisiert.
private Funktion tweenLiteUpdate (): void this.filters = [filter];
Wenn die erste Tweening-Animation abgeschlossen ist, wird die neue Tween-Funktion ausgeführt. In der ersten Zeile dieser Funktion wird geprüft, ob der Filterabmessungswert 1 ist. Wenn dies der Fall ist, wird die dim-Variable auf 100 gesetzt, andernfalls wird die Variable auf 1 gesetzt. Dies ist dasselbe wie bei if und else oder switch. In der zweiten Zeile wird die Tweening-Animation des Filters erneut gestartet.
private Funktion newTween (): void var dim: Number = (filter.dimension == 1)? 100: 1; TweenLite.to (filter, 3, dimension: dim, onUpdate: tweenLiteUpdate, onComplete: newTween);
Schließen Sie nun einfach das Paket und die Klasse mit doppeltem "".
Speichern Sie Ihre Datei als "Main.as" im selben Ordner Ihrer .fla-Datei. Wenn alle Dateien und Ordner in Ordnung sind, können Sie Ihre Datei testen. Die Animation wird pixeliert, wechselt zum normalen Bild und wird kontinuierlich wiederholt.
Ich hoffe, Ihnen hat das gefallen, und ich hoffe, es wird sehr nützlich sein. In Adobe Exchange gibt es viele andere Filter, die Sie herunterladen können. Einige davon sind kostenlos oder Open Source. Ich habe auch einige andere .pbj und Klassen mit der Quelle für das Studium eingefügt. Zum Beispiel wird SpherizeFilter.as: http://cavallari.freehostia.com/spherize/ durch die Position der Maus animiert.
Accentsconagua