{"id":506,"date":"2010-03-09T16:40:43","date_gmt":"2010-03-09T15:40:43","guid":{"rendered":"http:\/\/www.sachaheck.net\/blog\/?p=506"},"modified":"2010-03-09T16:40:43","modified_gmt":"2010-03-09T15:40:43","slug":"erste-animation-flash","status":"publish","type":"post","link":"https:\/\/www.sachaheck.net\/blog\/flash\/erste-animation-flash","title":{"rendered":"Erste Animation mit Flash"},"content":{"rendered":"

Im diesem Blogpost wollen wir heute erste Schritte bei der Erstellung einer Flash-Animation machen. Dabei werden wichtige Grundlagen erkl\u00e4rt die wichtig sind f\u00fcr sp\u00e4tere komplexere Animationen. Diese Animation ist unser Ziel (wenn die Animation schon abgelaufen ist, nochmals im Browser \u00bbRefresh\u00ab klicken, meistens Apfel (Strg) + R):<\/p>\n

<\/embed><\/object><\/p>\n

Wie macht man sowas, das ja eigentlich erst mal einfach aussieht? Neues Dokument erstellen mit Default 550 x 400 Pixel und die Framerate auf 31 fps stellen. Nun erstellen wir mit dem Formenwerkzeug ein Quadrat von z.B. 100 x 100 Pixel. Dazu legen wir zwei Ebenen in der Timeline an: Eins nur f\u00fcr das Quadrat und eins f\u00fcr das Actionscript.<\/p>\n

\"\"<\/p>\n

Nun das Quadrat anklicken und im Men\u00fc \u00bbModify\u00ab \u2013 \u00bbConvert to Symbol\u00ab w\u00e4hlen (oder via Rechtsklick bzw. CTRL-Klick bei Eintastenm\u00e4usen) und es damit in ein MovieClip konvertieren. Diesem einen beliebigen Namen geben. Ich nenne meins mal kreativerweise Quadrat ;) Hier passiert nun etwas sehr Grundlegendes in Flash: Man konvertiert ein Symbol in ein MovieClip das nun wiederum weitere Verschachtelungen und eine eigene besitzt. Das ist am Anfang recht konfus und f\u00fchrt zu Fehlern jedoch ist dies eine der Schl\u00fcsselfunktionen von Flash. Neben dem MovieClip kann man hier auch noch einen Button erstellen oder dem Quadrat den Modus \u00bbGrafik\u00ab zuweisen. Aber f\u00fcr heute bleiben wir mal beim Movieclip. Sobald wir den Dialog best\u00e4tigt haben wird sich das Quadrat auch visuell beim Anw\u00e4hlen ver\u00e4ndern.<\/p>\n

\"\"<\/p>\n

Wenn man nun mit Doppelklick das Quadrat anw\u00e4hlt, gelangt man auf die n\u00e4chste Ebene der Timeline und zwar auf die Timeline des Quadrat-Movieclips, wo man wiederrum andere Ebenen auf der Timeline anlegen kann. Bedenken mu\u00df man, dass wenn man nun hier noch eine Animation ablaufen l\u00e4\u00dft, diese verschachtelt im MovieClip \u00bbQuadrat\u00ab abl\u00e4uft. Sobald man also nun das Quadrat von der Hauptzeiteiste, dem \u00bbRoot\u00ab wegnimmt, ist die Animation auch nicht mehr sichtbar. Deshalb kann die Hauptzeitleiste zwar dann nur ein \u00bbKeyframe\u00ab (also ein Schl\u00fcsselbild) enthalten und dennoch 50 Sekunden ablaufen weil in einem MovieClip versteckt eine Zeitleiste abl\u00e4uft. Zum Schluss dieses Tutorials stehen die fertigen .fla-Dateien zum Download.<\/p>\n

\"\"<\/p>\n

Jetzt f\u00fcgen wir via F5 (oder im Menu \u00bbInsert \u2013 Timeline \u2013 Frame\u00ab) 100 Frames auf den beiden Ebenen ein. Dazu w\u00e4hlen wir beide Bilder an, (zusammen mit dem leeren Actionscriptbild) und halten F5 gedr\u00fcckt bis wir 100 Frames haben. Auf dem letzen Frame, bei 100 f\u00fcgen wir nun ein weiteres Schl\u00fcsselbild ein via \u00bbInsert \u2013 Timeline \u2013 Keyframe\u00ab und bewegen nur auf diesem Schl\u00fcsselbild (dem letzten) das Quadrat auf der B\u00fchne ganz nach rechts.<\/p>\n

\"\"<\/a><\/p>\n

Nun irgendwo in die Zeitleiste klicken, wo das Quadrat drauf ist und \u00bbInsert \u2013 Classic Tween\u00ab ausw\u00e4hlen. Unsere erste Animation in Flash ist somit erfolgreich erstelllt :) \u00dcber den Shortcut \u00bbApfel (Strg) + Enter\u00ab oder \u00fcber \u00bbControl \u2013 Test Movie\u00ab kann man sich eine Vorschau ansehen.<\/p>\n

\"\"<\/a><\/p>\n

Wenn man nun m\u00f6chte, dass die Animation nicht mehr geloopt wird und sich so andauernd wiederholt, kann man einfach auf der 2. Ebene (die f\u00fcr die Actionscripts gedacht ist) auf dem letzen Keyframe (100), ein Schl\u00fcsselbild einf\u00fcgen und via F9 (oder mittels \u00bbWindow \u2013 Actions\u00ab das Fenster \u00bbActions\u00ab aufrufen und dort in das Textfeld der Actionscripts ein stop();<\/strong> reinschreiben. Somit wird die Animation beim letzten Frame gestoppt und Flash springt nicht wieder zu Frame 1 zur\u00fcck.<\/p>\n

Das waren jetzt wirklich die Basics einer Animation bei einem MovieClip. Was Ihr nun selbst ausprobieren k\u00f6nntet, w\u00e4re, das Quadrat nicht in ein MovieClip umzuwandeln, sondern einfach auf der B\u00fchne zu lassen und als Endframe bei 100 einen Kreis hinzusetzen. Dieses dann durch ein \u00bbShapeTween\u00ab (kein ClassicTween) animiert und euch anschaut was dabei rauskommt. Ausserdem k\u00f6nnt Ihr die Funktion \u00bbCreate MotionTween\u00ab auch ausprobieren die euch erlaubt, das Tweening sehr viel genauer zu steuern, z.B. wo es schneller oder langsamer laufen sollte, via \u00bbEase\u00ab. Man kann diese Tweens auch direkt \u00fcber Actionscript ansteueren ohne nur ein Mal auf der Zeitleiste zu arbeiten. Ich werde in einem n\u00e4chsten Tutorial genauer auf ActionScript eingehen und versuchen, das Ganze so schmackhaft wie m\u00f6glich zu machen. Dabei werde ich haupts\u00e4chlich probieren, euch AS3 n\u00e4her zu bringen. Jedoch werden auch verschieden Dinge noch in AS2 erl\u00e4utert.<\/p>\n

Wie schon gesagt, hier die Links zum Download der Flashdateien:<\/p>\n

Quadrat MovieClip Tween<\/a><\/p>\n

Quadrat Graphic Tween<\/a><\/p>\n

Quadrat verschachtelter Tween<\/a><\/p>\n

Viel Spa\u00df beim Rumexperimentieren ;-)<\/p>\n

\u00a9 wasp<\/a><\/p>\n