Share
In diesem Lernprogramm erfahren Sie, wie Sie die drei verschiedenen Farbkanäle eines Bildes voneinander trennen, um einen RGB-Shift-Effekt zu erzeugen. Ich zeige Ihnen auch einige Grafik-Tricks, um eine alte CRT-Anzeige nachzubilden.
Hier ist ein Beispiel für den Effekt, den wir erzeugen werden:
Der wichtigste Einstieg in diesem Tutorial ist der RGB-Verschiebungseffekt, aber ich werde auch demonstrieren, wie Sie die CRT-Scanlinien, das Rauschen und die Rollbalkengrafik erstellen.
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 erstellen.
Wenn die drei Farbkanäle nicht richtig ausgerichtet sind, wird das Bild nicht korrekt zusammengesetzt, und Sie sehen, wie die Kanten der einzelnen Kanäle aus den Seiten des Bilds heraus bluten.
Das ist genau das, was wir in diesem Tutorial machen werden. Trennen Sie ein Bild in seine drei Farbkanäle und wandeln Sie jedes Bild einzeln in einen Verzerrungseffekt um. Lasst uns anfangen!
(In Wikipedia erfahren Sie mehr darüber, wie RGB-Farben funktionieren.)
Sie müssen eine Grafik erstellen, auf die der Effekt angewendet werden soll. Ich habe mich für die Erstellung eines Videospiel-Titelbildschirms entschieden, 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 Retro-Thema mit diesem Effekt am besten 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 Glühen-Filter hinzugefügt, um ihm den verschmierten CRT-Look zu verleihen.
Wenn Sie mit Ihrem Design zufrieden sind, fügen Sie das hinzu Titelbildschirm MovieClip auf die Bühne und gib den Instanznamen 'titleScreen'.
Erstellen Sie eine neue Actionscript-Datei mit dem Namen 'RGBShift.as'. Speichern Sie diese Datei in demselben Verzeichnis wie Ihre Haupt-Flash-Datei. Fügen Sie diesen Code hinzu, um die Shell für die Klasse zu erstellen:
package import flash.display.DisplayObject; import flash.display.Sprite; import flash.display.BitmapData; import flash.display.Bitmap; import flash.display.BitmapDataChannel; import flash.display.BlendMode; import flash.events.Event; import flash.geom.Point; public class RGBShift erweitert Sprite private var _centerX: Number; private var _centerY: Nummer; // CONSTRUCTOR öffentliche Funktion RGBShift (dObj: DisplayObject)
Anmerkung des Herausgebers: Noch nicht mit klassenbasierter Kodierung vertraut? Schauen Sie sich diesen Quick Tip an, um Ihnen 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 namens '_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 alle Arten von Anzeigeobjekten mit diesem Effekt verwenden (MovieClip, Sprite, Bitmap usw.) Titelbildschirm MovieClip von der Bühne, aber wenn die Klasse ein beliebiges DisplayObject akzeptiert, bleibt es für spätere Anwendungen flexibel.
Wir haben unsere Klasse flexibler gemacht, indem wir zulassen konnten, dass ein beliebiges DisplayObject akzeptiert wird. Allerdings benötigen wir tatsächlich ein BitmapData-Objekt, um den RGB-Verschiebungseffekt auszuführen. Lassen Sie uns eine Funktion erstellen, die BitmapData aus einem DisplayObject erstellen kann.
Fügen Sie diese Funktion zu Ihrer RGBShift-Klasse direkt unter dem Konstruktor hinzu:
private Funktion createBMD (dObj: DisplayObject): BitmapData // Ein neues BitmapData-Objekt erstellen. Die Größe unseres DisplayObject-Objekts. // Zeichne das Anzeigeobjekt auf die Bitmap-Daten bmd.draw (dObj); Rückgabe bmd;
Schauen Sie sich an, was diese Funktion bewirkt. Die erste Zeile verwendet die Breite und Höhe des DisplayObject, um ein neues transparentes BitmapData-Objekt zu erstellen, das dieselbe Größe wie das DisplayObject hat. Als nächstes zeichnet es das DisplayObject in die BitmapData. Schließlich gibt es die BitmapData an den Aufrufer zurück.
Hier findet die eigentliche Farbseparation statt. Fügen Sie diese Funktion Ihrer Klasse hinzu:
private Funktion createRGB (dObj: DisplayObject): Array var bmd: BitmapData = createBMD (dObj); // bitmapData aus dem Anzeigeobjekt erstellen // ein neues Bitmap-Datenobjekt für jeden Farbkanal erstellen var r: BitmapData = new BitmapData (bmd.width, bmd.height, true, 0xFF000000); var g: BitmapData = neue BitmapData (bmd.width, bmd.height, true, 0xFF000000); var b: BitmapData = neue BitmapData (bmd.width, bmd.height, true, 0xFF000000); // kopiere die Daten von jedem Kanal in die entsprechenden Bitmap-Daten r.copyChannel (bmd, bmd.rect, neuer Point (), BitmapDataChannel.RED, BitmapDataChannel.RED); g.copyChannel (bmd, bmd.rect, neuer Punkt (), BitmapDataChannel.GREEN, BitmapDataChannel.GREEN); b.copyChannel (bmd, bmd.rect, neuer Punkt (), BitmapDataChannel.BLUE, BitmapDataChannel.BLUE); // ein Array mit den Bitmap-Daten für die 3 Farbkanäle zurückgeben return [r, g, b];
Diese Funktion akzeptiert auch ein DisplayObject. Das gibt es dann an createBMD () Funktion, die wir im vorherigen Schritt geschrieben haben, die sie in BitmapData konvertiert. Als Nächstes erstellen wir drei neue transparente BitmapData-Objekte. eine für jede Farbe. Wir erstellen sie mit der gleichen Größe wie unsere Quell-BitmapData (aus dem DisplayObject)..
Wir verwenden dann BitmapData's copyChannel () Methode zum Kopieren eines einzelnen Farbkanals aus den Quell-BitmapData in jedes der drei neuen BitmapData-Objekte.
Die letzte Zeile gibt einfach die drei neuen BitmapData-Objekte zurück, die in einem Array eingeschlossen sind.
Jetzt haben wir unsere createBMD und createRGB Klassen zusammenarbeiten, lassen Sie uns sie verwenden. Fügen Sie dies als erste Codezeile in der Konstruktorfunktion für die RGBShift-Klasse hinzu:
var rgbBMD: Array = createRGB (dObj);
Diese Zeile übergibt das DisplayObject nur an das createRGB () Funktion. createRGB () verwendet die createBMD () Diese Funktion konvertiert sie in BitmapData und trennt sie dann in drei separate BitmapData-Objekte (eines für jeden Kanal). Schließlich gibt es das Array dieser drei Objekte an unser lokales Objekt zurück rgbBMD Array. Sinn ergeben? Gut.
Wir haben jetzt ein Array von drei BitmapData-Objekten. Wir müssen eine Bitmap erstellen, um sie auf dem Bildschirm anzeigen zu können. Füge das hinzu zum Schleife zur Konstruktorfunktion von RGBShift direkt unter der letzten hinzugefügten Zeile:
Anmerkung des Herausgebers: Es tut uns leid für die Unannehmlichkeiten, dass die Anzeige dieses speziellen Teils von ActionScript FireFox auslöst. Fühlen Sie sich frei, es hier herunterzuladen.
Das meiste davon ist ziemlich einfach. Lass uns einen Blick darauf werfen.
Sie können diesen Effekt auch ohne den Container Sprite erstellen, indem Sie die Bitmaps direkt zur Bühne hinzufügen. Ich wickle sie gerne in einen Container ein, weil dadurch der Transformationspunkt einfacher gesteuert werden kann, wenn Sie Dinge wie Skalieren und Drehen ausführen.
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 ausgeführt werden.
Beachten Sie, dass wir im letzten Abschnitt das x und y der Bitmaps auf gesetzt haben Negativ eine halbe Breite und Höhe. Dadurch wird die Bitmap so platziert, dass sich ihr Mittelpunkt im Container Sprite auf 0,0 befindet. Wenn wir Transformationen für den Container Sprite durchführen, wird der Wert von 0,0 des Containers umgewandelt, der jetzt der Mittelpunkt unserer Bitmap ist.
Das einzige Problem ist, dass jetzt nur die untere Ecke unserer Bitmap sichtbar ist. Daher setze ich die Container Sprite x und y auf die halbe Höhe und Breite der Bitmap, um alles wieder in die richtige Position zu bringen.
Hier ist die RGBShift-Klasse bis zu diesem Punkt für den Fall, dass Sie unterwegs verloren gehen:
Anmerkung des Herausgebers: Ich muss noch einmal die AS hier herunterladen. Entschuldigung für die Unannehmlichkeiten.
Wir haben also unsere RGBShift-Klasse, aber wie verwenden wir sie? Beginnen Sie mit dem Erstellen einer neuen Actionscript-Datei mit dem Namen Main.as und fügen Sie dann folgenden Code hinzu:
package import flash.display.MovieClip; public class Main erweitert MovieClip public function Main () var rgb = new RGBShift (titleScreen); // aus dem titleScreen eine neue RGBShift erstellen removeChild (titleScreen); // entferne den ursprünglichen Titelbildschirm von der Bühne // füge ihn der Bühne hinzu addChild (rgb);
Hier erstellen wir eine neue Instanz der RGBShift-Klasse und übergeben die Titelbildschirm MovieClip von der Bühne. Wir brauchen den MovieClip nicht mehr, deshalb entfernen wir ihn von der Bühne und fügen stattdessen die neue RGBShift-Instanz hinzu.
Jetzt müssen wir diese Klasse nur noch mit unserem Flash-Dokument verknüpfen. Gehen Sie zurück zu Flash und setzen Sie die Dokumentenklasse auf 'Main'..
Sie sollten jetzt in der Lage sein, Ihre Flash-Datei (Steuerung -> Film testen) zu testen, ohne Fehlermeldungen oder Warnungen zu erhalten.
Hmm, das sieht nicht ganz richtig aus?
Was hier passiert, ist, dass wir die drei Farbkanäle übereinander angeordnet haben, aber sie kombinieren und mischen die Farben nicht. Wir sehen also nur die oberste Ebene (blau). Lassen Sie uns das jetzt beheben.
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 (unterste) Ebene normal und mischen die anderen beiden Ebenen hinein.
Fügen Sie diesen Code dem hinzu zum Schleife in der RGBShift-Klassenkonstruktorfunktion:
if (i> 0) // setze den SCREEN-Mischmodus für das 2. und 3. Bild. bmp.blendMode = BlendMode.SCREEN;
Dadurch wird sichergestellt, dass das aktuelle Bild nicht das erste Bild ist (0), und die Eigenschaft blendMode wird dann auf SCREEN gesetzt.
Testen Sie Ihren Film erneut und Sie sollten etwas sehen, das mit Ihrem titleScreen MovieClip identisch ist.
Ich weiß was du denkst; "Das war eine Menge Arbeit, um die gleiche Grafik wiederherzustellen, die bereits vorhanden war."
Nun besteht die Grafik jedoch aus drei Objekten, die wir individuell verändern können, um unsere Verzerrung zu erzeugen. Also hör auf zu jammern und lass uns fortfahren…
Wir werden die Tweener Library verwenden, um unsere Animation zu machen. Laden Sie es hier herunter, wenn 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 import-Anweisung oben in die RGBShift-Klasse ein:
caurina.transitions.Tweener importieren;
ich benutze das 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 in einer separaten Datei aufbewahren möchte, sodass sie einfacher zwischen verschiedenen Projekten geteilt werden kann.
Erstellen Sie eine neue Actionscript-Datei mit dem Namen 'randRange.as' im selben Ordner wie Ihre Haupt-Flash-Datei. Fügen Sie diesen Code hinzu:
package // gibt eine Zufallszahl zwischen dem angegebenen Bereich (einschließlich) zurück. public function randRange (min: int, max: int): int var randomNum: int = Math.floor (Math.random () * (max - min + 1 )) + min; return randomNum;
Wie Sie sehen, handelt es sich nur um eine einzelne Funktion, die in einer Paketdeklaration eingeschlossen ist. Wir können diese Funktion jetzt so verwenden, als wäre sie Teil unserer Klasse.
(Weitere Informationen zur Funktionsweise dieser Funktion finden Sie in Carlos 'Quick Tip.)
Hier passiert die Magie. Fügen Sie diese Funktion zur RGBShift-Klasse hinzu:
private Funktion verzerren (img: Sprite): void Tweener.addTween (img, y: randRange (_centerY-3, _centerY + 3), // randomize y Shift-Zeit: randRange (1,2) / 10, // randomize time alpha: randRange (8,10) / 10, // Randomize alpha-Übergang: "easeInOutSine", onComplete: Distort, // wenn die Verzerrung abgeschlossen ist, starten Sie die Verzerrung erneut onCompleteParams: [img]);
Wir werden das ausführen verzerren() Funktion für jeden unserer Farbkanäle separat, um den Verzerrungseffekt zu erzeugen.
Die Funktion akzeptiert ein Sprite (einen unserer Farbkanal-Container). Anschließend startet 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). Dadurch wird jeder Kanal um unterschiedliche Beträge mit unterschiedlichen Geschwindigkeiten auf und ab verschoben.
Beachten Sie, dass ich hier die Variable _centerY erneut 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 wenig flackert. Wenn das Tween beendet ist, rufen wir die Eigenschaft onComplete auf verzerren() wieder funktionieren. Mit onCompleteParams senden wir ihm den gleichen Farbkanal Sprite. Dies führt dazu, dass die Verzerrungsfunktion in jedem unserer Farbkanäle immer wieder wiederholt wird.
Was habe ich dir gesagt ...? Zauber!
Um diese Verzerrungsschleife zu starten, müssen wir sie einmal auf jedem unserer Farbkanäle Sprites aufrufen. Fügen Sie diese Zeile am Ende von ein zum Schleife in der RGBShift-Konstruktorfunktion:
verzerren (Behälter); // Starten Sie die Bitmap-Verzerrung
Sie sollten jetzt in der Lage sein, Ihren Film zu testen und den Verzerrungseffekt in Aktion zu sehen.
Ich persönlich mag die subtile Y-Verschiebung, die wir hier machen, aber Sie können mit der Verzerrung eine Menge verrückter Sachen machen, jetzt, da wir die Kanäle separat animieren lassen.
Um mit der Verzerrung zu experimentieren, können Sie einfach die Eigenschaften und Werte im Tweener-Aufruf in ändern verzerren Funktion. In der Tweener-Dokumentation finden Sie eine vollständige Liste der tweenbaren Eigenschaften.
Hier ist ein Beispiel für einige schwerwiegende Verzerrungen, die ich durch einfaches Hinzufügen weiterer Eigenschaften zum Tweener-Aufruf erstellt habe:
Besuche die verzerren() Funktion, die den Effekt erzeugt hat:
private Funktion verzerren (img: Sprite): void Tweener.addTween (img, y: randRange (_centerY-3, _centerY + 3), // ranomize y shift x: randRange (_centerX-10, _centerX + 10), time : randRange (1,2) / 10, // randomize ZeitskalaX: randRange (9,11) / 10, // randimize x scale alpha: randRange (5,10) / 10, // randomized Alpha-Übergang: "easeInOutSine" , onComplete: Verzerrung, // wenn Sie fertig sind, starten Sie die Verzerrung erneut onCompleteParams: [img]);
Sie können hier aufhören, wenn Sie möchten. Die RGB-Trennung und -Verzerrung sollte an dieser Stelle funktionieren.
Um den CRT-Effekt zu verbessern, müssen meiner Meinung nach einige grafische Elemente hinzugefügt werden. In den nächsten Schritten werden Scanlinien, ein rollender schwarzer Balken, statische und eine glänzende Reflexion hinzugefügt.
Erstellen Sie auf der Bühne einen neuen MovieClip namens "Linien". Zeichnen Sie im MovieClip eine horizontale Linie von 1 Pixel, die sich über die gesamte Breite Ihres Films erstreckt. Setzen Sie die Strichfarbe mit 40% Alpha auf Schwarz.
Kopieren Sie nun diese Zeile und fügen Sie sie immer wieder um jeweils 2 Pixel nach unten, bis Sie über die gesamte Höhe Ihres Films verfügen. Der gewünschte Effekt ist eine 1-Pixel-Zeile, dann ein Abstand von 1 Pixel vor der nächsten Zeile.
Jetzt fügen wir den rollenden schwarzen Balken hinzu. Erstellen Sie einen neuen MovieClip mit dem Namen "Bar". Zeichnen Sie innen ein schwarzes Rechteck, das sich über die gesamte Breite Ihres Films erstreckt. Machen Sie es etwa 40 Pixel hoch. Legen Sie den Farbstil des MovieClips auf 30% auf Alpha fest..
Erstellen Sie einen neuen MovieClip mit dem Namen "animatingBar" und platzieren Sie Ihr Bar Clip innen. 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 erhalten.
Platzieren Sie den animatingBar-Clip auf der Bühne. Wählen Sie es aus und fügen Sie einen Unschärfefilter hinzu. Heben Sie die Verknüpfung der X- und Y-Unschärfe-Einstellungen auf und setzen Sie für die Option "Unschärfe Y" 20 und für "Unschärfe X" 0.
Stellen Sie den Mischmodus auf Überlagern. Dies ähnelt dem zuvor verwendeten Screen-Mischmodus, ist jedoch nicht genau derselbe.
Erstellen Sie eine neue Photoshop-Datei, die der Größe Ihres Films entspricht. Füllen Sie die Hintergrundebene mit neutralem Grau (# 808080). Wählen Sie Filter> Geräusch> Geräusch hinzufügen…
Setzen Sie den Filter auf 100%, Gaussian, Monochromatic.
Speichern Sie das Bild als 'noise.jpg'. Wenn Sie nicht über Photoshop verfügen, können Sie meine 'noise.jpg' aus der Quelldatei herunterladen.
Importieren Sie die noise.jpg Bild in Ihre Flash-Datei. Erstellen Sie einen neuen MovieClip mit dem Namen "Noise" und fügen Sie das Bild hinzu. Erstellen Sie ein neues Schlüsselbild in Bild 2 (F6) und drehen Sie das Bild um 180 Grad. Erstellen Sie in Bild 3 ein weiteres Keyframe, und drehen 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 Rauschsignaleffekt auch mit ActionScript generieren. Dies würde jedoch den Rahmen dieses Lernprogramms sprengen.
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 es.
Ändern Sie die Füllung in einen linearen Farbverlauf und stellen Sie sie so ein, dass sie von weißem 20% Alpha oben und weißem 5% Alpha unten mischt. Fassen Sie die Form und ziehen Sie sie etwas nach oben, um eine leichte Kurve zu erhalten.
Wenn Sie Ihren Film jetzt testen, sehen Sie keine der gerade hinzugefügten neuen Grafiken, da die RGB-Ebenen über allem hinzugefügt werden. Um dies zu beheben, gehen Sie in die Main Klasse und ändern Sie diese Zeile:
addChild (rgb);
Zu diesem:
addChildAt (rgb, 0);
Dadurch wird das RGBShift-Objekt auf der untersten Ebene der Anzeigeliste unterhalb aller anderen Grafiken hinzugefügt.
Dieses Tutorial ist als Ausgangspunkt gedacht und nicht als endgültige Lösung. Nachdem Sie nun die RGB-Kanäle getrennt und einzeln animiert haben, können Sie mit dieser Technik viele verschiedene Dinge tun. Der Effekt würde sehr schön aussehen, wenn er mit der statischen Verzerrungstechnik aus meinem vorherigen Tutorial kombiniert würde.
Schreibe wie immer einen Kommentar und lass mich wissen, was du denkst. Viel Glück!
Accentsconagua