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

Erstellen Sie mithilfe der RGB-Verschiebung einen Retro-CRT-Verzerrungseffekt

by
Read Time:15 minsLanguages:

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

In diesem Tutorial erfahren Sie, wie Sie die drei verschiedenen Farbkanäle eines Bildes trennen, um einen RGB-Verschiebungseffekt zu erzielen. Ich zeige Ihnen auch einige Grafiktricks, um ein altes CRT-Display nachzuahmen.


Vorschau des Ergebnisses

Hier ist ein Beispiel für den Effekt, den wir erstellen werden:

Der wichtigste Aspekt in diesem Lernprogramm ist der RGB-Verschiebungseffekt. Ich werde auch zeigen, wie CRT-Scanlinien, Rauschen und Überrollbügelgrafiken erstellt werden.


Schritt 1: Informationen zu RGB-Bildern

Jedes Bild auf Ihrem Computerbildschirm wird in den Farben Rot, Blau und Grün angezeigt. Durch Mischen dieser drei Farben in verschiedenen Mengen kann Ihr Computer die anderen Farben im Spektrum erzeugen.

RGB Color ChannelsRGB Color ChannelsRGB Color Channels

Wenn die drei Farbkanäle nicht richtig ausgerichtet sind, wird das Bild nicht richtig zusammengesetzt, und Sie werden feststellen, dass die Ränder der einzelnen Kanäle aus den Seiten des Bildes "bluten".

Misaligned Color ChannelsMisaligned Color ChannelsMisaligned Color Channels

Genau das werden wir in diesem Tutorial tun. Trennen Sie ein Bild in seine drei Farbkanäle und transformieren Sie jedes einzeln, um einen Verzerrungseffekt zu erzielen. Lasst uns anfangen!

(Bei Wikipedia erfahren Sie viel mehr über die Funktionsweise von RGB-Farben.)


Schritt 2: Erstellen Sie einen Titelbildschirm

Sie müssen eine Grafik erstellen, auf die der Effekt angewendet werden soll. Ich habe mich entschieden, einen Titelbildschirm für Videospiele zu erstellen, aber Sie können jede Art von Grafik erstellen, die Sie möchten.

Erstellen Sie einen neuen Movieclip mit dem Namen "titleScreen" und fügen Sie Ihren Titelbildschirm (oder andere Grafiken) ein.

Ich denke, dass etwas mit Retro-Motiven am besten mit diesem Effekt funktioniert, da es mich an einen alten fehlerhaften Arcade-Bildschirm erinnert. Ich habe meinen Titelbildschirm mit einer Schriftart namens Commodore 64 Pixeled erstellt. Ich habe dem Text einen Glow-Filter hinzugefügt, um ihm den verschmierten, ausgeblasenen CRT-Look zu verleihen.

Glow Filter on TextGlow Filter on TextGlow Filter on Text

Wenn Sie mit Ihrem Design zufrieden sind, fügen Sie den titleScreen MovieClip zur Bühne hinzu und geben Sie ihm den Instanznamen 'titleScreen'.

titleScreen InstancetitleScreen InstancetitleScreen Instance

Schritt 3: Erstellen Sie die RGBShift-Klasse

Erstellen Sie eine neue Actionscript-Datei mit dem Namen 'RGBShift.as'. Speichern Sie diese Datei im selben Verzeichnis wie Ihre Flash-Hauptdatei. Fügen Sie diesen Code hinzu, um die Shell für die Klasse zu erstellen:

Anmerkung der Redaktor: Noch nicht mit klassenbasierter Codierung vertraut? Lesen Sie diesen Quick-Tipp, um den Einstieg zu erleichtern.

Dieser Code macht noch nichts. Die ersten 10 Zeilen importieren alle zusätzlichen Klassen, die wir benötigen. Ich habe zwei private Variablen mit den Namen '_centerX' und '_centerY' (ich benutze die Unterstriche, um private Variablen zu kennzeichnen). Diese beiden Variablen enthalten die x- und y-Koordinaten der Mitte unserer Grafik.

