Modul 8.7 Multimediakurs: Flash

Meist ist die Animationserstellung in Flash jedoch deutlich einfacher als im vorigen "Daumenkino"-Beispiel. Es genügt, zwei Keyframes (Schlüsselbilder) als Ausgangs- und Endversion einer Animation zu erstellen. Dazwischenliegende Bilder errechnet Flash automatisch. Da die Bilder "in between" der Keyframes liegen, ist die Methode als Tweening bekannt. Flash unterscheidet zwischen Bewegungstweening und Formtweening.

Beim Bewegungstweening werden identische zu animierende Objekte an unterschiedliche Position zu Anfang und Ende der Animation gesetzt, Flash errechnet die dazwischen notwendigen Bilder selbst. Die Bewegung kann auch entlang eines vom Programmierer erstellten Pfades ablaufen. Damit ist das Bewegungstweening prinzipiell mit einer dhtml-Animation von Floating Boxes entlang eines Pfades vergleichbar.

Weit mehr Möglichkeiten bietet das Formtweening. Hier wird zwischen unterschiedlichen Anfangs- und Endbildern quasi "morphierende" Übergänge geschaffen. Anfangs- und Endbild sind nicht nur verschieden, sondern können sogar an unterschiedlichen Positionen liegen.

Beispiele zum Bewegungstweening:

1. Einfaches Bewegungstweening zwischen Ausgangs- und Endposition (Dateigröße 1,9 kb)

Nachfolgend eine Kurzanleitung zur Erstellung eines Bewegungstweens (siehe rote Ziffern)

1 Neue Ebene anlegen (Menu Ebene/Neu): jede Animation muss auf einer eigenen Ebene sein.
2 und 4: In Zeitleiste Schlüsselbilder an Ausgangs- und Endposition der Animation einfügen (Einfügen/Schlüsselbild).
5. Klicken Sie in der Zeitleiste auf das erste Schlüsselbild (2) und erstellen eine zu animierende Grafik (hier Mondgesicht, es liegt außerhalb der Bühne, damit es erst bei Beginn der Animation ins Blickfeld wandert). Wichtig: diese Grafik muss über Einfügen/in Symbol konvertieren in ein sog. Grafik-Symbol konvertiert werden. Es erscheint dann in der Bibliothek (Fenster/Bibliothek) und kann von dort beliebig oft weiterverwendet werden (näheres zu Symbolen später). Gehen Sie auf das Endschlüsselbild (4) und ziehen dort das Symbol aus der Bibliothek auf die Endstelle (6). Sie erstellen damit eine sog. Instanz des Symbols.
Ziehen Sie in der Zeitleiste das erste Schlüsselbild (2) auf bis zum Beginn des zweiten Schlüsselbilds (4). Dadurch werden weitere identische Bilder eingefügt. In unserem Beispiel habe ich auch das zweite Schlüsselbild (4) etwas aufgezogen, damit am Schluss der Animation der Mond etwas stehenbleibt.
Klicken Sie wieder auf das erste Schlüsselbild in der Zeitleiste (4). In der Palette Bild wählen Sie unter Tweening (7) die Option Bewegung. Sie können auch bei Abbremsen (8) einen Wert eingeben und Drehungen (9) angeben. Danach finden Sie in der Animationsebene (Ebene 2 in unserem Beispiel) einen durchgezogenen Pfeil, der angibt, dass das Tweening korrekt eingebaut wurde. Sehen Sie unter Steuerung/Film testen, wie die Animation aussieht. Wenn alles ok ist, als Flash-Player Film exportieren.
Optional können Sie das Bewegungstweening an einem Pfad laufen lassen. Erstellen Sie dazu eine Pfadebene (Einfügen/Pfad) und zeichnen einen Pfad. In der Bildpalette aktivieren Sie An Pfad ausrichten (13). Ziehen Sie im ersten Schlüsselbild (2) das Animationsobjekt (5) auf den Beginn des Pfads (Objekt in Mitte anfassen, muss "einrasten"), danach auf dem zweiten Schlüsselbild (4) das Animationsobjekt (bei 6) auf das Ende des Pfads (muss wiederum "einrasten, was durch einen kleinen Kreis im Zentrum der Animation erkennbar wird). Fertig!

Animiert wurde nur der Meeresspiegel. Das Wasser besteht aus einem Rechteck, welches durch einfaches, abgebremtes Bewegungstweening nach unten bewegt wird. Danach wird es in einer zweiten Tweening-Animation wieder nach oben bewegt, dazwischen liegt eine Pause ohne Tweening. Die Animationsebene liegt hinter der Zeichenebene, damit das sich bewegende Rechteck wie gewünscht abgedeckt wird. Außerdem ist auf der oberen, d.h. der statischen Zeichenebene im unteren Bereich ein weißes Rechteck (mit weißem Rand), damit die sich nach unten bewegende blaue Box unten immer komplett abgedeckt bleibt. Das ganze hat die unschlagbare Dateigröße von < 1 kb!

Nachfolgend die Zeitleiste für das Beispiel. Auf der oberen Ebene befindet sich die statische Zeichnung in braun, auf der unteren Ebene das doppelte Bewegungstweening für das blaue Wasserrechteck. Von Bild 1 bis 25 bewegt sich der Meeresspiegel nach unten, bis Bild 34 bleibt er tief, von 35-58 bewegt er sich nach oben, danach bleibt er hoch bis Bild 75. Danach läuft die Animation von vorne ab (entspricht der Standardeinstellung, wie man nur einmaligen Durchlauf einstellt, erfahren Sie später (-> Skripting).