Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Effects

Erstellen Sie mit ActionScript 3.0 einen beeindruckenden Vergrößerungseffekt

by
Read Time:11 minsLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Zweimal im Monat besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte von Activetuts+. Dieses Tutorial wurde erstmals im April 2009 veröffentlicht.

In diesem Tutorial erstellen wir einen Lupeneffekt, der die Verwendung des displacementMapFilter demonstriert. Der Effekt kann in relativ kurzer Zeit und mit sehr wenig Code erzielt werden.


Vorschau des endgültigen Bildes

Werfen wir einen Blick auf das, was wir anstreben:


Schritt 1: Kurze Übersicht

Wir werden mit zwei Ebenen plus einer zusätzlichen optionalen Ebene arbeiten. Das erste enthält ein Bild, das die visuellen Grafiken enthält. Dies kann alles sein. Die zweite Ebene ist die Farbkarte, die das Pixel-Pushing steuert. Die dritte Ebene enthält das ActionScript.

Eine optionale vierte Ebene ist eine überlagerte Grafik, die als Rahmen oder Linseneinfassung fungiert.

Schauen wir uns das an!


Schritt 2: Dokumenteinrichtung

Als erstes müssen wir eine neue ActionScript 3.0-Flash-Datei erstellen - die Dokumentgröße 530 x 400 Pixel mit einer Bildrate von 30 Bildern pro Sekunde.

””””””

Schritt 3: Ressourcen importieren

Danach müssen wir ein Bild importieren, das wir für diesen Effekt verwenden können. Ich habe ein cooles, frei verfügbares Desktop-Bild mit 1024 x 768 Pixel gefunden.

Importieren Sie dies, um die Ebene "Image" zu inszenieren und zu benennen.

””””””

Skalieren wir nun das Bild auf 50% und zentrieren es.

””””””

Schritt 4: Skripting des Filters

Erstellen Sie oben eine neue Ebene und nennen Sie sie "Actions". Lassen Sie uns dann das Aktionsfenster herausholen und den Effekt codieren. Zuerst benötigen wir den Filter für das Bild. Erstellen wir also ein neues Filterobjekt und nennen es "dFilter". Wir lassen den Filter frei von Parametern, da einige eingestellt werden müssen.

Dann müssen wir diese Filterparameter in der aufgelisteten Ansicht einstellen.


Schritt 5: Effektskala

Beginnen wir mit den einfachsten und stellen Sie die Skalierung auf etwa 50 ein. Dies ist der Betrag, um den die Lupe zoomt. Sie kann auch auf einen negativen Wert eingestellt werden, aber in diesem Fall muss sie vergrößert und nicht verkleinert werden.

Zusätzliche Zeilen: 3,4

Hinweis: Dies ist nicht die tatsächliche Reihenfolge, in der der Filter normalerweise die Parameter akzeptiert. In diesem Fall können wir sie jedoch nach Belieben hinzufügen, da wir die aufgelistete Ansicht für eine bessere Übersicht verwenden.


Schritt 6: Farbkanalkomponenten

Danach legen wir die Komponentenfarbkanäle für X und Y fest - dies bestimmt, welche Farbkanäle in der Steuerkarte (die wir in einer Sekunde erstellen) der Filter abhört.

Wenn Sie mit dem RGB-Hex-Code #RRGGBB vertraut sind, können Sie zwischen BitmapDataChannel.RED, BitmapDataChannel.GREEN und BitmapDataChannel.BLUE wählen. Zur Vereinfachung können wir auch einfach 1 (rot), 2 (grün) oder 4 (blau) schreiben - (und nein, ich habe keinen Rechtschreibfehler gemacht, das Blau ist 4; dies wird von der tatsächlichen Kanalposition in eingestellt der Hex-Code). In diesem Beispiel bleiben wir nur bei Rot (1) und Grün (2) - aber wir werden darauf zurückkommen, wenn wir die tatsächliche Verschiebungskarte entwerfen.

Zusätzliche Zeilen: 5,6


Schritt 7: Verschiebungsmodus

Danach müssen wir den Modus einstellen, um zu bestimmen, wie die Pixel reagieren, wenn sie weiter als bis zu den Bildgrenzen verschoben werden. Hier können wir wählen aus:

DisplacementMapFilterMode.COLOR / DisplacementMapFilterMode.WRAP / DisplacementMapFilterMode.CLAMP / DisplacementMapFilterMode.IGNORE

Wieder können wir dies vereinfachen, indem wir "color", "clamp", "wrap", "ignore" schreiben. Ich werde in diesem Tutorial nicht weiter darauf eingehen. Verwenden wir also einfach "Farbe", die in den meisten Fällen am besten funktioniert.

Zusätzliche Zeilen: 7

In diesem Modus können Pixel über die Bildgrenze hinaus fortgesetzt werden (falls der Filter die Pixel weiter als bis zum Rand des Bildes verschiebt).


Schritt 8: Umgebungsfarbe und Alpha

Setzen wir nun die Umgebungsfarbe auf 0x000000 und Alpha auf 0. Dies ist 100% transparent, sodass außerhalb des Bildes außer den Quellpixeln nichts angezeigt wird.

Zusätzliche Zeilen: 8,9


Schritt 9: Filtereffektposition

Jetzt müssen wir die Position festlegen, an der der Filter das Bild beeinflusst. unsere Objektivposition. Dies muss als Punktobjekt festgelegt werden, das den x- und y-Wert enthält. Wir beginnen mit der Erstellung des Punktobjekts, damit es verwendet werden kann, wenn wir es dem dispacementMapFilter zuweisen. Nennen wir es "dPoint" und setzen es als Anfangswerte auf 0, 0. Wir werden gleich darauf zurückkommen, wenn wir diesen Punkt anweisen müssen, der Maus zu folgen.

Danach weisen wir der Punktposition des "dFilter" "dPoint" zu.

Zusätzliche Zeilen: 1,11


Schritt 10: BitmapData

Zu guter Letzt müssen wir die Kontrollkarte dem Filter zuweisen. Dies ist die Karte, die die farbigen Pixel enthält, die die Komponenten X und Y hören.

Zusätzliche Zeilen: 13

Hier benötigen wir auch ein BitmapData-Objekt, um als Datencontainer für unsere Farbkarte zu fungieren.


Schritt 11: Entwerfen der Farbkarte

Zuerst erstellen wir ein lineares Farbverlaufsquadrat mit 100 x 100 Pixel (rot bis schwarz). Dadurch werden die aktuellen Pixel aufgenommen und nach links und rechts verschoben, während die Komponente X auf Rot gesetzt wird. Machen wir daraus einen Movieclip namens "redMap"

Dann machen wir dasselbe noch einmal - aber diesmal mit einem grünen bis schwarzen linearen Verlaufsquadrat, wieder 100px x 100px. Dieses Mal drehen wir es auch um 90 °. Vielleicht erinnern Sie sich, dass wir die Komponente für die Verschiebung der Y-Achse als grün festgelegt haben (componentY = 2), damit der Gradient entlang der y-Achse verläuft. Wir werden es noch einmal in einen Movieclip konvertieren, diesmal "greenMap".

””””””

Schritt 12: Vorbereiten der Karte für die Erfassungsphase

Wir haben jetzt zwei separate Farbbilder; wir brauchen nur einen, also setze den Mischmodus der greenMap auf "screen". Jede Farbe aus der greenMap leuchtet dann auf der redMap durch. Platzieren Sie die greenMap oben auf der redMap und stellen Sie sicher, dass sie richtig ausgerichtet sind.

Wählen Sie beide Movieclips aus, indem Sie auf die Ebene "Map" klicken, und konvertieren Sie die beiden in einen Movieclip mit dem Namen "colorMap". Setzen Sie dann den Instanznamen auf "colorMap_mc".

””””””

Schritt 13: Kartencontainer

Kehren wir nun zum Code zurück und fahren Sie fort, indem Sie den colorMap-Movieclip in einer BitmapData erfassen.

Gehen Sie zum Anfang des Codes und erstellen Sie ein neues BitmapData-Objekt. Nennen wir es "dMap" und stellen Sie die Größe so ein, dass sie der Größe unserer colorMap entspricht (in diesem Fall 100 x 100 Pixel, aber dies kann fast alles sein). Wir setzen transparent auf "true" und color auf 0x808080. Dadurch wird sichergestellt, dass alle verbleibenden Pixel in den BitmapData neutral sind.

