Was bringt dieses Tutorial?

  Instanzen und movieclips

  Einzelbildanimation und Tweening

  Verschachtelte movie clips

  Aktionen zuweisen

  sound

  Animation per action-script




Was bringt dieses Tutorial?

Es gibt verschiedene Möglichkeiten Figuren zu animieren und jeder wird dabei seine eigenen Methoden anwenden. Trotzdem gibt es einige Möglichkeiten, an denen niemand bei einer Animation vorbeikommt. Das Arbeiten mit der Bibliothek bzw. das Wissen wie man Symbole erstellt wird dabei vorausgesetzt, denn dieses Tutorial beschäftigt sich hauptsächlich mit der Koordination bzw. Verschachtelung von Symbolen zur Erstellung einer Animation.
Zunächst gibt es hier das Beispiel-SWF, das zugehörige fla ist gezipt downloadbar.



Um anzufangen braucht man eine Figur, die man in Flash oder einem sonstigen Vektorprogramm erstellt und importiert. Man überlegt sich welche Teile der Figur animiert werden sollen und zerlegt so nach und nach die Figur in ihre Einzelteile, welche als Symbole bzw. Filmsequenzsymbole gespeichert werden. Oder man hat die Figur schon vorher auf einzelnen Ebenen gezeichnet und erspart sich das spätere Teilen.




Instanzen und movieclips



Die erste Abbildung zeigt, dass sich auf der Hauptbühne nur 4 Ebenen mit jeweils einem Keyframe befinden. (Die "AS" Ebene ist dabei jeweils den Aktionen zugewiesenen)
Die Ebene "mc_figur" beinhaltet den movieclip "figur", der alle Einzelanimationen der Figur zusammenhält. Warum die ganze Animation nicht direkt auf die Hauptzeitleiste legen? Einige Gründe nenne ich im Verlauf noch aber vorweg schon mal ein Beispiel. In diesem Fall ist so zum Beispiel die einfache Erstellung des Schattens (Ebene 3) möglich. Der Schatten ist nichts anderes als eine weitere Instanz (=Kopie) des movieclips "figur" und enthält die gleichen Bewegungsabläufe. Über die Optionen "Transformieren" kann man den Schatten neigen und skalieren und über das Effekte-Register weist man ihm einen beliebigen Farbton zu. Damit hat man schnell einen visuellen Effekt erzeugt ohne die Dateigröße zu erhöhen.

Es gibt also auf der Bühne zwei Instanzen des movieclips "figur". Die Schatten-Instanz habe ich über das Register Instanz/Name "shadow" genannt, die andere Instanz heißt "figur". Die Benennung von Instanzen ist nur dann wichtig, wenn man den zugehörigen movieclips später Aktionen zuweisen möchte. Möchte man den movieclips keine Aktionen zuweisen erübrigt sich auch die Benennung.