Beachten Sie, dass die Konstruktorfunktion (vorerst leer) ein DisplayObject akzeptiert. Auf diese Weise können wir jede Art von DisplayObject mit diesem Effekt verwenden (MovieClip, Sprite, Bitmap usw.). Wir werden den titleScreen MovieClip von der Bühne aus verwenden, aber wenn die Klasse jedes DisplayObject akzeptiert, bleibt es für spätere Verwendungszwecke flexibel .


Schritt 4: Fügen Sie die Funktion createBMD hinzu

Wir haben unsere Klasse flexibel gemacht, indem wir ihr erlaubt haben, jedes DisplayObject zu akzeptieren, aber wir werden tatsächlich ein BitmapData-Objekt benötigen, um den RGB-Verschiebungseffekt auszuführen. Erstellen wir eine Funktion, mit der BitmapData aus einem DisplayObject erstellt werden kann.

Fügen Sie diese Funktion Ihrer RGBShift-Klasse direkt unter dem Konstruktor hinzu:

Schauen Sie sich an, was diese Funktion bewirkt. In der ersten Zeile wird die Breite und Höhe des DisplayObjects verwendet, um ein neues transparentes BitmapData-Objekt mit der gleichen Größe wie das DisplayObject zu erstellen. Als nächstes wird das DisplayObject in die BitmapData gezeichnet. Schließlich werden die BitmapData an den Aufrufer zurückgegeben.


Schritt 5: Fügen Sie die Funktion createRGB hinzu

Hier findet die eigentliche Farbtrennung statt. Fügen Sie diese Funktion Ihrer Klasse hinzu:

Diese Funktion akzeptiert auch ein DisplayObject. Das wird dann an die Funktion createBMD() übergeben, die wir im vorherigen Schritt geschrieben haben und die es in BitmapData konvertiert. Als nächstes erstellen wir drei neue transparente BitmapData-Objekte. eine für jede Farbe. Wir erstellen sie in genau derselben Größe wie unsere Quell-BitmapData (aus dem DisplayObject).

Anschließend verwenden wir die copyChannel() -Methode von BitmapData, um einen einzelnen Farbkanal aus der BitmapData-Quelle in jedes der drei neuen BitmapData-Objekte zu kopieren.

Die letzte Zeile gibt einfach die drei neuen BitmapData-Objekte zurück, die in ein Array eingeschlossen sind.


Schritt 6: Verwenden Sie die Funktion createRGB im Konstruktor

Nachdem unsere Klassen createBMD und createRGB zusammenarbeiten, können wir sie jetzt verwenden. Fügen Sie dies als erste Codezeile in der Konstruktorfunktion für die RGBShift-Klasse hinzu:

Diese Zeile übergibt das DisplayObject nur an die Funktion createRGB(). createRGB() konvertiert es mit der Funktion createBMD() in BitmapData und trennt es dann in drei separate BitmapData-Objekte (eines für jeden Kanal). Schließlich gibt es das Array dieser drei Objekte an unser lokales rgbBMD-Array zurück. Sinn ergeben? Gut.


Schritt 7: Erstellen Sie Bitmaps aus den RGB-Kanälen

Wir haben jetzt ein Array von drei BitmapData-Objekten. Wir müssen aus jeder eine Bitmap erstellen, um sie auf dem Bildschirm anzuzeigen. Fügen Sie diese for-Schleife zur Konstruktorfunktion von RGBShift direkt unter der letzten Zeile hinzu, die wir hinzugefügt haben:

Anmerkung der Redaktor: Entschuldigen Sie die Unannehmlichkeiten, die durch das Anzeigen dieses speziellen Teils von ActionScript-Stolpern über FireFox entstehen. Fühlen Sie sich frei, es hier herunterzuladen.