Zusätzliche Zeilen: 3


Schritt 14: Erfassungsphase

Wir müssen den Inhalt der colorMap in die bitmapData zeichnen. Sobald dies erledigt ist, können wir die colorMap mithilfe eines Skripts von der Bühne löschen. Dies ist möglich, da das colorMap-Bild im bitmapData-Code enthalten ist.

Zusätzliche Zeilen: 5, 7


Schritt 15: Zuweisen der Karte zum Filter

Fügen Sie die bitmapData dMap zum DisplacementMapFilter hinzu, indem Sie den letzten Parameter in der Liste (mapBitmap) auf "dMap" setzen.

Geänderte Zeilen: 19


Schritt 16: Filter zum Bild hinzufügen

Der Filter ist fertig! Wir müssen es jetzt zum Image hinzufügen, also wählen Sie das Image aus und stellen Sie sicher, dass es einen Instanznamen hat - nennen wir es "Image_mc". Nachdem dies erledigt ist, können wir den Filter für das Bild einstellen. Wir tun dies am Ende des Codes, indem wir den Parameter Bildfilter als Array wie folgt festlegen:

Image_mc.filters = [dFilter]

Zusätzliche Zeilen: 21

OK, lassen Sie uns den Film exportieren und sehen, wie sich der Filter auf das Bild auswirkt. Es sollte ungefähr so aussehen:


Schritt 17: Interaktivität

Was wir bisher haben, ist nicht sehr aufregend, also versuchen wir, das Objektiv der Maus folgen zu lassen.

Zuerst fügen wir den Schleifencode "enterFrame" wie folgt hinzu:

Zusätzliche Zeilen: 23,25,27


Schritt 18: Folgen Sie der Maus

Dann setzen wir die Werte von X und Y unseres dPoint so, dass sie der Maus folgen. Außerdem weisen wir den neu geänderten dPoint erneut dem dFilter zu und weisen den Filter dem Bild neu zu.

Zusätzliche Zeilen: 26,27,28,29

Testen wir es noch einmal. Es muss so aussehen:


Schritt 19: Machen wir Ende

Es ist immer noch nicht genau so, wie wir es wollen, also lassen Sie uns die Mitte der Verschiebung der Maus folgen und der Bewegung eine kleine Lockerung hinzufügen. Dazu ändern wir folgenden Code:

dPoint.x = mouseXdPoint.y = mouseY

Geänderte Zeilen: 26,27

Zusammenfassend: Wir subtrahieren die halbe Größe der Karte von der Kartenposition, sodass sie zentriert ist. Dann fügen wir eine grundlegende Tweening-Funktion hinzu, die folgendermaßen geschrieben werden kann:

this += (that-this)*speed


Schritt 20: Hinzufügen benutzerdefinierter Grafiken

Um das Ganze abzurunden, habe ich eine Lupengrafik hinzugefügt, die ich in Photoshop vorbereitet habe. Ich habe es in einen Movieclip konvertiert, ihm einen Instanznamen gegeben und ihn dem Punkt folgen lassen, den wir für den dispacemenMapFilter verwenden.

””””””

Dies wird erreicht, indem die neue X- und Y-Position von object_frame_image gleich der dPoint-Position gesetzt wird. Subtrahieren Sie dann den Versatz für die Grafikkante, damit er perfekt zum Filtereffekt ausgerichtet ist.

Zusätzliche Zeilen: 4,5

Jetzt sollte unser Ergebnis so aussehen:


Schlussfolgerung

Wenn Sie gelernt haben, diesen Effekt selbst zu erzeugen, sollte die Einrichtung nicht länger als 15 Minuten dauern. Wenn Sie die Parameter für displacementMapFilter vergessen haben, können Sie diese jederzeit in der "Hilfe" nachschlagen. Dort erhalten Sie die aufgelistete Reihenfolge und was jeder Parameter tut.

Für schnelle Experimente können Sie auf meine Website gehen und im Abschnitt "Flash" unter "Test/Labs" nachsehen. Ich habe eine Reihe von DisplacementMapFilter-Testumgebungen, die Sie ausprobieren können.

Ich hoffe, Sie können diesen Filter in Ihrer kreativen Arbeit verwenden!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.