Einen Trailer animieren

Web-Projekte: Heft 01/2005 (S. 73) 3 Seiten

Animationen mit Flash MX 2004

Macromedias Flash hat seine Ursprünge im Erstellen schicker Animationen fürs Web. Mittlerweile entstehen komplette interaktive Sites mit dem komplexen Tool. Aber auch die klassische Animation ist alles andere als tot. Mit ein wenig Geschick lassen sich sehr interessante Varianten erstellen

Erstellen Sie zunächst eine Vorlage, bei der sieben Textelemente entstehen. Oben links wird dabei ein "TV-Logo" platziert, im unteren Bereich ist der "Ticker-Text" untergebracht. Außerdem gibt es fünf Textobjekte, die jeweils aus einzelnen Buchstaben bestehen. Jedes Element wurde in ein Symbol umgewandelt. Alle Elemente sind jeweils auf einer eigenen Ebene untergebracht.

Wenn diese vorbereitenden Arbeiten abgeschlossen sind, können wir uns an die Animation der Szene machen. Dabei haben wir uns drei verschiedene Aufgaben gestellt: Zum einen sollen die Einzelbuchstaben "pumpen" - sie sollen größer und kleiner werden. Dabei sollen die Wörter nach oben beziehungsweise nach unten geschoben werden. Später soll der Text am Fuß der Bühne "getickert" werden - die Buchstaben sollen auf eine interessante Art und Weise einzeln erscheinen und verschwinden.

Bewegungs-Tween erstellen

Flash bietet unterschiedliche Animationsarten an. Die Art der Animation, die Sie sicherlich am häufigsten verwenden werden, heißt Bewegungs-Tween. Dabei bestimmen Sie lediglich die Anfangs- und Endposition des Objekts. Die notwendigen Zwischenphasen errechnet (interpoliert) Flash dabei automatisch. Genau diese Animationsart wollen wir für die drei Buchstaben einsetzen, die ihre Größe verändern sollen. Markieren Sie zunächst das X. Im zehnten Bild soll die neue Größe des Buchstabens erreicht sein. Klicken Sie also auf das zehnte Bild der dazugehörenden Ebene. Sie sehen dann im Zeitleistenfenster ein grau gefülltes Feld zur Hervorhebung der Auswahl. Drücken Sie dort die rechte Maustaste, um aus dem Kontextmenü die Funktion "Schlüsselbild einfügen" aufzurufen. Damit erstellen Sie ein neues Schlüsselbild, das zunächst der Ausgangssituation entspricht.

Markieren Sie nun mit gedrückter Umschalt-Taste alle Filmbilder vom ersten bis zum letzten Bild. Sie werden dann alle schwarz gefüllt hervorgehoben. Rufen Sie aus dem Kontextmenü der rechten Maustaste die Option "Bewegungs-Tween erstellen" auf, damit Flash die Zwischenphasen zwischen Start- und Endbild automatisch ermittelt - auch wenn es im Moment noch gar nichts zu interpolieren gibt. Der Bewegungs-Tween wird in der Zeitleiste mit einem Pfeil von Schlüsselbild zu Schlüsselbild gekennzeichnet. Es ist völlig egal, ob Sie erst eines der Schlüsselbilder verändern, um dann einen Bewegungs-Tween zu erstellen, oder ob Sie zunächst den Bewegungs-Tween erstellen und erst dann eines der Schlüsselbilder anpassen. Da die Zwischenphasen sowieso bei jeder Änderung automatisch neu berechnet werden, spielt dies keine Rolle. Beachten Sie, dass der Abspielschalter noch immer in Filmbild 10 steht. In diesem Filmbild soll das X nun verändert werden. Markieren Sie dazu das X mit dem Pfeilwerkzeug.

Der Schriftzug soll zunächst kleiner werden. Zum Transformieren von Objekten gibt es ein eigenes Bedienfeld, das Sie beispielsweise mit der Tastenkombination Strg-T öffnen können. Hier finden Sie Optionen zum Skalieren, Rotieren und Neigen. Stellen Sie einen Skalierungswert von 80 % ein. Aktivieren Sie das Proportion-Kontrollkästchen, damit die Proportion des Objekts erhalten bleibt. Auf der Bühne sehen Sie zunächst nicht viel: Der Verlauf entstand durch ein gefülltes Rechteck - der Hintergrund ist weiß. Daher ist der weiße Buchstabe nicht zu erkennen. Die Inhalte der anderen Ebenen sind nicht zu sehen, weil dort noch keine Schlüsselbilder erzeugt wurden. Sie können dieses Manko aber umgehen, indem Sie zwischenzeitlich einen andersfarbigen Hintergrund für das Dokument einstellen.

