Bewegte Firmenlogos

Flash & Animation: Heft 02/2004 (S. 107) 3 Seiten

Logo-Animationen mit Flash MX 2004

Sie wollen ein ansprechendes Firmenlogo animieren? Dazu ist Flash MX 2004 genau das richtige Werkzeug. So lassen sich schnell Animationen erstellen, die für Ihre Firmenwebseite verwendet werden können. Wir zeigen Ihnen, wie Sie dabei vorgehen.

Nach dem Start von Flash MX 2004 erwartet den Anwender eine neu gestaltete Programmoberfläche. Auf der Startseite werden Optionen zum Erstellen neuer Dateien oder für die Verwendung von Vorlagen angeboten. Auch die Gesamtgestaltung wurde verändert - wie im gesamten Paket Studio MX 2004. Verwenden Sie die Option "Neu erstellen/Flash-Dokument", die Sie alternativ auch über die Tastenkombination Strg+N erreichen. Als Erstes sollten Sie nun die Eigenschaften des Standarddokuments verändern. Rufen Sie die Funktion "Modifizieren/Dokument" auf. Stellen Sie eine Bildrate von 25 BpS ein. Damit legen Sie fest, wie viele Bilder pro Sekunde Film angezeigt werden sollen. Außerdem soll das Dokument eine Größe von 400 x 300 Pixel erhalten. Sollen diese Einstellungen auch bei künftigen Dokumenten verwendet werden, klicken Sie auf die Schaltfläche "Als Standard".

Einfärben des Hintergrunds

Wir benötigen nun als Erstes einen Hintergrund, der mit einem Verlauf gefüllt sein soll. Da der Hintergrund nur einfarbig gefüllt werden kann, ist ein "Hilfsrechteck" nötig.

Nun könnten Sie einfach das gewünschte Objekt erstellen. Dann würden die Standardvorgaben für die Umriss- und Füllungseigenschaften verwendet. Es ist aber empfehlenswert, die Attribute vorher festzulegen - das spart Arbeit. Öffnen Sie nach dem Aufruf des Rechteck-Werkzeugs das Eigenschaften-Fenster unter dem Arbeitsbereich. Das untere der beiden Farbfelder dient der Festlegung der Füllungsfarbe. In dem Fenster, das Sie durch Anklicken des Farbfelds öffnen, finden Sie auch eine Option für einen linearen Schwarzweißverlauf, die für unsere Aufgabenstellung benötigt wird. Eine Umrisslinie soll bei dem Rechteck aber nicht verwendet werden. Deaktivieren Sie daher die Umrisslinie. Ziehen Sie dann das Rechteck auf.

Nach dem Anklicken des Rechtecks mit dem Auswahl-Werkzeug können Sie im Eigenschaften-Fenster die genaue Größe und Position des Rechtecks einstellen. Für die x- und y-Position sollte jeweils der Wert 0 eingestellt sein. Höhe und Breite müssen dem Dokumentmaß entsprechen. Standardmäßig finden Sie einen von links nach rechts führenden Verlauf vor. Um den Verlauf zu ändern, wird das Füllungstransformation-Werkzeug benötigt. Klicken Sie damit das Rechteck an. Danach werden verschiedene Markierungspunkte angezeigt, mit denen die Breite des Verlaufs und der verwendete Winkel festgelegt werden können. Drehen Sie den Verlauf so, dass der helle Bereich in der linken oberen Ecke ist, und vergrößern Sie anschließend die Verlaufsbreite, bis sich der Verlauf fast bis zu den Ecken erstreckt. Da der Verlauf erst jetzt gut beurteilt werden kann, soll nun die Farbe der rechten unteren Ecke noch modifiziert werden. Markieren Sie dazu das Rechteck erneut mit dem Auswahl-Werkzeug. Öffnen Sie das Farbmischer-Fenster, das Sie rechts neben dem Arbeitsbereich finden, mit der Tastenkombination Umschalt-F9. Stellen Sie nach dem Anklicken des rechten Farbfelds ein helles Grau mit dem hexadezimalen Farbwert #555555 ein.

Erstellen von Symbolen

Das fertige Rechteck sollten Sie nun in ein Symbol umwandeln. Damit erleichtern Sie sich die weitere Arbeit, weil Flash sonst nämlich die folgenden Objekte mit dem Rechteck "verschmelzen" würde. Außerdem können nur Symbole für die späteren Animationsaufgaben eingesetzt werden. Verwenden Sie nach dem Markieren des Rechtecks die F8-Taste, um ein Symbol zu erstellen. Aktivieren Sie in dem Dialogfeld, das damit geöffnet wird, das "Verhalten Grafik". Die Konvertierung wird durch einen blauen Rahmen verdeutlicht.

