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

Erstellen eines statischen Verzerrungseffekts mithilfe des Verschiebungskartenfilters

by
Read Time:14 minsLanguages:

German (Deutsch) translation by Władysław Łucyszyn (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 vor einem Jahr im Januar 2010 veröffentlicht.

In diesem Tutorial erfahren Sie, wie Sie mit der DisplacementMapFilter-Klasse von AS3 einen wiederverwendbaren statischen Verzerrungseffekt für Schaltflächen-Rollover erstellen.


Endergebnis Vorschau

Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten werden:


Schritt 1: Informationen zur Verschiebungszuordnung

Bei einer Verschiebungskarte werden die Farbwerte eines Bilds verwendet, um die Position der Pixel in einem anderen Bild zu ändern. Dieser Effekt wird häufig verwendet, um eine flache Grafik um ein dimensionales Bild zu "wrap". Wir werden es hier verwenden, um eine Schaltfläche zu verzerren, sodass es so aussieht, als würde sie statische Interferenzen empfangen.

displacement exampledisplacement exampledisplacement example

Weitere Informationen zur Verschiebungszuordnung finden Sie hier.


Schritt 2: Richten Sie Ihre Flash-Datei ein

Erstellen Sie eine neue Flash-Datei (ActionScript 3).

Ihre Filmeinstellungen variieren je nach Spiel. Für diese Demo richte ich meinen Film auf 500 x 300, schwarzen Hintergrund und 30 fps ein.

Flash file setupFlash file setupFlash file setup

Schritt 3: Erstellen Sie eine einfache Schaltfläche

Erstellen Sie ein neues Schaltflächensymbol auf der Bühne (Einfügen > Neues Symbol). Entwerfen Sie die 4 Zustände für Ihre Schaltfläche. Das genaue Design sollte zu Ihrem Spiel passen. Etwas Glühendes und Halbtransparentes funktioniert gut mit diesem Effekt.
Ich habe eine Schriftart namens Genetrix Square für meine verwendet, aber Sie sollten etwas verwenden, das dem Aussehen Ihres Spiels entspricht.

Geben Sie Ihrer Schaltfläche den Instanznamen 'button1'.

button propertiesbutton propertiesbutton properties

Schritt 4: Testen

Wenn Sie Ihren Film jetzt speichern und testen (Steuerung > Film testen), sollte Ihre Schaltfläche auf der Bühne mit den von Ihnen entworfenen Rollover-Zuständen auf die Maus reagieren. So was:


Schritt 5: Erstellen Sie die JitteryButton-Klasse

Wir müssen unserer Schaltfläche benutzerdefinierte Funktionen hinzufügen. Dies erreichen wir, indem wir eine neue benutzerdefinierte Klasse erstellen und unsere einfache Schaltfläche darin platzieren.

Erstellen Sie eine neue ActionScript-Datei mit dem Namen 'JitteryButton.as'. Speichern Sie diese Datei im selben Verzeichnis wie Ihre Flash-Hauptdatei. Fügen Sie diesen Code hinzu, um den Wrapper für unsere Schaltfläche zu erstellen:

Bisher akzeptiert dieser Code lediglich die einfache Schaltfläche und speichert einen Verweis darauf. Wir werden später weitere Funktionen hinzufügen.


Schritt 6: Erstellen Sie die Spielklasse

Erstellen Sie eine neue ActionScript-Datei mit dem Namen "Game.as". Dies wird die Dokumentklasse für unseren Film sein. Speichern Sie es im selben Verzeichnis wie die Haupt-Flash-Datei.

Dieser Code fügt unseren benutzerdefinierten Button Wrapper um den Button auf der Bühne hinzu:

Dieser Code erstellt eine neue Instanz unserer benutzerdefinierten JitteryButton-Klasse und übergibt ihr die Schaltfläche auf der Bühne ('button1').

Natürlich wird Ihre Dokumentklasse am Ende ganz anders aussehen, da sie den Code für Ihr Spiel enthält. Hier geht es nur um den Code für unseren Button.

Zurück in Ihrer Flash-Datei setzen Sie die Dokumentklasse auf "Game". Denken Sie daran, dass Sie die Dateierweiterung hier nicht einfügen.

set the document class

Schritt 7: Erneut testen

Wenn Sie Ihren Film zu diesem Zeitpunkt speichern und erneut testen, sollten Sie genau dasselbe sehen wie beim Testen in Schritt 4. Der einzige Unterschied besteht darin, dass unser Code jetzt so eingerichtet ist, dass er unser benutzerdefiniertes Verhalten hinzufügen kann.


Schritt 8: Erstellen Sie das Verschiebungskartenbild

Wir erstellen jetzt das Bild des statischen Musters, mit dem wir unsere Schaltflächengrafik verzerren.

Öffnen Sie Photoshop und erstellen Sie ein neues Bild mit neutralem Grau (#808080). Das Bild sollte etwas breiter als Ihre Schaltfläche und etwa drei- oder viermal so hoch sein. Mein Button ist 277x56 und mein Bild ist 310x220.

Wir beginnen mit einem neutralen Grau, da dies unser Bild nicht beeinträchtigt.

create a new imagecreate a new imagecreate a new image

Schritt 9: Rauschen hinzufügen

Wir werden jetzt unserem Bild ein wenig Rauschen hinzufügen. Dies macht sich in unserem statischen Effekt nicht sehr bemerkbar, verleiht ihm jedoch einen zusätzlichen Schimmer. Sie können diesen Schritt überspringen, wenn Sie möchten.

Duplizieren Sie die Hintergrundebene und nennen Sie die neue Ebene "Noise". Sie sollten jetzt 2 Schichten mit neutralem Grau gefüllt haben. Wählen Sie die neue Ebene Rauschen aus und wählen Sie Filter > Rauschen > Rauschen hinzufügen. Stellen Sie den Betrag auf 120% und die Verteilung auf Uniform ein. Überprüfen Sie Monochromatisch.

Klicken Sie auf OK.

Stellen Sie die Ebene "Rauschen" auf 10% Deckkraft ein.

add noise to the Noise layeradd noise to the Noise layeradd noise to the Noise layer

Schritt 10: Zeilen hinzufügen

Erstellen Sie eine neue Ebene mit dem Namen "Lines". Verwenden Sie jetzt einen 1px-Bleistiftpinsel, um dem Bild einige horizontale schwarze und graue Linien hinzuzufügen.

Denken Sie daran, wie sich diese Linien auf unser Bild auswirken: Alles, was dunkler als neutral ist, verschiebt unser Bild in die eine und alles, was heller ist, in die andere Richtung.

draw horizontal linesdraw horizontal linesdraw horizontal lines

Schritt 11: Speichern Sie das Verschiebungskartenbild

Wählen Sie Datei > Für Web und Geräte speichern und speichern Sie Ihr Bild als 8-Farben-GIF mit dem Namen "staticMap.gif".

save for websave for websave for web

Schritt 12:

Importieren Sie in Flash die Datei 'staticMap.gif' in Ihre Bibliothek (Datei > Importieren > In Bibliothek importieren...). Öffnen Sie die Verknüpfungseigenschaften, aktivieren Sie Export für ActionScript und setzen Sie den Klassennamen auf 'StaticMap'.

import the imageimport the imageimport the image

Wir können dieses Bild jetzt in unserem Code mithilfe des StaticMap-Klassennamens referenzieren.


Schritt 13: Erstellen Sie den Verschiebungskartenfilter

Fügen Sie diese Funktion Ihrer JitteryButton-Klasse hinzu:

Diese Funktion erstellt einfach den Verschiebungskartenfilter mithilfe der BitmapData aus unserem StaticMap-Bild. Dies muss nicht in seiner eigenen Funktion sein, ich mache es nur aus Gründen der Klarheit.

Damit es funktioniert, müssen wir diese Klassen oben in unserer JitteryButton-Klasse importieren:

(Weitere Informationen zur DisplacementMapFilter-Klasse finden Sie in der AS3-Dokumentation.)


Schritt 14: Wenden Sie den Filter an

Wir werden jetzt eine Variable erstellen, die den Filter enthält. Wir wenden es auf die Schaltfläche an, indem wir die Eigenschaft 'filters' der Schaltfläche auf ein Array festlegen, das unseren Filter enthält.

Hier ist die bisherige JitteryButton-Klasse (Zeilen 18 und 25 sind neu):


Schritt 15: Erneut testen

Wenn wir die Datei jetzt speichern und testen, können wir sehen, dass der Verschiebungskartenfilter auf unsere Schaltfläche angewendet wird:

Sie können sehen, wie die horizontalen Linien, die wir in der StaticMap gezeichnet haben, die Pixel in unserer Schaltfläche nach links und rechts verschieben. Das Ausmaß der Verschiebung hängt von der Dunkelheit der Linien im Bild und der Einstellung scaleX in unserem Verschiebungskartenfilter ab.

Leider ist die Statik nicht animierend, so dass sie ziemlich lahm aussieht. Lassen Sie uns das jetzt beheben...


Schritt 16: Fügen Sie die randRange-Funktion hinzu

Dies ist eine einfache Funktion, die eine zufällige Ganzzahl innerhalb eines bestimmten Bereichs zurückgibt:

Ich finde, es macht es ein bisschen einfacher, zufällige Werte zu generieren. Wir werden ein paar verschiedene Werte für unseren statischen Effekt zufällig auswählen, damit er nützlich ist.

Fügen Sie es Ihrer JitteryButton-Klasse hinzu.


Schritt 17: Animieren Sie den Verschiebungskartenfilter

Es gibt verschiedene Möglichkeiten, den statischen Effekt zu animieren. Die erste besteht darin, den Betrag der horizontalen Verschiebung zu ändern, der auf unsere Schaltfläche angewendet wird. Dies erfolgt über die scaleX-Eigenschaft des DisplacementMapFilter.

Wir können auch die Position des StaticMap-Bildes in Bezug auf unsere Schaltfläche animieren. Dadurch wird sichergestellt, dass nicht immer dieselben Bereiche der Schaltfläche verschoben werden.

Um den Effekt zu animieren, fügen wir eine Funktion namens 'displayStatic' hinzu, die bei jedem Frame aufgerufen wird, um diese beiden Eigenschaften des Filters zu aktualisieren. Fügen Sie diese Funktion Ihrer JitteryButton-Klasse hinzu:

In der ersten Zeile dieser Funktion wird das Ausmaß der horizontalen Verschiebung auf einen Wert zwischen den Variablen fuzzMin und fuzzMax randomisiert. Fügen Sie Ihrer JitteryButton-Klasse diese beiden Variablen hinzu:

In der zweiten Zeile der Funktion displayStatic wird die Y-Position der StaticMap in Bezug auf unsere Schaltfläche zufällig ausgewählt. Wir haben dem Filter bereits gesagt, dass er unser StaticMap-Bild verwenden soll, sodass wir nur die Position aktualisieren müssen.

In der dritten Zeile wird der Filter nur erneut auf unsere Schaltfläche angewendet.

Das letzte, was wir tun müssen, um diese Animation zu erhalten, ist das Hinzufügen des ENTER_FRAME-Ereignis-Listeners. Fügen Sie diese Zeile der JitteryButton-Konstruktorfunktion hinzu:

Und vergessen Sie nicht, die Event-Klasse oben in der JitteryButton-Datei zu importieren:


Schritt 18: Erneut testen

Wenn Sie den Film jetzt speichern und testen, werden Sie sehen, dass der Effekt unsere Schaltfläche zum Schimmern und Springen bringt:

Das ist ziemlich cool, aber wir möchten, dass der Effekt auch auf die Maus reagiert. Weiter...


Schritt 19: Passen Sie die Intensität des Effekts an

Wir werden nun zwei Funktionen hinzufügen, um die Intensität des Jitter-Effekts anzupassen. Wir werden den Effekt nennen, den wir derzeit mit niedriger Intensität haben, also werden wir eine Einstellung für mittlere und hohe Intensität hinzufügen. Fügen Sie Ihrer JitteryButton-Klasse folgende Funktionen hinzu:

Sie können sehen, dass wir die Intensität anpassen, indem Sie die Werte der Variablen fuzzMin und fuzzMax festlegen. Auf diese Weise verwendet unsere displayStatic-Funktion diese neuen Werte, wenn sie die horizontale Verschiebung des Filters festlegt.

Wir haben auch eine Variable namens staticLength hinzugefügt. Wir werden dies verwenden, um festzulegen, wie lange der intensivere Effekt anhalten soll (die Anzahl der Frames), bevor er zu niedriger Intensität zurückkehrt. Fügen Sie diese Variable Ihrer JitteryButton-Klasse hinzu und ändern Sie Ihre displayStatic-Funktion wie folgt:

Dieser neue Code dekrementiert die Variable staticLength und setzt fuzzMin und fuzzMax auf die Werte niedriger Intensität zurück, sobald der Wert von staticLength Null erreicht.


Schritt 20: Richten Sie die Button-Rollover-Handler ein

Damit unsere Schaltfläche auf die Maus reagiert, müssen zwei Maus-Ereignis-Listener und jeweils eine Ereignishandlerfunktion hinzugefügt werden.

Fügen Sie die Maus-Listener in die Konstruktorfunktion Ihrer JitteryButton-Klasse ein:

Erstellen Sie nun die beiden Ereignishandler, auf die in diesen beiden neuen Zeilen verwiesen wird. Diese gehören auch zur JitteryButton-Klasse:

Damit dies alles funktioniert, müssen wir die MouseEvent-Klasse oben in unserer JitteryButton-Datei importieren:

Wenn unsere Schaltfläche nun ein ROLL_OVER-Ereignis erkennt, ruft sie den Ereignishandler auf, der wiederum unsere setStaticHigh-Funktion aufruft. Diese Funktion erhöht die Werte von fuzzMin und fuzzMax (zum Festlegen der horizontalen Verschiebung) für die durch die Variable staticLength angegebene Dauer.


Schritt 21: Fügen Sie den Skalierungseffekt hinzu

Wir könnten hier aufhören. Unser Effekt ist gut animierend und reagiert auf Maus-Rollover. Ich habe immer noch das Gefühl, dass hier etwas fehlt. Fügen wir einen kleinen Skalierungseffekt hinzu.

Sie müssen die Tweener-Bibliothek für diesen Schritt herunterladen, falls Sie sie noch nicht haben. Legen Sie den Ordner 'caurina' in Ihr Projektverzeichnis und importieren Sie die Tweener-Klassen oben in Ihre JitteryButton-Datei:

Mit Tweener können wir einige nette Skalierungseffekte mit nur wenigen Codezeilen hinzufügen. Wir können jedem unserer Rollover-Ereignishandler eine Zeile hinzufügen:

Hier fügen wir dem Rollover-Handler eine Animation hinzu, die die scaleX-Eigenschaft der Schaltfläche über 0,5 Sekunden auf 110% skaliert. Wir verwenden einen elastischen Übergangstyp, um ihm das Sprunggefühl zu verleihen. Im Rollout-Handler machen wir dasselbe in umgekehrter Reihenfolge und reduzieren es auf 100%.

Weitere Informationen zur Verwendung von Tweener finden Sie in der Tweener-Dokumentation.


Schritt 22: Sound hinzufügen

Das Letzte, was wir tun müssen, um diesen Effekt zu vervollständigen, ist, etwas Sound hinzuzufügen. Ich habe meinen Soundeffekt in Garage Band gemacht. Sie können Ihre eigenen erstellen oder versuchen, eine online zu finden.

Wenn Sie eine haben, die Ihnen gefällt, importieren Sie sie in Ihre Bibliothek und stellen Sie die zu exportierende Verknüpfung als 'StaticSound' ein.

Um es unserem JitteryButton hinzuzufügen, müssen wir zuerst die Sound-Klasse importieren:

Dann werden wir es initialisieren (fügen Sie diese Zeile kurz vor der Konstruktorfunktion hinzu):

Im Rollover-Handler teilen wir dem Sound mit, dass er abgespielt werden soll:

Jetzt können wir loslegen. Testen Sie Ihren Film und alles sollte funktionieren. Wenn Ihre Schaltfläche oder Ihr Sound nicht richtig funktioniert, überprüfen Sie die Quelldateien, um meine abgeschlossene JitteryButton-Klasse zu sehen.


Schritt 23: Fügen Sie weitere Schaltflächen hinzu

Das Coole daran, diesen Effekt als separate Klasse zu erstellen, die unsere Schaltfläche umschließt, ist, dass wir ihn problemlos für andere Schaltflächen wiederverwenden können.

Wenn Sie Ihrem Spielmenü weitere Schaltflächen hinzufügen möchten, erstellen Sie einfach eine neue Schaltfläche und fügen Sie sie der Bühne hinzu. Geben Sie ihm den Instanznamen 'button2'. Erstellen Sie dann in Ihrer Dokumentklasse (der Datei 'Game.as') einen neuen JitteryButton und übergeben Sie ihm die neue Schaltfläche. So könnte das aussehen:


Abschluss

Sie müssen diesen Code mit ziemlicher Sicherheit ein wenig ändern, damit er in die Struktur Ihres Spiels passt. Hoffentlich gibt Ihnen dieses Tutorial einen guten Ausgangspunkt.

Wenn Sie das Aussehen dieses Effekts ändern möchten, können Sie versuchen, verschiedene Bildtypen für Ihre StaticMap-Grafik zu verwenden und die Werte für fuzzMin und fuzzMax anzupassen.

Dies ist mein erstes Tutorial. Lassen Sie mich wissen, ob ich beim nächsten Mal etwas besser machen kann. Danke fürs Lesen!

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.