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

Lassen Sie Ihr Flash-Logo mit Alpha Gradient Masking blingen

by
Read Time:11 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 im August 2009 veröffentlicht.

In diesem Tutorial erfahren Sie, wie Sie ein Logo erstellen, dessen Animation eine Alpha-Gradientenmaskierung enthält. Ich werde einige Tipps und Tricks erklären, wie man es zum Laufen bringt und einige häufige Probleme vermeidet.


Endergebnis

Zunächst ein kurzer Blick auf das, was wir anstreben:


Einführung

Dies ist ein Tutorial für Anfänger, in dem ich ausführlich erläutere, wie dieses Logo und seine Animation erstellt werden. Unterwegs werde ich einige Worte über Verlaufsmaskierung, Bitmaps und Formen in Flash und das erforderliche ActionScript erwähnen. Zunächst werden wir uns kurz mit einigen Photoshop-Techniken befassen, aber die meisten Bildbearbeitungsprogramme sollten ausreichen.

Lassen Sie uns anfangen!


Schritt 1: Erstes Design

Stellen Sie sicher, dass Sie zunächst die Quelldateien herunterladen. Öffnen Sie Logo.psd in der Zip-Datei.

Sie können auch die in diesem Beispiel verwendete Schriftart Lubalin Graph Bold herunterladen und installieren. Dies ist optional, da Sie beim Öffnen der Datei in Photoshop gewarnt werden, dass die Schriftart fehlt. In dieser Übung können Sie jedoch auch ohne diese Schriftart perfekt folgen.

Wenn Sie Logo.psd öffnen, sollten Sie Folgendes sehen:

Wie Sie sehen können, haben wir eine graue Hintergrundebene und eine Textebene mit dem Namen "Text". Wenn Sie die Lubalin-Schriftart installiert haben, können Sie den Text in einen persönlicheren Text ändern oder die Schriftart nach Ihren Wünschen ändern. Die graue Hintergrundebene ist sehr oberflächlich und ich habe sie nur ausgewählt, um das Endergebnis zu veranschaulichen.


Schritt 2: Wenn Sie kein Photoshop haben

(Sie können diesen Schritt überspringen, wenn Sie Photoshop verwenden.)

Hier werde ich kurz die in Photoshop verwendeten Ebenenstile erläutern, damit diejenigen unter Ihnen, die das Logo so wörtlich wie möglich kopieren möchten, die Möglichkeit haben, dies in Ihrer eigenen Bildbearbeitungssoftware zu tun. Es ist jedoch nicht wichtig, dass Ihr Logo gleich aussieht.

  • Schlagschatten, Abstand 6 px, Verbreitung 23%, Größe 10 px.
  • Innerer Schatten, Abstand 5 px, Größe 5 px.
  • Äußeres Leuchten, gelblich, Größe 6 px.
  • Innere Abwärtsschräge, Größe 32 px, 21% Tiefe.
  • Kontur, gerade, 50% Reichweite.
  • Textur, einfach ein 4x4 Pixel diagonales Linienmuster.
  • Farbüberlagerung, #A84D4A auf dem Text.
  • Strich, Größe 2 px, Farbe #E5C477.

Hoffentlich gibt Ihnen dies eine Vorstellung davon, wie Sie etwas Ähnliches erstellen können. Auch hier ist es nicht wichtig, die in diesem Tutorial erläuterte Technik zu verstehen.


Schritt 3: Erstellen der Effektskizze

Bevor wir in Flash springen, können wir genauso gut das letzte tun, was in Photoshop benötigt wird. Das heißt, Sie erstellen einen Überblick über den Effekt, den wir erzielen werden. Mach dir keine Sorgen, wenn es noch keinen Sinn ergibt, du wirst das ganze Bild sehr bald sehen!

  • Deaktivieren Sie vorerst die Ebenenstile auf Ihrer Textebene. Stellen Sie sicher, dass diese Ebene ausgewählt ist.
  • Klicken Sie bei gedrückter Strg-Taste auf die Textebene, um sie auszuwählen.
  • Gehen Sie zu Auswahl > Umkehren oder drücken Sie Umschalt + Strg + I.
  • Gehen Sie zu Auswählen > Ändern > Erweitern, wählen Sie 2 Pixel und klicken Sie auf OK.
  • Drücken Sie Strg-C, um Ihre Auswahl zu kopieren.
  • Erstellen Sie eine neue Ebene mit dem Namen "Outline" und wählen Sie sie aus.
  • Drücken Sie Strg-V, um es einzufügen.

Sie sollten mit diesem enden:

Wählen Sie die Gliederungsebene und drücken Sie "V", um das Verschieben-Werkzeug auszuwählen. Richten Sie den Umriss mit Ihrer Tastatur so aus, dass er perfekt über dem Originaltext liegt:

Stellen Sie sicher, dass der Umriss vollständig weiß ist.


Schritt 4: Exportieren der Bilder für Flash

Blenden Sie die Gliederungsebene und die Hintergrundebene aus. Gehen Sie zu "Für Web und Geräte speichern" und speichern Sie als PNG-Datei. Nennen Sie es logo.png. Es sollte so aussehen:

Blenden Sie als Nächstes die Textebene aus und bringen Sie die Gliederungsebene zurück. Speichern Sie als "outline.png". Es sollte so aussehen:

Stellen Sie sicher, dass Sie als hochqualitatives, transparentes PNG speichern!


Schritt 5: Vorbereitungen in Flash

Starten Sie Flash und erstellen Sie eine neue AS3-Datei. Da das von uns erstellte Logo in Photoshop 580 x 170 Pixel groß ist, verwenden wir für unsere Flash-Datei dieselben Abmessungen. Lassen Sie die FPS- und Hintergrundfarbe unverändert.

Erstellen und benennen Sie diese Ebenen:

  • Scheinen
  • Maske
  • Gliederung
  • Logo
  • Hintergrund
  • Aktionen