Der Buchstabe "pumpt"

Nun soll das "Pumpen" des Buchstabens animiert werden. Dazu muss er größer und wieder kleiner werden. Wechseln Sie zu Filmbild 20 und erzeugen Sie dort ein neues Schlüsselbild. Der Bewegungs-Tween wird dabei automatisch fortgesetzt. Markieren Sie wieder den Buchstaben und stellen Sie den Transformationswert auf 100 % zurück. So erhält der Buchstabe wieder seine ursprüngliche Größe.

Wenn Sie nun den Film ansehen, bemerken Sie, dass der Buchstabe – wie gewünscht – einmal kleiner und dann wieder größer wird. Dieser Vorgang soll noch einmal wiederholt werden. Wechseln Sie dazu zu Filmbild 30 und stellen Sie bei diesem neuen Schlüsselbild wieder eine Transformation von 80 % ein. In Filmbild 40 folgt dann wieder die Umstellung auf 100 %. Da jetzt das letzte Filmbild feststeht, kann auch der Hintergrund erneut umgefärbt werden. Nun sollen die Hintergrundobjekte wieder eingeblendet werden. Dabei haben Sie es sehr einfach: Obwohl das Logo und der Hintergrund auf zwei verschiedenen Ebenen untergebracht sind, brauchen Sie nicht zweimal neue Schlüsselbilder zu erzeugen. Das ist ein Vorteil der Ebenenordner, den wir beim Gestalten der Vorlage verwendet haben. Klicken Sie in der Ordnerebene der Hintergrundobjekte auf das Filmbild 40 und erstellen Sie dort ein neues Schlüsselbild.
Bei dieser Verfahrensweise legt Flash MX automatisch für alle Ebenen im Ordner ein neues Schlüsselbild an. Das sehen Sie, wenn Sie anschließend den Ordner aufklappen. Auf der Bühne sehen Sie nun neben dem fertig animierten Buchstaben auch die Hintergrundelemente. Die anderen Objekte fehlen dagegen noch - hier wurden ja noch keine Schlüsselbilder eingesetzt.

Weitere Animationen folgen

Die Animationen der Buchstaben Y und Z sollen auf ähnliche Weise erfolgen. Das Z erhält dabei genau dieselbe Animation wie das X. Wiederholen Sie dazu also die beschriebenen Arbeitsschritte. Bei der Animation des Y soll ein "Versatz" eingestellt werden. Hier soll die Animation nämlich nicht bei 100 % der Größe starten, sondern bei 80 %. Legen Sie also im Filmbild 10 ein neues Schlüsselbild an und geben Sie den Bewegungs-Tween vor. Wechseln Sie dann aber zu Filmbild Nummer 1, um dort die Transformation auf 80 % einzustellen.

Nun geht es umgekehrt weiter: In Filmbild 20 soll das Y eine Größe von 80 % erhalten, in Filmbild 30 wieder 100 % und in Filmbild 40 die Ausgangsgröße von 80 %. Es ist wichtig, dass die Situation am Filmende der Situation am Anfang entspricht. So kann eine "Endlosschleife" erzeugt werden. Wenn der Film zu Ende ist, wird er wieder neu gestartet. Da Anfang und Ende gleich aussehen, fällt der Wechsel nicht auf.

Schriften "schieben"