Das meiste davon ist ziemlich einfach. Lass uns einen Blick darauf werfen.

  • Mit jedem BitmapData-Objekt in unserem rgbBMD-Array erstellen wir eine neue Bitmap.
  • Wir setzen die Glättung auf true, damit wir sie skalieren und drehen können, ohne dass sie pixelig wird. (Zeile 23)
  • Danach erstellen wir ein Container-Sprite und fügen die neue Bitmap zur Anzeigeliste des Containers hinzu. (Zeilen 25 und 26)
  • Jetzt beginnen wir endlich mit den Variablen _centerX und _centerY. Wir setzen jedes auf die Mitte der Bitmap, indem wir Breite und Höhe in zwei Hälften teilen.
  • Wir verwenden diesen Mittelpunkt, um die Bitmap im Container-Sprite und dann das Container-Sprite auf der Bühne zu versetzen. Ich werde im nächsten Schritt erklären, warum.
  • Schließlich fügen wir den Container Sprite zur Bühne hinzu (denken Sie daran, dass es für jeden unserer drei Farbkanäle einen Container gibt).

Schritt 8: Warum das Container Sprite verwenden?

Sie können diesen Effekt ohne den Container Sprite erstellen, indem Sie die Bitmaps direkt zur Bühne hinzufügen. Ich mag es, sie in einen Behälter zu wickeln, weil es einfacher ist, den Transformationspunkt zu steuern, wenn Sie Dinge wie Skalieren und Drehen tun.

Wenn Sie ein Objekt skalieren oder drehen, wird es normalerweise vom Ursprungspunkt (0,0) dieses Objekts transformiert. Das ist selten was ich will. Normalerweise möchte ich, dass die Transformationen von der Mitte des Objekts aus angewendet werden.

Beachten Sie, dass wir im letzten Abschnitt das x und y der Bitmaps auf die Hälfte der Breite und Höhe auf negativ setzen. Dadurch wird die Bitmap so platziert, dass ihr Mittelpunkt im Container-Sprite bei 0,0 liegt. Wenn wir Transformationen für das Container-Sprite durchführen, wird es von 0,0 des Containers transformiert, der jetzt das Zentrum unserer Bitmap ist.

Das einzige Problem ist, dass jetzt nur die untere Ecke unserer Bitmap sichtbar ist. Daher habe ich den Container Sprite x und y auf die Hälfte der Höhe und Breite der Bitmap eingestellt, um alles wieder in die richtige Position zu bringen.

Container Sprite OffsetContainer Sprite OffsetContainer Sprite Offset

Schritt 9: RGBShift-Klasse

Hier ist die RGBShift-Klasse bis zu diesem Punkt, falls Sie sich unterwegs verlaufen haben:

Anmerkung der Redaktor: Ich noch einmal, noch einmal müssen Sie die AS hier herunterladen. Entschuldigung für die Unannehmlichkeiten.


Schritt 10: Erstellen Sie die Hauptdokumentklasse

Wir haben also unsere RGBShift-Klasse, aber wie verwenden wir sie? Erstellen Sie zunächst eine neue Actionscript-Datei mit dem Namen Main.as und fügen Sie dann den folgenden Code hinzu:

Hier erstellen wir eine neue Instanz der RGBShift-Klasse und übergeben ihr den titleScreen MovieClip von der Bühne. Wir brauchen diesen MovieClip nicht mehr, also entfernen wir ihn von der Bühne und fügen stattdessen die neue RGBShift-Instanz hinzu.

Jetzt müssen wir nur noch diese Klasse mit unserem Flash-Dokument verknüpfen. Gehen Sie zurück zu Flash und setzen Sie die Dokumentklasse auf 'Main'.

Set the Document Class

Schritt 11: Testen

Sie sollten jetzt in der Lage sein, Ihre Flash-Datei (Steuerung - > Film testen) zu testen, ohne Fehler oder Warnungen zu erhalten.

First TestFirst TestFirst Test

Hmm, das sieht nicht ganz richtig aus, oder?

