Animationen

Flash-Animation: Need for Speed

31. März 2005
von

Flash ist ein gutes Animationswerkzeug. Bei der Herstellung von sehr schnellen Animationen kommt es mitunter aber zu Performance-Problemen, insbesondere auch Client-Rechnern mit begrenzter Grafikleistung. Schnelle Animationen in Flash-Filmen gelingen leicht mit Hilfe kleiner Tricks.

Gute Animateure setzen hier zur Unterstützung der Animation auf kleine Tricks. Das Prinzip ist einfach: Statt eine echte Animation zu Erzeugen, werden verfremdete Einzelbilder eingesetzt, die einen Teil der Bewegung als statisches Bild bereits enthalten. Flash muss diese Bilder dann nur darstellen, nicht auch noch animieren. Der Flasher profitiert dabei von der Trägheit des menschlichen Auges, das nicht immer in der Lage ist ganz schnelle Bewegungen im Detail zu erkennen. Außerdem sind die Betrachter von derartigen Animationen bereits konditioniert. Sie haben viele Animationen gesehen und „vermuten“ Bewegungen, bevor sie stattfinden.

Screenshot
Die Ebenen der Aufmacher

Um das zu illustrieren verwenden wir ein Comic-Motiv. Der bekannte Kojote aus dem Roadrunner wird verwendet, um zunächst auch dem Bildschirm zu erscheinen und dann blitzschnell nach links aus dem Bild zu rennen.

Vorarbeit
Finden Sie in der Google-Bildersuche (Achtung Urheberrechte) oder bei Ihrem eigenen Material ein passendes Motiv. Wichtig ist ein dominantes Vordergrundelement, das animiert werden soll. Öffnen Sie dieses Bild in Ihrem Bildbearbeitungsprogramm. Stellen Sie das Vordergrundelement frei und platzieren sie es auf einer eigenen Ebene oder als allein stehendes Motiv in einem neuen Bild.

Screenshot
Der lineare Verlauf wird transparent abgerundet

Reparieren Sie das Loch im Hintergrund. Eine solche Retouche erfolgt in der Regel in drei Schritten. Zunächst finden Sie ähnliche Teile im Bild, markieren diese mit dem Lasso, kopieren sie und überdecken damit die Lücken. Dann verwenden Sie den so genannten Klon-Stempel, der Bildteile an anderer Stelle nachzeichnet. Stellen Sie dabei eine weiche Kante und verringerte Deckkraft ein, um weiche Übergänge zu schaffen. Und im letzten Schritt retouchieren Sie kleinere Fehler mit Flächenfarben.

Exportieren Sie beide Bilder als PNG-Dateien. Der freigestellte Kojote hat keinen Hintergrund und PNG ist in der Lage die Transparenz zu erhalten.

Flash-Tricks
Importieren Sie beide Motive in Flash. Der Hintergrund bekommt eine eigene Ebene, die mit einem einfachen Bild auf vier Frames verlängert wird. Der Koyote kommt ebenfalls auf eine eigene Ebene. Setzen Sie ein Schlüsselbild im zweiten Frame.

Gehen Sie nun auf „Modifizieren/Bitmap nachzeichnen“ und finden Sie eine Werte-Kombination, die ein optisch akzeptables Ergebnis erzielt, etwa: Farbschwelle: 10, Kleinste Fläche: 2. Nun wechseln Sie auf das Werkzeug „Frei Verformen“, wählen die Option „Umhüllen“ rechts unten. Nun nehmen Sie den Anfasser auf der linken Seite in der Mitte und biegen mit ihm die Grafik nach rechts. Das Gleiche machen Sie mit dem rechten mittleren Anfasser. Der Kojote macht also eine Ausholbewegung.

Screenshot
Die Biegung gibt einen Vorgeschmack auf die Bewegung

Setzen Sie im dritten Frame ein leeres Schlüsselbild. Nehmen Sie das Rechteckwerkzeug mit einem linearen Verlauf aber ohne Rand. Der Verlauf hat in der Mitte und auf beiden Seiten die dominante Farbe Ihres Vordergrundmotivs. Die beiden äußeren Farben werden transparent gesetzt. Der Verlauf wird waagrecht gedreht.

Da der Verlauf nun links und rechts eine harte Kante besitzt ist er optisch unglaubwürdig. Wählen Sie ihn aus und gehen Sie auf „Modifizieren/Form/Ecken abrunden“ und wählen Sie Abstand: 20, Schritte: 5 und „nach außen“. Nun ist der Verlauf überall „weich“. Schieben Sie ihn genau in die Mitte zwischen Kojote und linker Bildkante.

Zum Schluss erzeugen Sie im vierten Frame der Kojote-Ebene ein weiteres, leeres Schlüsselbild. Es ist nur noch der Hintergrund zu sehen.

Wenn Sie die Animation jetzt testen, läuft sie sofort ab und verliert etwas an Wirkung. Schöner ist es, wenn Sie im ersten Frame ein stop(); platzieren und über die gesamte Bühne einen unsichtbaren Button legen, der auf Knopfdruck play(); veranlasst. Ziehen Sie dazu auf einer eigenen Ebene ein Rechteck über die Bühne, klicken Sie es doppelt an, wandeln Sie es in einen Button um („F8“) , klicken Sie erneut doppelt und ziehen Sie den schwarzen Punkt aus dem Frame „Auf“ in den Frame „Aktiv“. Kehren Sie zurück zu Szene 1 und programmieren Sie den Button. Fertig.

Frank Puscher

Autor der Fachbücher "Leitfaden Web-Usability", "Flash MX-Das Kochbuch" und "Die Tricks der Internet Künstler". Frank Puscher ist nicht nur ein angesehener Autor, der für zahlreiche Fachzeitschriften tätig ist, er ist auch als Schulungsleiter und Berater erfolgreich.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!