Die nächsten beiden Textobjekte sollen während der bestehenden Animation "hoch und runter" geschoben werden. Das Erstellen einer solchen Bewegung ist recht einfach: Wechseln Sie mit dem Abspielschalter zum zehnten Filmbild und erzeugen Sie für die II ein neues Bewegungs-Tween-Schlüsselbild. Markieren Sie das II-Textobjekt auf der Bühne und verschieben Sie es mit den Pfeiltasten um drei Schritte nach oben. Halten Sie dabei die Umschalt-Taste gedrückt, sodass größere Schritte entstehen. Auch bei dieser Bewegung soll es im 10-Bild-Rhythmus eine Veränderung geben. In Filmbild Nummer 20 muss daher wieder ein neues Schlüsselbild angelegt werden. Verschieben Sie hier das Textobjekt um drei Schritte nach unten - zurück auf die Ausgangsposition. Dieselbe Bewegung wird nun wiederholt: In Filmbild 30 geht es wieder "aufwärts" - in Filmbild Nummer 40 retour in die Ausgangsposition. So bleibt die Filmschleife weiter erhalten. Das TV-Textobjekt soll genauso animiert werden. Gehen Sie dazu wie beschrieben vor und schieben Sie dieses Textobjekt ebenfalls hoch und runter. Damit ist dieser Animationsblock fertig gestellt. Um die Übersichtlichkeit zu wahren, können Sie nun den Ordner schließen. Dann bleibt nur noch die Ticker-Ebene übrig.

Einen besonderen Ticker erzeugen

Das letzte Objekt, das noch animiert werden soll, ist der Text am unteren Rand. Er soll in einem "Ticker" animiert werden - und das mit einem zusätzlichen interessanten Effekt: Ist der erste Wortblock vollständig zu sehen, soll während der zweite Block erscheint der erste wieder verschwinden. Bei einem Tickereffekt müssen die einzelnen Buchstaben des Textobjekts erscheinen und verschwinden. Momentan besteht aber nur ein komplettes Textobjekt, mit dem diese Aufgabenstellung nicht effektiv realisiert werden kann. Sie können Textobjekte nachträglich in die einzelnen Buchstaben "zerlegen". Verwenden Sie dazu nach dem Markieren des Textobjekts im ersten Filmbild die Funktion Modifizieren/Teilen, die Sie auch über die Tastenkombination Strg-B erreichen. Markieren Sie mit dem Pfeilwerkzeug die drei Mittelpunkte. Verschieben Sie diese mit den Pfeiltasten ein kleines Stück nach oben. So können Sie das Manko umgehen, dass innerhalb eines Textblocks einzelne Buchstaben nicht in der Höhe justiert werden können.
Sind die Textobjekte einmal "aufgebrochen", ist dies endgültig. Das Zusammenführen zu einem Textobjekt ist nicht möglich. Sie können die einzelnen Objekte dann nur noch in einer Gruppe zusammenfassen.

Filmbilder verschieben

Die Tickeranimation soll erst im sechsten Filmbild beginnen. Jedes Filmbild kann nachträglich an eine andere Stelle geschoben werden. Diese Aufgabe können Sie per Drag & Drop erledigen. Klicken Sie das erste Schlüsselbild der Ticker-Ebene an und halten Sie die linke Maustaste fest. Ziehen Sie dann das Schlüsselbild mit gedrückter Maustaste auf das Filmbild 6. Nach dem Loslassen der Maustaste sehen Sie neue Symbole. Es wurden nämlich im ersten und fünften Bild neue Symbole eingefügt. Das Kreissymbol im ersten Filmbild symbolisiert ein neues Schlüsselbild. Das Rechteck in Filmbild 5 zeigt an, dass bis dahin keine Änderung gegenüber dem letzten Schlüsselbild erfolgt ist. Ein Wechsel zum ersten Schlüsselbild zeigt, dass der Tickerschriftzug dort nicht zu sehen ist - Flash MX hat durch diese Arbeitsschritte also automatisch leere Bilder eingefügt.

Filmbilder kopieren

Nun sind eine Menge Fleißarbeiten notwendig, da viele Filmbilder einzeln editiert werden müssen - Flash MX bietet hier keinerlei Automatismen an, um die Arbeit zu erleichtern. Klicken Sie das Filmbild 6 mit der rechten Maustaste an und verwenden Sie aus dem Kontextmenü die Funktion "Bilder kopieren". Das kopierte Filmbild muss nun immer wieder eingefügt werden - es wird nach jedem Arbeitsschritt erneut benötigt. Wechseln Sie zum nächsten Filmbild und aktivieren Sie die Funktion "Bilder einfügen" aus dem Kontextmenü. Nun folgt stupide Fleißarbeit: Wechseln Sie wieder zum Filmbild 6. Markieren Sie alle Buchstaben - mit Ausnahme des ersten -, indem Sie mit dem Pfeilwerkzeug einen Rahmen aufziehen. Alle Buchstaben innerhalb des aufgezogenen Rahmens werden dann markiert. Dabei müssen Sie aber beachten, dass nur die Buchstaben mit ausgewählt werden, die vollständig innerhalb des aufgezogenen Rahmens lagen. Aufgrund dieser Arbeitsschritte ist es übrigens wichtig, die Hintergrundebene zu sperren. Ansonsten würde beim Aufziehen eines Rahmens auch der Hintergrund markiert. Drücken Sie die Entf-Taste, um die ausgewählten Buchstaben zu löschen. Übrig bleibt dann nur noch der erste Buchstabe. Wechseln Sie jetzt zu Filmbild 7 und fügen Sie dort wieder das kopierte Filmbild ein. Anschließend soll das sechste Filmbild editiert werden.