Was hier passiert, ist, dass wir die drei Farbkanäle übereinander gelegt haben, aber sie kombinieren und mischen die Farben nicht, sodass wir nur die oberste Ebene (blau) sehen. Lassen Sie uns das jetzt beheben.


Schritt 12: Ändern Sie den Mischmodus

Damit die Farbkanäle richtig gemischt werden, müssen wir ihren BlendMode in SCREEN ändern. Wir möchten jedoch nur den Mischmodus der zweiten und dritten Ebene ändern. Wir lassen die erste (untere) Ebene normal und mischen die beiden anderen Ebenen hinein.

Fügen Sie diesen Code der for-Schleife in der RGBShift-Klassenkonstruktorfunktion hinzu:

Dadurch wird überprüft, ob das aktuelle Bild nicht das erste Bild (0) ist, und anschließend wird die Eigenschaft blendMode auf SCREEN gesetzt.


Schritt 13: Testen Sie wieder

Testen Sie Ihren Film erneut und Sie sollten etwas sehen, das mit Ihrem titleScreen MovieClip identisch ist.

Successful TestSuccessful TestSuccessful Test

Ich weiß, was Sie denken; "Das war eine Menge Arbeit, um dieselbe Grafik wiederherzustellen, die bereits vorhanden war."

Jetzt besteht die Grafik aus drei Objekten, die wir einzeln transformieren können, um unsere Verzerrung zu erzeugen. Also hör auf zu jammern und lass uns weitermachen...


Schritt 14: Laden Sie die Tweener-Bibliothek herunter

Wir werden die Tweener-Bibliothek verwenden, um unsere Animation zu erstellen. Laden Sie es hier herunter, falls Sie es noch nicht haben.

Um Tweener zu verwenden, platzieren Sie den Hauptordner 'caurina' im selben Verzeichnis wie Ihre Flash-Datei und fügen Sie diese Importanweisung oben in der RGBShift-Klasse hinzu:


Schritt 15: Fügen Sie die randRange-Datei hinzu

Ich benutze diese randRange-Funktion als einfache Möglichkeit, zufällige Ganzzahlen innerhalb eines bestimmten Bereichs zu generieren. Sie können diese Funktion einfach zur RGBShift-Klasse hinzufügen, aber ich verwende diese Funktion so oft, dass ich sie gerne in einer separaten Datei aufbewahre, damit sie leichter zwischen verschiedenen Projekten geteilt werden kann.

Erstellen Sie eine neue Actionscript-Datei mit dem Namen 'randRange.as' im selben Ordner wie Ihre Flash-Hauptdatei. Fügen Sie diesen Code hinzu:

Wie Sie sehen, handelt es sich nur um eine einzelne Funktion, die in eine Paketdeklaration eingeschlossen ist. Wir können diese Funktion jetzt so verwenden, als ob sie Teil unserer Klasse wäre.

(Weitere Informationen zur Funktionsweise dieser Funktion finden Sie in Carlos´s Quick Tip.)


Schritt 16: Fügen Sie die Funktion distort() hinzu

Hier passiert die Magie. Fügen Sie diese Funktion der RGBShift-Klasse hinzu:

Wir werden diese distort() -Funktion für jeden unserer Farbkanäle separat ausführen, um den Verzerrungseffekt zu erzeugen.

Die Funktion akzeptiert ein Sprite (einen unserer Farbkanalbehälter). Anschließend wird eine Tweener-Animation auf dem Kanal mit einem zufälligen Y-Wert (zwischen -3 und 3) und einer zufälligen Zeitdauer (zwischen 1 und 2 Sekunden) gestartet. Dadurch wird jeder Kanal bei unterschiedlichen Geschwindigkeiten um unterschiedliche Beträge auf und ab verschoben.