Objekte effektiv erstellen

Als Nächstes benötigen wir einige weitere Objekte. Erstellen Sie dazu in der Zeitleiste eine neue Ebene. Ziehen Sie mit dem Ellipsen-Werkzeug einen Kreis mit einer Größe von 90 Pixeln auf. Damit ein Kreis und kein Oval entsteht, müssen Sie die Umschalt-Taste gedrückt halten. Der Kreis erhält keine Kontur. Für die radiale Füllung wurde ein zusätzlicher Markierungspunkt eingefügt, dem die Farbe Cyan zugewiesen ist. Nachdem der Kreis aufgezogen wurde, müssen Sie mit dem Füllungstransformation-Werkzeug die Markierungspunkte wie in der Abbildung gezeigt verziehen. Damit wird eine plastische Wirkung erreicht. Es entsteht eine Kugel.

Diese Kugel sollte anschließend ebenfalls in ein grafisches Symbol umgewandelt werden. Öffnen Sie das Bibliothek-Fenster und duplizieren Sie das gerade erstellt Symbol. Nach dem Doppelklicken auf das Vorschaubild im Bibliothek-Fenster wechseln Sie in den Symbol-Editiermodus. Dort wird der Verlauf verändert. Dieses Mal wird die Farbe Magenta und ein dazu passender abgedunkelter Farbton verwendet. Dies können Sie nach dem Markieren der Kugel im Farbmischer-Fenster erledigen. Eine Veränderung mit dem Füllungstransformation-Werkzeug ist hier nicht notwendig. Nach dem Beenden des Editiermodus ziehen Sie das geänderte Objekt in die Szene. Dazu ist wieder eine neue Ebene nötig. Auf dieselbe Art wird noch eine gelbe und eine schwarze Kugel erstellt. Jede Kugel wird auf einer eigenen Ebene platziert. Dies ist nötig, um später alle Kugeln unabhängig voneinander zu animieren. Platzieren Sie die Objekte ungefähr wie abgebildet. Zum Ausrichten können Sie die Funktionen im Menü "Modifizieren/Ausrichten" verwenden.

Mehrfarbige Texte erstellen

Als letztes Objekt wird ein Schriftzug auf einer neuen Ebene benötigt. Die verwendeten Schriftattribute sehen Sie in der Abbildung. Vielleicht haben Sie es ja bei der Farbwahl für die Kugeln schon bemerkt: Wir wollen ein Logo einer Druckerei erstellen - der Schriftzug soll dabei die Druckfarben Cyan, Magenta, Yellow und Schwarz wiedergeben. Wenn Sie einzelne Buchstaben nach dem Eintippen des Textes markieren, können Sie diese mit verschiedenen Farben versehen. Das Textobjekt wird dann zentriert zum Hintergrund ausgerichtet. Wandeln Sie abschließend auch das Textobjekt in ein grafisches Symbol um. Damit ist das Endstadium des Logos erreicht, sodass wir uns nun der Animation widmen können. Es ist übrigens üblich zunächst das Endstadium einer Animation zu gestalten und anschließend "rückwärts" zu arbeiten. Nur so hat man eine Kontrolle über das Ergebnis.

Das Logo animieren

Unsere Animation soll aus zwei Teilen bestehen. Zunächst soll der Schriftzug in das Bild hineindrehen. Anschließend sollen die Kugeln in das Bild fallen. Die gesamte Animation soll drei Sekunden dauern. Da wir ja eine Bildrate von 25 Bildern pro Sekunde eingestellt hatten, wird die Animation 75 Filmbilder lang sein. Die Verwaltung der Filmbilder erfolgt über die Zeitleiste. Klicken Sie der Reihe nach mit gedrückter Strg-Taste das 75. Filmbild aller Ebenen an. In diesen Filmbildern sollen nun neue Schlüsselbilder eingefügt werden. Rufen Sie dazu über die rechte Maustaste das Kontextmenü auf und verwenden Sie dort die Funktion "Schlüsselbild einfügen". Als Nächstes wird für die Textebene ein neues Schlüsselbild im Filmbild 25 benötigt. Anschließend sollten Sie die abgebildete Situation in der Zeitleiste vorfinden.

Drehen von Objekten