(Um keine Verwirrung zu stiften: Ich habe es mir zur Angewohnheit gemacht sämtliche Symbole als movieclips in der Bibliothek zu speichern, selbst wenn sie nur einen keyframe enthalten und den gleichen Zweck wie ein Grafiksymbol erfüllen. Deshalb finden sich in der .fla Beispieldatei nur mc's.)




Einzelbildanimation und Tweening

Movie clips laufen auf ihrer eigenen Zeitleiste, deshalb reicht nur dieser einzige keyframe in Szene 1. Beim Doppelklick auf die Instanz "figur" bietet sich folgendes Bild



Blau umrandet zeigen sich hier sämtliche Einzelteile, bzw. Ebenen dieses movieclips. Die Ebenen der Hauptszene scheinen leicht durch, was für exakte Positionierungen innerhalb eines mc's sehr hilfreich ist. Überhaupt ist dieses Vorgehen - sich per Doppelklick durch die einzelenen Symbole durchzuklicken- sehr zu empfehlen. So sieht man immer die einzelnen Symbole in ihrem Gesamtzusammenhang. (Bearbeitet man dagegen ein Symbol direkt aus der Bibliothek sieht man nur die Ebenen dieses Symbols)
Hier gibt es zwei Arten von Animation:

1. Die Einzelbildanimation, also frame by frame
2. Tweening

Die Einzelbildanimation ist aufwendig und speicherintensiv und sollte nur dann genommen werden, wenn es anders nicht geht. In diesem Fall soll die Bewegung eines Reifens dargestellt werden. Dafür mußte ich den Reifen teilen und in 2 Symbole umwandeln. Es gibt also ein Symbol "Reifen_vorne" und ein Symbol "Reifen_hinten". (Das können Grafik/ oder Filmsequenzsymbole sein) Oder man nimmt das Symbol Reifen_vorne, dupliziert und spiegelt es, um eine umgekehrte Ansicht zu erhalten. So spart man wieder ein wenig an Dateigröße.
Wichtig ist die Konvertierung in ein Symbol, bevor man mit der Einzelbildanimation beginnt, damit die Dateigröße niedrig gehalten wird. Folgende Abbildung zeigt die Ansicht, wenn die Ebene Ring_vorne ausgeblendet wird.



Die beiden Reifensymbole werden -aufgeteilt in 2 Hälften auf 2 Ebenen frame by frame animiert, um die Reifenbewegung zu erzeugen. Wenn der Reifen wegfliegt wird er durch ein anderes Symbol ersetzt, dem geschlossenen Reifen. Dieses Symbol kann man dann einfach per Bewegungstween animieren - in diesem Fall fliegt der Reifen weg und wir kleiner (s. folgende Abbildung)




Das letzte Bild des movieclips "figur" enthält eine stop-Aktion. Beide Instanzen ("shadow" und "figur") auf der Hauptbuehne stoppen also an diesem Punkt. Trotzdem laufen Teil-Animationen weiter. Das Gesicht wird animiert und die Augen bewegen sich in einer Endlos-Schleife. Auch hier geschieht das durch movieclips, die im letzten frame eingettet werden. Diese laufen dann, unabhängig von der stop-Aktion weiter.




Verschachtelte movie-clips

Auf der Zeitleiste des mc's "figur" befindet sich neben der Einzelbildanimation sowie des Tweenings also noch eine dritte Möglichkeit der Animation:
3. Die Verschachtelung von movie-clips

Nehmen wir also den Kopf der Figur. Die Mimik und die Bewegung des Gesichts ist nicht wie der Ring durchgehend auf der movie-clip-Zeitleiste animiert, sondern es befinden sich nur einzelne frames auf der Ebene, die nichts anderes beinhalten als wiederum einen movie-clip. Der letzte frame des mc's "figur" enthält den movieclip "mc_kopf_ende".





Der mc "m_kopf_ende" hat wie alle movieclips seine eigene Zeitleiste und enthält die Animationen des Gesichts und der Haare. Am Ende ist eine Schleife eingebaut, in der immer wieder zum Bild "eyes" gesprungen wird. Wenn am Ende einer Zeitleiste von movieclips keine Aktion vorhanden ist (z.B. stop() oder goto...) beginnen die clips wieder von vorne.
Genauso verhält es sich mit sämtlichen anderen mc's in der Figur. Anstatt durchgehend die Arm- oder Beinbewegungen frame by frame anzugeben reicht es einfach einmal einen movieclip zu erstellen, der die Animation enthält und diesen im movieclip "figur" einzubetten. So spart man
-viel Zeit
-Speicher
-und kann später viel schneller Änderungen vornehmen

Die Verschachtelung kann man beliebig fortsetzen, wie das folgende Beispiel zeigt. Der Body der Figur, also Arme und Rumpf wurden hier in der Filmsequenz "m_mid" animiert (für die Endsequenz gibt es nochmal einen Extra-mc, "m_mid_ende")



"m_mid" enthält den Rumpf und die Armbewegungen. Das Symbol "arm" wird dupliziert und ergibt gespiegelt den anderen Arm. Man hat also auch hier wieder zwei Instanzen eines Symbols. Instanz 1 nenne ich "arm1", Instanz 2 "arm2". Die Instanzen werden dann in 2 frames unterschiedlich positioniert, um eine Auf/Abwärtsbewegung zu erzeugen. In diesem Fall sind die Arme jedoch keine einfachen Grafiksymbole, sondern -wie könnte es anders sein wieder movieclips mit einer eigenen Zeitleiste.
Wenn wir uns nun die Zeitleiste des movie_clips "arm" ansehen sehen wir eine sich ständig wiederholende Aufwärtsbewegung der Hand (per Zwiebelschichtansicht deutlich gemacht).



Während sich also die Arme der Figur auf und ab bewegen bewegen sich gleichzeitig die Hände in ihrem eigenen, etwas schnellerem Tempo. Diese Koordination bzw. parallel ablaufende Bewegung erreicht man bestens durch Verschachtelung von Symbolen, in der Regel movie clips ineinander. Wenn man sich einmal an diese Vorgehensweise gewöhnt hat, die zunächst etwas kompliziert erscheint, merkt man schnell, wie sich das gesamte Handling einer komplexen Animation vereinfacht.

Mit movie clips erspart man sich zudem die Erstellung von zusätzlichen Symbolen. Möchte ich später zum Beispiel nur ein einziges Bild aus meinem mc "m_kopf" nochmal verwenden, kann ich dieses über das Register Instanz/Verhalten als Grafik definieren und angeben welches Einzelbild genau ich verwenden möchte. Oder ich definiere eine Filmsequenz kurzer Hand auf dem gleichen Weg in eine Schaltfläche um.




Aktionen zuweisen

Vorausgesetzt ich gebe allen Instanzen der movieclips Namen kann ich den entsprechenden Filmsequenzsymbolen Anweisungen geben, egal in welcher "Tiefe" sie sich befinden. So lautet beispielsweise eine Anweisung für die Instanz "arm2" von Szene 1 aus (ist nicht in der .fla Datei enthalten):

on (press) {
_root.figur.m_mid.arm2.stop();
}

Die Folge: Die Schaltfläche bewirkt, dass nur die Handbewegungen der Instanz "arm2" gestoppt wird, während die Instanz "arm1" weiterläuft. Zur Erinnerung: Wir haben im mc "m_mid" beide Arme, die sich auf und ab bewegen. Beide Arme sind Ursprung, also Instanzen ein und desselben movieclips, nämlich von "arm", wurden aber unterschiedlich benannt. Die Aktion bezieht sich folglich nur auf die Instanz "arm2".

Die Replay-Funktion: Da diese erst am Ende des Films erscheinen soll liegt der Button dann auch erst in dem movie-clip "m_kopf_ende" und erscheint erst dort, wo die Schleife startet (Bildbezeichnung: eyes).



Die zugewiesene Schaltflächenaktion lautet
on (press) {
_parent.play();
_root.shadow.play();
}

_parent ist in dem Fall der mc "figur" und Flash startet dort wieder bei Bild 1. Ebenso startet die Instanz "shadow" auf der Hauptbühne (_root) ebenfalls wieder bei Bild 1.




sound

Hier gehe ich nur kurz auf das Thema ein, denn sounds sind ein Tutorial für sich wert und bestimmt bei flashworker zu finden.
In diesem Beispiel wurde nur ein einziger Ereignissound verwendet. Er ist sehr kurz und man kann deshalb von einer synchronen Ablauf ausgehen.
Er wurde im movieclip "m_kopf_ende" direkt auf das Bild gelegt, in dem sich die Lippenbewegung befindet. Stellt man den sound (Register Sound) kurzfristig auf Stream, so läßt sich bereits in der Flash-Arbeitsumgebung der sound anhören. Stream-sounds empfehlen sich für längere sounds, bei denen der Bild-synchrone Ablauf wichtig ist, denn zur Not läßt Flash dann Bilder aus. In diesem Fall war das bei diesem kurzem sound nicht nötig.

Tipp: Gerade bei Animationen mit unterschiedlichen sounds bietet sich die Möglichkeit an, sounds per Funktionen anzusteuern. Das in Flash 5.0 eingeführte sound-object bietet sich dafür an. Man definiert also zu Beginn seine benötigten sound-objects und entsprechende stop,start etc. Funktionen. Damit kann man sounds später von jedem Ort aus bequem und sehr genau steuern.




Animation per action-script

Zusammenfassend kann man sagen, dass man durch den wiederholten Einsatz von Symbolen sowie Verschachtelung nicht nur mehr Übersicht über seinen Film gewinnt, sondern vor allem die swf-Größe so gering wie möglich hält. Bewegungstweening bietet eine schnelle Möglichkeit zu animieren. Setzt man es wiederholt ein oder braucht lange Tweenings geht dies allerdings auch zu Lasten der Dateigröße.
Deshalb der Tipp: Wem action-script liegt, kann Bewegung (und mehr) dadurch erzeugen. Eine per action script definierte Skalierung oder Drehung schlägt sich so gut wie gar nicht in der späteren swf-Größe nieder. Es findet sich hier auch bestimmt ein Tutorial zur Steuerung von movieclips per action-script, denn auch dieses Thema würde dieses Tut sprengen.