Beachten Sie, dass ich hier erneut die Variable _centerY verwende, um den Y-Wert zu versetzen. Wir wechseln auch zu einem zufälligen Alpha-Wert (zwischen 0,8 und 1), damit jeder Kanal ein bisschen flackert. Wenn das Tween beendet ist, verwenden wir die Eigenschaft onComplete, um dieselbe Funktion distort() erneut aufzurufen. Mit onCompleteParams senden wir ihm den gleichen Farbkanal Sprite. Dies führt dazu, dass die Verzerrungsfunktion auf jedem unserer Farbkanäle immer wieder wiederholt wird.

Sehen Sie, was habe ich Ihnen gesagt..? Magie!

Um diese Verzerrungsschleife zu starten, müssen wir sie auf jedem unserer Farbkanal-Sprites einmal aufrufen. Fügen Sie diese Zeile am Ende der for-Schleife in der RGBShift-Konstruktorfunktion hinzu:


Schritt 17: Experimentieren

Sie sollten nun in der Lage sein, Ihren Film zu testen und den Verzerrungseffekt in Aktion zu sehen.

Persönlich mag ich die subtile Y-Verschiebung, die wir hier haben, aber Sie können eine Menge verrückter Sachen mit der Verzerrung machen, jetzt wo wir die Kanäle separat animieren.

Um mit der Verzerrung zu experimentieren, können Sie einfach die Eigenschaften und Werte im Tweener-Aufruf in der distort funktion ändern. In der Tweener-Dokumentation finden Sie eine vollständige Liste der tweenbaren Eigenschaften.

Hier ist ein Beispiel für eine starke Verzerrung, die ich durch einfaches Hinzufügen einiger weiterer Eigenschaften zum Tweener-Aufruf erstellt habe:

Schauen Sie sich die Funktion distort() an, die den Effekt erzeugt hat:


Schritt 18: Verbessern Sie den CRT-Look

Sie können hier anhalten, wenn Sie möchten. Die RGB-Trennung und Verzerrung sollte an diesem Punkt funktionieren.

Um den CRT-Effekt zu verbessern, müssen wir meiner Meinung nach einige weitere grafische Elemente hinzufügen. In den nächsten Schritten werden wir Scanlinien, einen rollenden schwarzen Balken, etwas statische und eine glänzende Reflexion hinzufügen.


Schritt 19: Fügen Sie die Scanlinien hinzu

Erstellen Sie auf der Bühne einen neuen MovieClip mit dem Namen "lines". Zeichnen Sie im MovieClip eine horizontale Linie mit 1 Pixel, die sich über die gesamte Breite Ihres Films erstreckt. Stellen Sie die Strichfarbe mit 40% Alpha auf Schwarz ein.

Kopieren Sie nun diese Zeile und fügen Sie sie immer wieder ein. Verschieben Sie sie jedes Mal um 2 Pixel nach unten, bis Sie Linien haben, die die gesamte Höhe Ihres Films abdecken. Der gewünschte Effekt ist eine 1-Pixel-Zeile und dann ein 1-Pixel-Abstand vor der nächsten Zeile.

Scan LinesScan LinesScan Lines

Schritt 20: Fügen Sie den Überrollbügel hinzu

Jetzt fügen wir den rollenden schwarzen Balken hinzu. Erstellen Sie einen neuen MovieClip mit dem Namen "bar". Zeichnen Sie im Inneren ein festes schwarzes Rechteck, das sich über die gesamte Breite Ihres Films erstreckt. Machen Sie es ungefähr 40 Pixel hoch. Stellen Sie den Farbstil des MovieClips auf Alpha bei 30%.

Bar MovieClipBar MovieClipBar MovieClip

Schritt 21: Animieren Sie den Überrollbügel

Erstellen Sie einen neuen MovieClip mit dem Namen "animatingBar" und platzieren Sie Ihren bar clip darin. Erstellen Sie eine kurze Bewegungs-Tween-Animation der Leiste, die sich vom oberen Rand Ihres Films nach unten bewegt. Diese Animation wird wiederholt, um den Rollbalkeneffekt zu erzielen.