Das Einfügen des kopierten Filmbilds vor dem Editieren ist ein "Sicherheitsschritt". So können Sie jederzeit auf dieses eingefügte Filmbild zurückgreifen. Es könnte ja beispielsweise passieren, dass Sie versehentlich die "Bilder kopieren"-Funktion aufrufen. Dann wäre kein Filmbild mehr vorhanden, in dem alle Buchstaben zu sehen sind. Im sechsten Filmbild werden nun wieder alle Buchstaben markiert - dieses Mal aber mit Ausnahme der ersten beiden Buchstaben. Die Auswahl muss dann wieder gelöscht werden. Wiederholen Sie diese Arbeitsschritte, bis in Filmbild 11 der erste Block inklusive des Trennpunkts sichtbar geworden ist.

Erscheinen und verschwinden

Ab hier gibt es eine Veränderung: Bei jedem neu erscheinenden Buchstaben fällt das Pendant aus dem ersten Wortblock weg. Es müssen also zwei Bereiche gelöscht werden. Markieren Sie in Filmbild 12 zunächst wieder per Rahmen die Buchstaben rechts. Halten Sie dann die Umschalt-Taste gedrückt und klicken Sie auf den ersten Buchstaben links. Danach kann die Auswahl wie gewohnt gelöscht werden.

Bei einem Buchstaben fällt die Auswahl per Anklicken noch leicht. Sollen vorn aber mehrere entfernt werden, können Sie auch mit gedrückter Umschalt-Taste zwei Rahmen aufziehen.

Nun folgt wieder die Fleißarbeit. Die Arbeitsschritte bleiben immer gleich: Nach dem Einfügen des neuen Filmbilds erscheint auf dem Filmbild davor ein neuer Buchstabe, dessen Pendant vorn gelöscht wird. Arbeiten Sie sich Schritt für Schritt nach vorn. So sollte beispielsweise das Filmbild 17 wie abgebildet aussehen. Aufmerksamkeit ist dann noch ab Filmbild 27 geboten. Nach Vervollständigung des letzten Wortblocks wird nämlich nur noch von hinten gelöscht - Neues kommt nicht mehr dazu. Wenn alles gut gegangen ist, sollten Sie in Filmbild Nummer 33 nur noch den letzten Buchstaben sehen. Weitere Bilder können Sie sich sparen. Da ja ab dem folgenden Filmbild kein Buchstabe zu sehen sein soll, lassen Sie diese Filmbilder einfach leer.

Filmbilder en bloc verschieben

Der Block des Tickers ist nun fertig. Am Anfang des Films sind fünf Filmbilder frei - die Animation des Tickers beginnt im Bild 6. Am Ende sind es sieben Filmbilder, die noch frei sind. Dies hätte zu Beginn der Arbeit durch Auszählen verhindert werden können. Sie können die Filmbilder aber auch sehr leicht nachträglich verschieben. Markieren Sie durch Anklicken das erste Animationsbild. Halten Sie die Umschalt-Taste gedrückt und klicken Sie auf das letzte Filmbild der Tickeranimation. Alle Bilder werden dann schwarz hervorgehoben markiert. Lassen Sie die Maustaste los. Klicken Sie dann erneut auf eines der markierten Bilder. Ziehen Sie nun die gesamte Auswahl mit gedrückter linker Maustaste um ein Filmbild nach rechts. Nach dem Loslassen der Maustaste werden die Filmbilder en bloc auf die neue Position verschoben - die leeren Bilder zu Beginn werden automatisch aufgefüllt.