Dialogfeld

Die Werkzeuge des Animationszeichners

Flash und After Effects: Kombinieren von präziser Vektorgrafik und animierten Bitmaps

Chris Georgenes

Abb. 1: Emoticon-Superhelden eilen Yahoo zu Hilfe

Die meisten Animationskünstler wissen, dass Flash schon immer hervorragend geeignet war, um präzise und saubere Vektorgrafiken für Animationen zu erstellen. Aber oft genug mussten sie doch woanders suchen, wenn sie diesen ganz besonderen Effekt hinbekommen wollten, der nur mit rasterbasierten Anwendungen möglich war.

Flash 8 erlaubt jetzt das Anwenden von Mischmodi und Filtereffekten in Echtzeit. Aber wie ist es möglich, animierte Spezialeffekte zu erzeugen, die über die in Flash 8 verfügbaren Filter hinausgehen? Wie können Sie Ihren Animationen eine neue Tiefe verleihen? Die Antwort: Kombinieren Sie Adobe After Effects mit Flash.

Hier ist ein praktisches Beispiel dafür. Kürzlich habe ich mit Yahoo! und Ogilvy Worldwide an einer Serie von Animationen als Werbung für den neuen Yahoo! Instant Messenger gearbeitet. Ich habe für das Projekt fast ausschließlich Flash und Adobe Photoshop verwendet. Für Design und Animation der Charaktere kam Flash zum Einsatz, während ich in Photoshop die Hintergrundgrafiken aus manipulierten Fotos erstellte. Die fertigen Hintergründe habe ich dann wieder nach Flash importiert.

Allerdings gab es einen spezifischen Effekt, den wir mit Flash allein nicht erzielen konnten. Die Charaktere sind durchweg auf Emoticons basierende Superhelden, die jeweils über eine ganz besondere Eigenschaft verfügen. Einer dieser Superhelden musste sein normales Gesicht in eine Art Stealth-Maske verwandeln. Mithilfe von After Effects morphte ich zwei verschiedene Grafiken unter Verwendung eines ausgefeilten Strudeleffekts ineinander. Das Ergebnis war genau, was ich mir vorgestellt hatte: Das Objekt beginnt zu wirbeln und verwischt wie in einem Mixer, dann kehrt sich der Prozess um und endet schließlich in einem anderen Objekt.

Bei diesem Projekt gab es zwei kombinierte Herausforderungen: Wie bekomme ich den Effekt rein technisch hin und halte dabei gleichzeitig die Dateigröße möglichst gering?

Voraussetzungen
Flash Professional 8
After Effects 6.5

Erforderliches Hintergrundwissen
Sie sollten sich grundsätzlich mit den Arbeitsbereichen in Flash und After Effects auskennen, damit Sie die Schritte in diesem Artikel nachvollziehen können.

Erstellen der beiden Superhelden-Zustände mit Flash
Um den Morphing-Effekt zu erreichen, müssen zunächst einmal in Flash die beiden Grundzustände „Vorher“ (Bild 1) und „Nachher“ (Bild 2) erstellt werden. Sich den Anfangs- und den Endpunkt des Morphings zu überlegen, ist noch einfach. Schwierig ist dagegen, von einem Punkt zum anderen zu kommen.

Abb. 2: Die Emoticon-Zustände „Vorher“ und „Nachher“

Im nächsten Schritt kopieren Sie jedes Bild, auf das Sie den Effekt anwenden wollen, in ein neues Flash-Dokument. Anschließend exportieren Sie jedes Bild als PNG-Datei, um es in After Effects verwenden zu können.

1. Achten Sie darauf, dass sich auf der Bühne ein neues Flash-Dokument mit dem „normalen“ Emoticon befindet.
2. Wählen Sie „Datei“ > „Bild exportieren“. Speichern Sie die neue Datei unter dem Namen head_a.png und wählen Sie als Format PNG (unkomprimiert).
3. Wählen Sie im Dialogfeld „PNG exportieren“ aus dem Popupmenü „Einschließen“ die Option Bildbereich ohne Rand, wenn das Bild auf die Größe der Grafik zugeschnitten werden soll.
4. Wählen Sie aus dem Popupmenü „Farben“ die Option 24-Bit (Alpha), um den transparenten Hintergrund zu erhalten.
5. Wiederholen Sie diese Schritte für das „Stealth“-Emoticon und speichern Sie die Datei unter head_b.png.