Ordnen Sie sie in der Reihenfolge wie in der Liste an, sodass "Aktionen" auf der niedrigsten Z-Ebene und "Glänzen" auf der höchsten Ebene liegt. Wählen Sie nun die Hintergrundebene aus und erstellen Sie ein Rechteck, das die Bühne abdeckt. Machen Sie seine Farbe zu einem Farbverlauf von dunkelgrau (#222222) zu hellgrau (#AAAAAA). Verwenden Sie das Verlauf-Transformation-Werkzeug (Hotkey F), um es wie folgt auszurichten:

Sperren Sie die Hintergrundebene, da wir sie nicht mehr ändern werden.


Schritt 6: Importieren des Logos in Flash

Wählen Sie die Logo-Ebene. Gehen Sie zu Datei > Importieren > In Bühne importieren oder drücken Sie Strg + R. Wählen Sie das zuvor aus Photoshop exportierte logo.png aus. Das Bild sollte perfekt in Ihrer Flash-Datei ausgerichtet sein. Sie können jetzt auch die Logo-Ebene sperren.

Wählen Sie die Gliederungsebene aus und drücken Sie erneut Strg + R, um diesmal die Gliederung.png zu importieren. Es sollte auch genau richtig ausgerichtet sein. Da die Gliederung derzeit ausgewählt ist, ist jetzt ein guter Zeitpunkt, um F8 zu drücken und sie in einen MovieClip umzuwandeln. Nennen Sie den MovieClip "Outline", und fügen Sie dann im Eigenschaftenfenster den Instanznamen "outline" ein. Sie sollten etwas Ähnliches sehen:

Gehen Sie jetzt zum Bedienfeld Bibliothek und überprüfen Sie die Eigenschaften Ihres logo.png. Persönlich würde ich dies auf verlustfreie Qualität einstellen, da dieses Logo wahrscheinlich als Überschrift oder ähnliches verwendet wird und ich der Meinung bin, dass Sie es sich in diesen Fällen leisten können, nicht an der Qualität zu sparen. Es ist Ihr Anruf, aber bei verlustfreier Qualität wird es mit Sicherheit am besten aussehen!


Schritt 7: Eine geringfügige (aber notwendige) Anpassung

Lassen Sie Ihre Gliederungsinstanz auswählen und fügen Sie einen Unschärfefilter hinzu. Stellen Sie die X- und Y-Unschärfeeigenschaften auf 2 Pixel ein und wählen Sie eine hohe Qualität. Dadurch sieht das Endergebnis viel besser aus.

Bitte beachten Sie, dass das Hinzufügen des Unschärfefilters Flash automatisch zwingt, den Umriss als Bitmap zu rendern. Wenn Sie den Unschärfefilter nicht hinzufügen, müssen Sie mindestens das Kontrollkästchen "Als Bitmap zwischenspeichern" aktivieren. Mehr dazu in Schritt 10.

Sie können diese Ebene auch sperren. Außerdem wäre jetzt ein guter Zeitpunkt, um Ihre Flash-Datei zu speichern!


Schritt 8: Erstellen der Maske

Wählen Sie die Maskenebene und dann das Rechteckwerkzeug. Deaktivieren Sie die Strichfarbe, wenn Sie gerade eine angewendet haben.

Zeichnen Sie ein Rechteck, machen Sie es fast 60 Pixel breit und 320 Pixel hoch. Gehen Sie dann bei ausgewählter Form in das Farbbedienfeld und geben Sie ihm einen linearen Verlauf mit drei gleichmäßig verteilten Punkten (mit Punkten meine ich die kleinen Griffe, die die Farben eines Verlaufs definieren). Wählen Sie eine beliebige Farbe für die Punkte, aber stellen Sie sicher, dass Sie die mittlere Farbe bei 100% Alpha und die äußere Farbe bei 0% Alpha haben. Es sollte so aussehen:

Drücke F8 mit der ausgewählten Form und verwandle es in einen MovieClip namens "Mask". Nennen Sie die Instanz der Maske "theMask". Zuletzt drehen Sie die Maske um 45 Grad im Uhrzeigersinn. Eine einfache Möglichkeit, dies zu tun, besteht darin, zuerst Q für das Transformationswerkzeug zu drücken und dann die Umschalttaste gedrückt zu halten, während es gedreht wird, damit es bis zu 45° -Stopps einrastet.


Schritt 9: Animieren der Maske

Gehen Sie zu Bild 70 der Maskenebene in unserer Hauptzeitleiste und drücken Sie F5, um Bilder an dieser Stelle einzufügen. Klicken Sie mit der rechten Maustaste auf ein vorheriges Bild und erstellen Sie ein Bewegungs-Tween. Halten Sie die Umschalttaste gedrückt und ziehen Sie die Maske auf die rechte Seite unserer Bühne. Erstellen Sie außerdem Frames mit der Frame-Nummer 70 für die Ebenen Hintergrund, Logo und Umriss. Die Maske sollte von hier gehen:

Bis hierhin:


Schritt 10: Alpha-Verläufe verstehen

Wie Sie wahrscheinlich inzwischen herausgefunden haben, verwenden wir die Alpha-Verlaufsform der Maske, um den Umriss schrittweise ein- und auszublenden. Wenn Sie eine Maske in Flash haben, haben Sie diese normalerweise auf einer Ebene und verwandeln sie in eine Maskenebene. Die Maskenebene hat dann "untergeordnete" Ebenen, deren Inhalt maskiert wird. Was passiert nun, wenn wir dies mit unserem aktuellen Setup tun? Das ist das Ergebnis:

Wie Sie sehen können, ist es kein reibungsloser Übergang. Es gibt überhaupt kein Gradientenverhalten.

Warum ist das dann so?

Damit Alpha-Verläufe funktionieren, muss Flash Ihre Objekte als Bitmaps und nicht als Formen rendern. Unsere aktuelle Maske ist definitiv eine Form (wenn auch in einem MovieClip) und wird als solche gerendert. Das kann auf zwei Arten behoben werden:

  • Die Flash-IDE-Methode:

    Lassen Sie in Flash CS4 Ihre Maske auswählen. Aktivieren Sie im Eigenschaftenfenster im Abschnitt Anzeige das Kontrollkästchen "Als Bitmap zwischenspeichern".
    In Flash CS3 finden Sie es direkt unter den Mischmodi mit der Bezeichnung "Laufzeit-Bitmap-Caching verwenden".

  • Der ActionScript-Weg:

    Mein bevorzugter Ansatz ist die Verwendung von ActionScript. Hauptsächlich, weil ich als Entwickler (mehr als als Designer) die Kontrolle über alle Aspekte über Code haben möchte, damit ich jeden Effekt auf jedes dynamisch erstellte Objekt anwenden kann. Jedes Objekt, das DisplayObject unterordnet, verfügt über eine boolesche Eigenschaft cacheAsBitmap. In unserem Beispiel mit der Instanz "theMask" ist es einfach:

Erstellen Sie einen Keyframe in der Ebene "Actions" und fügen Sie diese Codezeile ein.


Schritt 11: "Aber es funktioniert immer noch nicht!"

Aus irgendeinem mysteriösen Grund kann Flash ohne ActionScript nicht den gewünschten Effekt erzielen. Maskierte Ebenen in der Flash-Timeline erlauben einfach keine Alpha-Gradienten-Maskierung!

Die Lösung ist zum Glück sehr einfach:

Wie Sie buchstäblich aus dem Code lesen können, wird unsere Instanz "theMask" als Maske für unsere Gliederungsinstanz festgelegt. Fahren Sie fort und fügen Sie es in die Aktionsebene ein.

Bitte beachten Sie Folgendes:

In Flash gibt es einen Fehler in Bezug auf Maskeninstanzen und die Zeitachse. Ich habe den Fehler im folgenden hypothetischen Szenario bemerkt:

Unsere Maskeninstanz erstreckt sich von Frame 1 bis 70. Unser anderes Asset (das Logo) erstreckt sich bis zu Frame 90. Wenn Flash zwischen Frame 71 und 90 wiedergegeben wird, befindet sich die Maskeninstanz nicht auf der Bühne. Wenn Sie das Logo beispielsweise auf einer Firefox-Registerkarte anzeigen, dann zu einer anderen Registerkarte wechseln und dann wieder zum Logo zurückkehren, wird der Fehler angezeigt. Sie werden es sehen, wenn die Wiedergabe zwischen Bild 71 und 90 liegt. Der Fehler zeigt sich, wenn der Umriss herausspringt und entlarvt wird. Wenn die Wiedergabe zu Bild 1 zurückkehrt, kehrt sie zum Normalzustand zurück.

Die Schlussfolgerung, die wir daraus ziehen können, ist, dass Sie, wenn Sie etwas mit ActionScript maskieren, sicherstellen, dass Sie die Maske immer auf der Bühne halten, um zu vermeiden, dass das maskierte Objekt sich selbst zeigt.


Schritt 12: Fertigstellen der Berührungen

Testen Sie den Film jetzt. Es sollte so aussehen:

Der Effekt ist etwas zu stark, sodass Sie das Alpha der Gliederungsinstanz auf 75% reduzieren können und es etwas subtiler wirkt.

Als letzten Schliff verleihen wir dem Logo einen funkelnden Glanz.

  • Schauen Sie in die Quell-Zip-Datei und Sie werden eine Shine.png finden.
  • Fahren Sie fort und importieren Sie diese auf die Bühne in die Shine-Ebene in Frame 59.
  • Platzieren Sie es in der oberen rechten Ecke des "g" -Zeichens unseres Logos.
  • Konvertieren Sie es in ein Symbol, damit wir es austauschen können.
  • Gehen Sie zu Bild 69 derselben Ebene und drücken Sie F5, um ein Bild einzufügen.
  • Klicken Sie mit der rechten Maustaste auf den entsprechenden Abschnitt und wählen Sie "Bewegungs-Tween erstellen".
  • Vergrößern Sie den Bereich, mit dem Sie arbeiten:
  • Gehen Sie zu Bild 59 und transformieren Sie das Bild in eine kaum sichtbare Größe.
  • Gehen Sie zu Bild 64 und transformieren Sie es in seine ursprüngliche Größe (oder in die Nähe von).
  • Gehen Sie zu Bild 69 und transformieren Sie es in eine kaum sichtbare Größe.
  • Fügen Sie dem Glanz-MovieClip im Eigenschaftenfenster einen gelblichen Farbton hinzu.
  • Stellen Sie das Alpha auf ca. 70% ein.
  • Fügen Sie auch einen gelblichen Glühfilter hinzu.

Schritt 13: Zusammenfassung

Ihr Logo sollte jetzt zu 99% vollständig sein. Sie möchten wahrscheinlich immer noch anpassen, wenn die Animation neu gestartet wird, indem Sie nach dem Animieren der Maske weitere Frames einfügen. Denken Sie daran, was ich zuvor erwähnt habe. Stellen Sie sicher, dass Sie eine Instanz der Maske bis zum Ende der Animationsschleife auf der Bühne belassen, um den Fehler bei der Maskenanzeige zu vermeiden!

Hier am Ende dieses Tutorials werden Sie hoffentlich erkennen, wie einfach Sie Änderungen am Logo vornehmen oder den Effekt auf jedes Textlogo mit einem zufriedenstellenden Ergebnis anwenden können. Versuchen Sie zu experimentieren, indem Sie die Dicke der Kontur ändern (Erinnern Sie sich? Wir haben es 2 Pixel dick gemacht). Das Ändern von Text, Schriftart und Farben ist ebenfalls problemlos möglich. Ändern Sie die Farben in der Farbüberlagerung und im Strich oder noch besser. Experimentieren Sie mit Ihren eigenen Ebenenstilen!

Das Herzstück der Animation liegt in der Alpha-Verlaufskontur, die innerhalb der Schrift liegt. Wenn Sie also selbst experimentieren, sollten Sie versuchen, einen Strich oder einen äußeren Rand zu verwenden, um diesen Effekt beizubehalten. Natürlich geht alles, was auch immer schön für dich ist, ist gut!

Ich hoffe dir hat dieses Tutorial gefallen, 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.