*     Kieselsteine Tutorial *


Figuren Tutorial   | Tutorial zu Pfaden   | Tutorial für Masken   | Tween's
Button's   | MovieClip   | Cinema 4d   |

Blender 2.5 VideoTutorials

FlashVideoTutorials

Video Tutorials

HTML, CSS, javaScript

Webseite der Kieselsteine

Kieselsteine Blog

    Seite 1   |    Seite 2   |    Seite 3


Animationen mit Flash   3. Teil



das Dackel Fla
Eisbär Fla

Die Fla's zum herunterladen
rechts klicken und Ziel speichern unter wählen.


Als erstes soll der Dackel einmal etwas wedeln. Dazu klickst Du im MovieClip "figur" in das zweite Bild der Zeitleiste. Wenn Du nun mit dem Pfeil weiter in dieses Bild zeigst und rechts klickst, erscheint ein Auswahlfenster. Wähle dort;
Schlüsselbild einfügen.

Bild 18:




Das Bild wird nun wie das erste Bild grau mit einem schwarzen Punkt. Dort hast Du jetzt den genau gleichen Dackel wie auf dem ersten Bild, mit al seinen KörperMovieClipTeilen. Auch diese sind nur Instanzen von den Orginalen in der Bibliothek. Flash spart auf diese Art eine Menge Bytes.
Damit er wedelt, solltest Du mit dem Drehwerkzeug oben den Schwanz etwas verändern. Klicke dazu zuerst den einen Teil des Schwanzes ganz am Körper an und drehe ihn nach oben. Da er sich nun vom Körper wegverschoben hat, ziehe ihn so gedreht einfach wieder an den richten Platz. Das gleich kannst Du nun mit dem Schwanzspitz machen. Wenn Du nun auf Steuerung/Film testen klickst sollte es in etwa so aussehen;



Zweifellos wedelt dieser Dackel jetzt etwas gar hektisch!
Dies hat folgenden Grund;
Klicke auf Modifizieren/Dokument. Ausser der Film Breite und Höhe sollte es jetzt bei Dir in etwa so aussehen;