Abb. 3: PNG-Exporteinstellungen im Flash-Dialogfeld „PNG exportieren“

Erstellen des Morphing-Effekts in After Effects
Starten Sie Adobe After Effects 6.5. Es wird automatisch ein neues, unbenanntes Projekt für Sie erstellt. Erstellen Sie eine neue Komposition, indem Sie „Komposition“ > „Neue Komposition“ (Strg+N) wählen. Im Dialogfeld „Kompositionseinstellungen“ können Sie verschiedene Eigenschaften Ihres neuen Projekts anpassen. Für dieses Beispiel ist es vor allem wichtig, dass die Framerate mit der Framerate des Flash-Films übereinstimmt. Klicken Sie anschließend auf „OK“.

Abb. 4: Das Dialogfeld „Kompositionseinstellungen“ wird beim Erstellen einer neuen Komposition in After Effects angezeigt. Stellen Sie sicher, dass die Framerate mit der Framerate des Flash-Films übereinstimmt.

Wählen Sie im Projektfenster oder aus dem Popupmenü „Datei“ die Option „Datei importieren“ (Strg+I) und wählen Sie die Bilddateien aus, die Sie aus Flash exportiert haben. Klicken Sie auf „OK“. Damit Sie die Elemente im Projektfenster verwenden können, ziehen Sie sie einfach mit der Maus in das Kompositionsfenster.

Abb. 5: Ziehen Sie das Bild mit der Maus aus dem Projektfenster in das Kompositionsfenster.

Jedes Mal, wenn Sie eine Datei in die Komposition ziehen, wird automatisch eine neue Ebene erstellt. Für diesen Effekt musste ich darauf achten, dass beide Bilder in der Komposition exakt übereinander positioniert waren.

Abb. 6: Positionieren Sie die „Stealth“-Version des Emoticons exakt über der „normalen“ Version.

Passen Sie an dieser Stelle des Produktionsprozesses die Zeitleiste so an, dass sie der Dauer des Effekts entspricht. Da der Effekt am Ende nur zwei bis drei Sekunden dauern soll, verkürzen Sie die Zeitleiste auf diesen Zeitraum. Richten Sie die Zeitleiste so ein, dass das „normale“ Bild (head_a.png) während der gesamten Animation aktiv ist, das zweite Bild (head_b.png) aber nur in der zweiten Hälfte der Animation. Das „Stealth“-Bild darf nicht am Anfang aktiv sein, da der Effekt mit diesem Bild enden soll.

Abb. 7: Die Zeitleiste in After Effects mit den korrekt positionierten Bildern

Jetzt ist es Zeit, dass Sie einen Effekt auf die Bilder anwenden. Wählen Sie die Ebene mit dem ersten Bild aus und wählen Sie „Effekt“ > „Verzerren“ > „Strudel“.

Abb. 8: Wählen von „Effekt“ > „Verzerren“ > „Strudel“

Beim Anwenden eines Effekts wird die Ebene in der Zeitleiste mit den Eigenschaften dieses spezifischen Effekts aktualisiert. Klicken Sie auf die jeweilige Unterauswahl, um die verfügbaren Optionen anzuzeigen. Hier können Sie Keyframes erstellen, den angewendeten Effekt anpassen und die Ebeneneigenschaften, wie z. B. Ankerpunkt, Position, Skalierung, Drehung und Deckkraft, bearbeiten.

Abb. 9: Ebene 2 in der Komposition mit Strudeleffekt und den verfügbaren Optionen

Im Effekteinstellungen-Fenster können Sie die Eigenschaften des Effekts anpassen. Passen Sie in diesem Fall den Winkel und den Radius des Strudeleffekts über die entsprechenden Steuerelemente an.

