Tutorial: Eine Figur in Flash animieren und bewegen 1. Figur erstellen Zunächst brauchen wir eine Figur, die verschiedene Bewegungsabläufe beherrscht. Die kann man natürlich selber erstellen oder ihr nehmt zum üben Bewegungsabläufe einer Figur aus einem bestehenden Computerspiel. Diese Bewegungsabläufe haltet ihr mittels Screenshot Frame für Frame fest. Für unser Vorhaben brauchen wir folgende Bewegungsabläufe: gehen, treten, schlagen und ducken.
laufen treten schlagen ducken Wenn ihr eine Abfolge von Bewegungen zusammengestellt haben, können wir diese auf die Flash Bühne laden. Wir speichern unsere Datei als bitmap (.bmp) ab und setzen unsere Arbeit nun im Programm Flash fort. 2. Figuren freistellen in Flash Zunächst importieren wir unsere soeben erstellte Datei, die alle Bewegungsabläufe beinhaltet.
Nachdem wir die Datei auf der Bühne sehen Wählen wir Modifizieren/Bitmap/Bitmap nachzeichnen aus. In das Fenster geben wir die Werte und Optionen aus dem nebenstehenden Screenshot ein. Nun können wir einzelne Bereiche des Bildes anwählen. Wenn wir auf die weisse Fläche um unseren Protagonisten klicken können wir diese löschen und stellen so die Figuren frei.
Wir können nun mit der Maus über die ganze Figur einen Rahmen ziehen und sie Auswählen. Jetzt konvertieren wir unsere Auswahl in ein Symbol. Dazu benennen wir den Frame der jeweiligen Bewegungsabfolge und stellen den Typ Grafik ein. Die Grafiken sollten der Einfachheit halber nach der Bewegungsabfolge und nach der Reihenfolge in der sie Auftreten benannt sein (schlagen1, schlagen2, schlagen3, ) 3. Movieclips Nachdem wir für jeden Frame eines Bewegungsablaufes eine Grafik erstellt haben, können wir das Bild auf unserer Bühne löschen. Nun müssen wir Movieclips erstellen. Achte darauf, dass in der Zeitleiste nichts markiert ist und erstellt über Einfügen/ neues Symbol einen Movieclip.
In den Movieclip ladet ihr die Figuren für die Bewegunsabfolge, für die die Frames bestimmt sind. Jede einzelne Bewegung muss einen eigenen Frame in der Zeitleiste bekommen. Wir fügen also für jedes Bild immer ein neues, leeres, Schlüsselbild in die Zeitleiste ein. Achte darauf, dass jedes der Bilder so platziert ist, dass sie sich in der Animation nicht von dem Frame zuvor und danach unterscheidet (z.b. sollten die Füße des Protagonisten ebenso auf dem Boden stehen und nich im nächsten Bild einige pixel Höher positioniert sein als es die Füße vom Protagonisten im vorhergehenden Frame waren) Um die Figur möglichst Deckungsgleich zu positionieren empfiehlt sich die sogenannte Zwiebelschale in der Zeitleiste. So sind die einzelnen Bilder transparent. Das muss nun auch für alle anderen Bewegungsabfolgen gemacht werden. Für jede Bewegung, die Dein Protagonist ausführen soll (schlagen, ducken usw.) muss ein movieclip erstellt werden, der die dazu gehörigen Bewegungsabläufe beinhaltet. Jetzt erstellen wir wieder ein neues Symbol/ Movieclip und benennen es. In diesem Fall heisst der Movieclip zool_mc. Dieser Clip beihnhaltet alle Movieclips mit den Bewegungen schlagen, treten usw. 4. Actionskript Damit der Movieclip nicht fortwährend abgespielt wird, müssen wir den stop(); - Befehl in jeden Movieclip einbauen, den wir in den Haupt-Movieclip eingefügt haben. Mit der Funktion Zwiebelschale, können wir wieder überprüfen ob die Figuren korrekt übereinander plaziert sind.
Das ganze sollte dann in der Zeitleiste des Haupt- Movieclips Aussehen wie im links stehenden Bild. Zwischen den einzelnen Bewegungsabläufen muss immer ein leeres Schlüsselbild stehen. Nun geben wir jedem gefüllten Schlüsselbild im Eigenschaften Fenster einen Namen (einen, der etwas mit der Bewegungsabfolge zu tun hat, die dargestellt wird) Wenn es wie im linken Bild angezeigt wird, ist alles richtig.. Diesen Movieclip (zool_mc) ziehen wir nun auf die Bühne. Dort haben wir dann in unserer Zeitleiste ein Schlüsselbild mit Inhalt. Klicke in dieses Schlüsselbild und füge nun folgenden Code ein (ich habe meine Bewegungsabfolgen step, attack, stance und crouch benannt): zool_mc.step=15; zool_mc.attack = false; zool_mc.stance= 1; zool_mc.crouch=false; keydown=false; this.onenterframe = function() if(zool_mc.attack==false)
if (Key.isDown (Key.RIGHT) ) zool_mc._xscale = 100; zool_mc.stance=1; zool_mc._x+= zool_mc.step; zool_mc.gotoandstop("walk"); else if (Key.isDown (Key.LEFT) ) zool_mc._xscale = -100; zool_mc.stance=0; zool_mc._x-= zool_mc.step; zool_mc.gotoandstop("walk"); else if (Key.isDown (Key.DOWN) ) zool_mc.gotoandstop("crouch"); zool_mc.crouch=true; else if (!Key.isDown ()) zool_mc.gotoandstop("stance"); zool_mc.crouch=false; if (Key.isDown (Key.CONTROL) && keydown==false) zool_mc.attack=true; if(zool_mc.attack) if (Key.isDown (Key.DOWN)) zool_mc.gotoandstop("kick"); else zool_mc.gotoandstop("attack"); if (Key.isDown (Key.CONTROL)) keydown=true; else keydown=false;
keydown brauchen wir um sicherzustellen, dass die Taste, die zum ausführen eines Angriffs benötigt wird, nicht weiter gedrückt wurde bevor der nächste Angriff ausgeführt wird. stance kontrolliert die Richtung in die der Protagonist agiert. 1 steht hierbei für rechts und 0 für links. step ist die Menge von Pixeln in der unser Protagonist sich bewegt, wenn gefordert. attack gibt an ob sich der Protagonist im Zustand des Attackierens befindet. Das Skript gibt vor, dass der Protagonist sich nicht rühren kann, wenn er einen Angriff ausübt. Damit der Protagonist nicht dauernd animiert ist, wenn man eine der Steuerungstasten drückt befindet sich im Code dieser Befehl: else if (!Key.isDown () ) zool_mc.gotoandstop("stance"); zool_mc.crouch=false; Nun müssen wir noch in die Movieclips gehen, die das Schlagen und Treten beinhalten. wir klicken auf den letzten Frame in unserer Zeitleiste bei dem jeweiligen Clip und geben folgendes ein: _parent.attack=false; Dies machen wir nur bei den Movieclips, die Schlagen und Treten darstellen sollen. Wenn wir das nicht tun, dann wird der Protagonist nicht aufhören zu schlagen und zu treten. Bei dem Movieclip, der das ducken der Figur abspielen soll machen wir dasselbe, nur setzen wir hier wieder den stop();-befehl ein. Nun werden alle Bewegungsabfolgen korrekt dargestellt und wir können den Film testen. Die Figur kann jetzt mit den Pfeiltasten links und rechts in die jeweilige Richtung bewegt werden und sich mit ducken, wenn wir die Pfeiltaste nach unten drücken. Command ermöglicht das schlagen und wenn wir Command+Pfeiltaste unten drücken kann sie in geduckter Haltung treten.