Share
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 Lernprogramm erfahren Sie, wie Sie ein Logo erstellen, das die Alphastufenmaskierung in die Animation integriert. Ich erkläre einige Tipps und Tricks, wie man es zum Laufen bringt und einige häufige Probleme vermeidet.
Zuerst ein kurzer Blick auf das, was wir anstreben:
Dies ist ein Anfängerlehrgang, in dem ich ausführlich erläutere, wie dieses Logo und seine Animation erstellt werden. Auf dem Weg werde ich ein paar Worte über Verlaufsmaskierung, Bitmaps und Formen in Flash sowie den erforderlichen ActionScript-Code erwähnen. Zunächst beschäftigen wir uns kurz mit einigen Photoshop-Techniken, aber die meisten Bildbearbeitungsprogramme sollten ausreichen.
Lass uns anfangen!
Stellen Sie sicher, dass Sie mit dem Herunterladen der Quelldateien beginnen. Ö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 beim Öffnen der Datei in Photoshop eine Warnung angezeigt wird, dass die Schriftart fehlt. Für diese Übung können Sie jedoch auch ohne weitere Schritte mitverfolgen.
Beim Öffnen von Logo.psd sollten Sie Folgendes sehen:
Wie Sie sehen, haben wir eine graue Hintergrundebene und eine Textebene namens "Text". Wenn Sie die Lubalin-Schriftart installiert haben, können Sie den Text in etwas Persönlicheres umwandeln, oder Sie können 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.
(Sie können diesen Schritt überspringen, wenn Sie Photoshop verwenden.)
Hier erkläre ich kurz die in Photoshop verwendeten Ebenenstile, damit diejenigen unter Ihnen, die das Logo möglichst wortwörtlich kopieren möchten, dies in Ihrer eigenen Bildbearbeitungssoftware tun können. Es ist jedoch nicht wichtig, dass Ihr Logo gleich aussieht.
Hoffentlich gibt Ihnen das eine Idee, wie Sie etwas Ähnliches erstellen können. Auch hier ist es nicht wichtig, die in diesem Tutorial erläuterte Technik zu verstehen.
Bevor wir in Flash einsteigen, können wir auch das Letzte tun, das in Photoshop benötigt wird. das ist, um einen Umriss für den Effekt zu erstellen, den wir im Begriff sind. Machen Sie sich keine Sorgen, wenn es noch keinen Sinn ergibt, Sie werden das ganze Bild sehr bald sehen!
Sie sollten damit enden:
Wählen Sie die Gliederungsebene aus und drücken Sie "V", um das Verschiebungswerkzeug auszuwählen. Richten Sie die Kontur mit der Tastatur so aus, dass sie perfekt über dem Originaltext liegt, wie folgt:
Stellen Sie sicher, dass der Umriss vollständig weiß ist.
Blenden Sie die Gliederungsebene und die Hintergrundebene aus. Gehen Sie zu "Speichern für Web und Geräte" und speichern Sie 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 "Gliederung.png". Es sollte so aussehen:
Stellen Sie sicher, dass Sie als transparentes PNG mit hoher Qualität speichern!
Starten Sie Flash und erstellen Sie eine neue AS3-Datei. Da das Logo, das wir erstellen, in Photoshop 580 x 170 Pixel groß ist, werden für unsere Flash-Datei dieselben Abmessungen verwendet. Behalten Sie die FPS und die Hintergrundfarbe bei.
Erstellen und benennen Sie diese Ebenen:
Ordne sie in der Reihenfolge wie in der Liste an, so dass "Actions" auf der niedrigsten Z-Ebene und "Shine" auf dem höchsten Wert ist. Wählen Sie nun die Hintergrundebene aus und erstellen Sie ein Rechteck, das die Bühne abdeckt. Machen Sie einen Farbverlauf von dunkelgrau (# 222222) bis hellgrau (#AAAAAA). Verwenden Sie das Verlaufsumwandlungstool (Hotkey F), um es wie folgt auszurichten:
Sperren Sie die Hintergrundebene, da wir sie nicht mehr ändern werden.
Wählen Sie die Logoebene. 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 in Ihrer Flash-Datei perfekt ausgerichtet sein. Sie können jetzt auch die Logo-Ebene sperren.
Wählen Sie die Gliederungsebene aus und drücken Sie erneut Strg + R. Diesmal wird die Gliederung.png importiert. Es sollte auch genau richtig sein. Da die Gliederung aktuell ausgewählt ist, wäre es jetzt ein guter Zeitpunkt, F8 zu drücken und daraus einen MovieClip zu machen. Benennen Sie den MovieClip "Gliederung", fügen Sie dann den Instanznamen "Gliederung" in das Eigenschaftenfenster ein. Sie sollten etwas Ähnliches sehen:
Gehen Sie nun zum Bibliotheksfenster und überprüfen Sie die Eigenschaften Ihres logo.png. Ich persönlich würde dies auf verlustfreie Qualität setzen, da dieses Logo wahrscheinlich als Kopfzeile oder ähnliches verwendet wird und ich glaube, dass Sie es sich in diesen Fällen leisten können, auf die Qualität zu verzichten. Es ist Ihr Anruf, aber es wird sicher am besten in verlustfreier Qualität aussehen!
Lassen Sie Ihre Gliederungsinstanz auswählen und fügen Sie ein Filter verwischen. Legen Sie die X- und Y-Unschärfe-Eigenschaften auf 2 Pixel fest und wählen Sie hohe Qualität. Das Endergebnis wird dadurch wesentlich besser aussehen.
bitte beachten Sie Durch das Hinzufügen des Unschärfefilters wird Flash automatisch gezwungen, die Kontur als Bitmap darzustellen. Wenn Sie den Unschärfefilter nicht hinzufügen, müssen Sie mindestens das Kontrollkästchen "Cache als Bitmap" aktivieren. Mehr dazu in Schritt 10.
Sie können diese Ebene auch sperren. Jetzt wäre auch eine gute Zeit, um Ihre Flash-Datei zu speichern!
Wählen Sie die Maskenebene und dann das Rechteckwerkzeug aus. Heben Sie die Auswahl der Strichfarbe auf, wenn Sie derzeit eine angewendet haben.
Zeichnen Sie ein Rechteck mit einer Breite von 60 Pixeln und einer Höhe von 320 Pixeln. Wenn Sie Ihre Form ausgewählt haben, gehen Sie in das Farbfenster und weisen Sie einen linearen Verlauf mit drei gleichmäßig verteilten Punkten (durch Punkte Ich meine die kleinen Griffe, die die Farben eines Farbverlaufs definieren. Wählen Sie eine beliebige Farbe für die Punkte, stellen Sie jedoch sicher, dass Sie die mittlere Farbe bei 100% Alpha und die äußere Farbe bei 0% Alpha haben. Es sollte so aussehen:
Klicken Sie mit der ausgewählten Form auf F8 und machen Sie daraus einen MovieClip mit dem Namen "Mask". Nennen Sie die Instanz der Maske "theMask". Zum Schluss drehen Sie die Maske um 45 Grad im Uhrzeigersinn. Ein einfacher Weg, dies zu tun, besteht darin, zuerst Q für das Transformationswerkzeug zu drücken und dann die Umschalttaste gedrückt zu halten, bis sie bei 45 ° stoppt.
Gehen Sie zu Frame 70 der Maskenebene in unserer Hauptzeitleiste und drücken Sie F5, um Frames an diesem Punkt einzufügen. Klicken Sie mit der rechten Maustaste auf ein beliebiges 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 Rahmen bis Bildnummer 70 für die Ebenen Backround, Logo und Gliederung. Die Maske sollte von hier aus gehen:
Bis hierhin:
Wie Sie wahrscheinlich bereits herausgefunden haben, verwenden wir die Alpha-Form der Masken, um die Kontur allmählich ein- und auszublenden. Normalerweise haben Sie eine Maske in Flash, die sich auf einer Ebene befindet und diese in eine Maskenebene umwandeln. 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, ist das alles kein reibungsloser Übergang. Es gibt keinerlei Verlaufsverhalten.
Warum ist das dann??
Damit Alpha-Farbverläufe funktionieren, muss Flash Ihre Objekte als Bitmaps und nicht als Shapes darstellen. Unsere aktuelle Maske ist definitiv eine Form (wenn auch in einem MovieClip) und wird als solche gerendert. Das kann auf zwei Arten behoben werden:
Lassen Sie Ihre Maske in Flash CS4 auswählen. Aktivieren Sie im Eigenschaftenbereich unter "Anzeigen" das Kontrollkästchen "Cache als Bitmap".
In Flash CS3 finden Sie es direkt unter den Mischmodi mit der Bezeichnung "Laufzeit-Bitmap-Caching verwenden"..
Mein bevorzugter Ansatz ist die Verwendung von ActionScript. Hauptsächlich, weil ich als Entwickler (mehr als ein Designer) alle Aspekte über Code steuern möchte, um jeden Effekt auf dynamisch erstellte Objekte anwenden zu können. Alle Objekt-Unterklassen von DisplayObject verfügen über eine boolean-Eigenschaft cacheAsBitmap. In unserem Beispiel mit der Instanz "theMask" heißt es einfach:
theMask.cacheAsBitmap = true;
Erstellen Sie einen Keyframe in der Aktionsebene und fügen Sie diese Codezeile ein.
Aus irgendeinem mysteriösen Grund kann Flash nicht den gewünschten Effekt erzielen, den wir ohne ActionScript erreichen. Maskierte Ebenen in der Flash-Timeline einfach nicht Erlaube die Maskierung von Alpha-Gradienten!
Die Lösung ist zum Glück sehr einfach:
Umrissmaske = theMask;
Wie Sie buchstäblich aus dem Code lesen können, legt dies unsere Instanz "theMask" als Maske für unsere Gliederungsinstanz fest. Fahren Sie fort und legen Sie es in die Aktionsebene.
Bitte berücksichtigen Sie folgendes:
Es gibt einen Fehler in Flash, der sich auf Maskeninstanzen und die Zeitleiste bezieht. Ich habe den Fehler in dem folgenden hypothetischen Szenario bemerkt:
Unsere Maskeninstanz erstreckt sich von Bild 1 bis 70. Unser anderes Asset (das Logo) erstreckt sich bis Bild 90. Wenn Flash zwischen Bild 71 und 90 abgespielt wird, befindet sich die Maskeninstanz nicht auf der Bühne. Wenn Sie beispielsweise das Logo in 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 erfolgt. Der Fehler wird sich als die Umrisse zeigen, die herausspringen und demaskiert werden. Wenn die Wiedergabe zu Bild eins zurückkehrt, wird wieder normal.
Die Schlussfolgerung, die wir daraus ziehen können, lautet: Wenn Sie etwas mit ActionScript maskieren, stellen Sie sicher, dass Sie die Maske stets auf der Bühne belassen, damit sich das Objekt nicht maskiert.
Testen Sie jetzt den Film. Es sollte so aussehen:
Der Effekt ist etwas zu stark, sodass Sie das Alpha der Gliederungsinstanz auf 75% reduzieren können und ein wenig subtiler wirken.
Als letzten Schliff fügen wir dem Logo einen funkelnden Glanzeffekt hinzu.
Ihr Logo sollte jetzt zu 99% vollständig sein. Sie werden wahrscheinlich nach dem Neustart der Animation wahrscheinlich noch anpassen wollen, indem Sie nach der Animation der Maske weitere Bilder einfügen. Denken Sie nur 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 aufbewahren, um den Maskenanzeigefehler zu vermeiden!
Am Ende dieses Tutorials werden Sie hoffentlich feststellen, wie einfach Sie Änderungen am Logo vornehmen oder den Effekt mit einem befriedigenden Ergebnis auf jedes Textlogo anwenden können. Versuchen Sie zu experimentieren, indem Sie die Stärke der Kontur ändern (Denken Sie daran, 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 -kontur oder noch besser. experimentiere mit deinen eigenen Ebenenstilen!
Das Herzstück der Animation liegt in der Alpha-Farbverlaufskontur, die innerhalb der Schriftart liegt. Wenn Sie also selbst experimentieren, sollten Sie versuchen, eine Art Strich oder äußeren Rand zu haben, um diesen Effekt zu erhalten. Natürlich geht alles, was für Sie hübsch ist, ist gut!
Ich hoffe, Ihnen hat dieses Tutorial gefallen, danke fürs Lesen!
Accentsconagua