Abb. 10: Der Strudeleffekt für das Morphing

Wenn Sie sowohl die Effekteinstellungen (Abb. 10) als auch die Zeitleisteneigenschaften (Abb. 11) anpassen, können Sie den Effekt schrittweise aufbauen: Erstellen Sie Keyframes, wenden Sie den Effekt an und stellen Sie die Deckkraft für beide Bilder auf beiden Ebenen ein. Wenden Sie den Strudeleffekt auf beide Bilder an und stellen Sie die Deckkraft so ein, dass das zweite Bild nach und nach eingeblendet wird und das erste Bild überdeckt.

Abb. 11: Zeitleisteneinstellungen für den Morphing-Effekt

Bei solchen Effekten ist es in der Regel erforderlich, immer wieder Detailänderungen vorzunehmen, bis der Effekt genau so wird, wie Sie ihn sich vorgestellt haben. Stellen Sie sich also darauf ein, dass Sie ein wenig Zeit für die Anpassung von Timing und Effekteigenschaften benötigen werden.

Wenn der Effekt erst einmal Ihren Vorstellungen entspricht, können Sie die Animation für den Export vorbereiten. Dazu müssen Sie zunächst die Zeitleiste auf die tatsächliche Länge der Animation einstellen. Schließlich wollen Sie ja nicht mehr Material als unbedingt notwendig exportieren. Ziehen Sie die Markierungen der Zeitleiste so, dass nur die Frames der Animation eingeschlossen sind.

Abb. 12: Einstellen der Zeitleiste auf die Dauer der Animation

Das Interessenbereich-Werkzeug befindet sich am unteren Rand des Kompositionsfensters. Dieses Werkzeug entspricht im Wesentlichen dem Freistellungswerkzeug in Photoshop. Ziehen Sie im Kompositionsfenster mit der Maus ein Rechteck, um den Anzeigebereich für die Animation festzulegen.

Abb. 13: Interessenbereich-Werkzeug

Wenn Sie den Interessenbereich markiert haben, wählen Sie „Komposition“ > „Komp. auf Interessenber. beschn.“.

Abb. 14: Komposition auf Interessenbereich beschneiden

Wählen Sie anschließend „Datei“ > „Exportieren“ > „Bildsequenz“ (Image Sequence). Wählen Sie als Format PNG aus.

Abb. 15: Auswählen von PNG als Format für exportierte Sequenz

Da dieser Effekt einen transparenten Hintergrund verwendet, wählen Sie im Dialogfeld „PNG-Optionen“ die Option „Über 16,7 Mill. Farben“. (Das „+“ steht für einen Alphakanal.)

Abb. 16: Wählen Sie „Über 16,7 Mill. Farben“, um der exportierten Sequenz einen Alphakanal hinzuzufügen.

Zurückimportieren des animierten Effekts in Flash
Die Bilddateien der aus After Effects exportierten Sequenz sind fortlaufend nummeriert. Wählen Sie in Flash „Datei“ > „In Bibliothek importieren“ und wählen Sie die erste Datei der Sequenz aus. Flash erkennt, dass es sich um eine Sequenz handelt, und fordert zur Bestätigung auf, ob nur die ausgewählte Datei oder die gesamte Sequenz importiert werden soll. Flash erstellt in der Bibliothek ein Movieclip-Symbol, das die Abfolge der PNG-Dateien in separaten Keyframes auf einer Ebene enthält. Ziehen Sie diesen Movieclip auf die Bühne und sehen Sie sich das Ergebnis an.

Klicken Sie hier, um Abb. 17. anzuzeigen: der fertige Morphing-Effekt, erstellt in After Effects und abgespielt in Flash

After Effects ist die perfekte Ergänzung zu Flash, wenn Sie einen Effekt benötigen, der über die Funktionalität von Flash 8 hinausgeht. Die neuen Filter und Mischmodi stellen eine erhebliche Verbesserung von Flash 8 dar und ermöglichen das Erstellen beeindruckender Arbeiten. Wenn jedoch komplexe Animationseffekte erforderlich sind, führt kein Weg an After Effects vorbei.