Platziere den animatingBar-Clip auf der Bühne. Wählen Sie es aus und fügen Sie einen Unschärfefilter hinzu. Deaktivieren Sie die X- und Y-Unschärfeeinstellungen und setzen Sie die Unschärfe Y auf 20 und die Unschärfe X auf 0.

Stellen Sie den Mischmodus auf Überlagern. Dies ähnelt dem zuvor verwendeten Bildschirmmischmodus, ist jedoch nicht genau gleich.

AnimatingBar Blur FilterAnimatingBar Blur FilterAnimatingBar Blur Filter

Schritt 22: Erstellen Sie das statische Image

Erstellen Sie eine neue Photoshop-Datei mit der gleichen Größe wie Ihr Film. Füllen Sie die Hintergrundebene mit neutralem Grau (#808080). Wählen Sie Filter > Rauschen > Rauschen hinzufügen... Stellen Sie den Filter auf 100%, Gauß, Monochrom ein.

Noise Filter SettingsNoise Filter SettingsNoise Filter Settings

Speichern Sie das Bild als 'noise.jpg'. Wenn Sie nicht über Photoshop verfügen, können Sie meine 'noise.jpg' aus der Quell-Zip-Datei herunterladen.


Schritt 23: Animieren Sie die Statik

Importieren Sie das Bild noise.jpg in Ihre Flash-Datei. Erstellen Sie einen neuen MovieClip mit dem Namen "noise" und fügen Sie das Bild hinzu. Erstellen Sie einen neuen Keyframe in Frame 2 (F6) und drehen Sie das Bild um 180 Grad. Erstellen Sie einen weiteren Keyframe in Frame 3 und spiegeln Sie das Bild horizontal (Ändern > Transformieren > Horizontal spiegeln). Erstellen Sie einen vierten Keyframe in Frame 4 und drehen Sie das Bild erneut um 180 Grad. Wir haben jetzt eine 4-Frame-Animation mit flackernder Statik.

Sie können diesen Rauscheffekt auch mit ActionScript erzeugen, dies geht jedoch über den Rahmen dieses Lernprogramms hinaus.

Animating Noise

Schritt 24: Fügen Sie die Reflexion hinzu

Erstellen Sie auf der Bühne einen neuen MovieClip mit dem Namen "shine". Darin zeichnen Sie ein großes Oval, das sich halb über der Oberseite Ihres Films erstreckt. Wählen Sie den oberen Teil des Ovals aus und löschen Sie ihn.

Create Shine OvalCreate Shine OvalCreate Shine Oval

Ändern Sie die Füllung in einen linearen Farbverlauf und stellen Sie sie so ein, dass sie von weißem 20% Alpha oben zu weißem 5% Alpha unten übergeht. Nehmen Sie die Oberseite der Form und ziehen Sie sie ein wenig nach oben, um eine leichte Kurve zu erhalten.

Color the OvalColor the OvalColor the Oval

Schritt 25: Elementschichtung korrigieren

Wenn Sie Ihren Film jetzt testen, sehen Sie keine der neuen Grafiken, die wir gerade hinzugefügt haben, da die RGB-Ebenen über allem hinzugefügt werden. Um dies zu beheben, gehen Sie in die Main klasse und ändern Sie diese Zeile:

Dazu:

Dadurch wird das RGBShift-Objekt auf der untersten Ebene der Anzeigeliste unter allen anderen Grafiken hinzugefügt.


Abschluss

Dieses Tutorial soll ein Ausgangspunkt sein, keine endgültige Lösung. Nachdem Sie die RGB-Kanäle getrennt und einzeln animiert haben, können Sie mit dieser Technik viele verschiedene Dinge tun. Der Effekt würde wirklich gut aussehen, wenn er mit der statischen Verzerrungstechnik aus meinem früheren Tutorial kombiniert würde.

Schreiben Sie wie immer einen Kommentar und teilen Sie mir Ihre Meinung mit. Viel Glück!

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.