BpS heisst nichts anderes als Bilder pro Sekunde! Eine zwölftel Sekunde ist eben doch relativ schnell um, wie Du an der Hektik Deines Dackel sehen kannst.(-;
Darum verschiebe jetzt das zweite Bild auf das dritte. Fahre dazu mit der Mausspitze über das zweite Bild und ziehe es auf das dritte. Das ganze sieht dann so aus;





Das Bild 2 hat nun statt einem schwarzen Punkt ein leeres schwarzes hochgestelltes Rechtecken. Für Flash heisst das "alles beim alten". Ohne ein Bytes zu verlieren, geht Flash gleich zum dritten Bild. Das dritte Bild ist wieder ein Schlüsselbild wie das erste. Das schaut sich Flash genauer an und stellt den Dackel neu dar.
Fahre nun mit der Maus auf das fünfte Bild, klicke rechts und füge erneut ein Schlüsselbild ein. Teste jetzt nochmals Dein Film unter Steuerung/Film testen!
Der Dackel sollte sich etwas beruhigt haben, hoffe ich.



Die Zeitleiste des MovieClips "figur" sieht nun so aus;

Bild 21:




Bis hier her habe ich rein technisch (der grobe weg) das Wichtigste erklärt. Ab jetzt wird es praktisch und gibt viel Arbeit!
Zu aller erst schaust Du Dir am besten so ein Dackel einmal genauer an, wenn er läuft. So viel kann ich Dir auch so verraten;
Er bewegt zuerst den vorderen rechten Pfoten nach vorne, dann den hintern linken, um anschliessend spiegelverdreht mit dem vordern linken das selbe zu tun. Am Schluss vergisst er auch den hintern rechten nicht, bevor alles wieder von vorne beginnt. Nicht vergessen solltest Du aber auch, dass er, wenn er den vorderen rechten Pfoten nach vorne bewegt, der vorderen linken um das zurück fallen lässt. Das selbe geschieht natürlich auch mit den drei anderen Pfoten. Ich rate Dir, wie oben immer ein Schlüsselbild auszulassen, ausser Du willst den Dackel vorwärts spulen.
hi! jetzt legst Du eine gute Platte auf und lernst Deinem Dackel laufen. Vergesse nicht, dass auch die Ohren im Laufwind etwas mitwackeln. Daneben schaut der Dackel auch ab und zu etwas nach rechts und links, und muss zu guter letzt bei der ganzen Angelegenheit auch atmen. Dazu hat er ja sein Unterkiefer, den Du zwischendruch ruhig einmal etwas aufklappen darfst!



Mein Dackel hat noch etwas Artrose. Um ihn ganz richtig einzustellen, bräuchte ich nochmals sehr viel Zeit und Geduld, die mir leider gerade fehlt. Es hat etwas Exponentielles. Ein Gehen anzutönen geht noch relativ schnell. Den Gang schön ausarbeiten geht dann schon sehr viel länger. Um dem ganzen den letzten Schliff zu geben, arbeitet man das zehnfache an Zeit, die man schon bis da hin darangesessen hatte.

Auch in eine Bewegung kann man mit einer art Lupe immer tiefer eingehen, um so tiefer man kommt, umso langsamer kommt man vorwärts. Ich vermute einmal, da stösst man auf ein ziemlich allgemeines Gesetz dieser Erde.

Jetzt erst sehe ich gerade, dass mein Dackel nun doch läuft wie ein Kamel. Sein Kamelgang hat er meiner Legasthenie zu verdanken (-;

Der Dackel der im Hintergrund von rechts nach links läuft ist übrigens mit dem MovieClip "figur" gemacht. Das ist mit der Hauptgrund, wieso ich die Animation des Dackels nicht direkt auf der Hauptzeileiste gezeichnet habe. Jetzt kann ich das ganze Paket MovieClip "figur" über die Bühne fahren lassen. Ich habe ihn zusätzlich spiegelverkehrt gebraucht, das kannst Du auch mit dem Skalierwerkzeug machen. Setze also einen MovieClip "figur" ganz rechts auf die Bühne auf einer separaten Ebene. Füge auf dem 200ersten Bild ein Schlüsselbild ein und ziehe dort den Dackel ganz nach links. Klicke wieder auf das erste Bild, und gebe im Eigenschaftsfenster bei Tween --> Bewegung ein.

Bild 23:




In meinem Beispiel habe ich sogar einen neuen MovieClip "gang" erzeugt. Dort drin habe ich einen MovieClip "figur" aus der Bibliothek hineingezogen. Ich habe also nochmals eine MovieClipverschachtelung tiefer geschachtelt. So ist mein gehender Dackel flexibler. Ich kann ihn nun überall gehen lassen wo ich will, in dem ich einen MovieClip "gang" setze, darin, die figur und dadrin wiederum der Bauch das Bein u.s. w.

Zum Schluss noch etwas zur veröffentlichung. Um eine Flash Datei ins Netz zu stellen braucht es immer drei Datein. Das .fla und das .swf plus das .html
Die Fla Datei brauchst Du nur für Dich zu hause. Das ist die Datei, die Du im Flash bearbeitest. Die swf Datei erzeugst Du automatisch wenn Du den Film testest. (Steuerung/Film testen) Jetzt brauchst Du aber noch ein so genanntes HTML Couvert. Dort drin bindest Du Deine swf Datei ein. Das geht alles automatisch, wenn Du auf Datei/veröffentlichen klickst. Du wirst im Explorer sehen, dass unter Deiner Dackel Datei diese drei beschriebenen Dateien gespeichert sind. hier noch ihre Icons, damit Du sie erkennen kannst;

Bild 22:






Hier stelle ich Dir die Dackel.fla zum download zur Verfügung.
Dazu kannst Du Dir auch noch ansehen, wie ein Eisbär gemacht wird.
Der Eisbär ist zusätzlich noch in einem Button und dreht sich auf die andere Seite, wenn der User mit der Maus über ihn fährt.

das Dackel Fla
Eisbär Fla

Die Fla's zum herunterladen
rechts klicken und Ziel speichern unter wählen.






    Seite 1   |    Seite 2   |            Seite 3

Blender 2.5 VideoTutorials

FlashVideoTutorials

Video Tutorials

HTML, CSS, javaScript

Webseite der Kieselsteine

Kieselsteine Blog