Während der ersten 25 Filmbilder soll sich der Schriftzug drehen. Eine solche Funktion ist nicht direkt in Flash vorgesehen. Sie können sich aber mit einer "optischen Täuschung" behelfen. Die Animation soll in einer fließenden Bewegung erfolgen. Dafür bietet Flash eine Hilfe an, sodass die Arbeit wesentlich erleichtert wird. Flash kann automatisch so genannte Zwischenphasen erstellen. Als Zwischenphasen werden alle Filmbilder bezeichnet, die zwischen zwei Schlüsselbildern liegen. Die Funktion, die dazu benötigt wird, ist der Bewegungstween. Gehen Sie dabei folgendermaßen vor: Markieren Sie die Filmbilder 1 bis 25 der Textebene. Klicken Sie dazu auf das erste Filmbild und klicken Sie danach mit gedrückter Umschalt-Taste das Filmbild Nr. 25 an. Stellen Sie dann im Eigenschaften-Fenster im Tween-Listenfeld die Option "Bewegung" ein. Anschließend sehen Sie Pfeile und eine blaue Unterlegung als Kennzeichnung des Bewegungstweens. Markieren Sie in der Textebene das erste Filmbild. Nach dem Anklicken des Filmbilds wird automatisch das Textobjekt markiert. Verwenden Sie die Tastenkombination Strg-T, um das "Transformieren"-Bedienfeld zu öffnen. Stellen Sie dort eine vertikale Transformation von 10 % ein. Außerdem ist eine Neigung von 180° nötig. Dadurch entsteht ein sehr flacher, auf dem Kopf stehender Schriftzug.

Testen der Bewegung

Damit ist die Bewegung des Schriftzugs schon fertig. Sie können dies testen, indem Sie die Enter-Taste drücken oder die Funktion "Steuerung/Abspielen" verwenden. Sie sehen dann, dass die gewünschte Drehung tatsächlich erfolgt. Diese optische Täuschung entsteht durch die eingegebene Neigung. Als Nächstes sollen die Kugeln animiert werden. Auch hier sollen Bewegungstweens zum Einsatz kommen. Diese Aufgabe können Sie auch in "einem Rutsch" erledigen. Markieren Sie das erste Filmbild der zweiten Ebene und klicken Sie dann mit gedrückter Umschalt-Taste das letzte Filmbild der fünften Ebene an. Damit werden alle Filmbilder der Kugeln markiert. Sie erkennen die Markierung zusätzlich auf der Bühne - so wird der Dokumentbereich in Flash genannt. Dort sind alle Kugeln mit einem Markierungsrahmen versehen. Wechseln Sie zum ersten Bild der Animation. Verschieben Sie nacheinander die Kugeln auf die gezeigten Positionen. Sie wurden knapp aus dem Bild herausgeschoben. Die exakten Positionen sind dabei nicht von besonderer Bedeutung. Zum Verschieben können Sie beispielsweise die Pfeiltaste verwenden. Dann ist es leicht, die Kugeln gerade nach oben zu schieben. Drücken Sie dabei die Umschalt-Taste, sind die Schritte größer. Für den Hintergrund wird übrigens keine Animation benötigt. Er soll ja dort bleiben, wo er ist.

Ändern der Animationslänge

Mit diesen wenigen Arbeitsschritten ist die Animation schon fertig gestellt. Die Kugeln bewegen sich jetzt während der gesamten Animationsdauer auf ihre Endposition. Die Bewegung ist daher wenig interessant und viel zu langsam. Die Bewegung soll insgesamt nur 15 Filmbilder dauern. Ziehen Sie daher das erste Filmbild der linken Kugel mit gedrückter linker Maustaste auf das Filmbild Nummer 25. Die Bewegung soll erst erfolgen, wenn die Bewegung des Schriftzugs abgeschlossen ist. Ziehen Sie danach das letzte Filmbild dieser Ebene auf Filmbild Nummer 39. Damit ist die gewünschte Animationsdauer erreicht. Wiederholen Sie diese Arbeitsschritte bei den anderen Kugelebenen. Sie können nach dem Testen der Animation prüfen, ob die Kugeln eventuell zu schnell fallen. Verlängern Sie dann einfach die Animation um einige Bilder. Wenn Sie übrigens die Tastenkombination Strg-Enter verwenden, wird eine SWF-Datei erstellt. Zum Überprüfen der Animation können Sie auch die Option "Alle Zwiebelschalen einblenden" verwenden, die Sie im Menü der letzten Schaltfläche der Zeitleisten-Fußzeile finden.

Fazit

Flash MX überzeugt im Vergleich zu seinen Vorgängern durch seine komfortablere Bedienung. So fällt es auch Einsteigern leicht, komplexere Projekte in kurzer Zeit umzusetzen. Das bewegte Firmenlogo ist dafür ein gutes Beispiel.