Willkommen zu einem zweiten Flash-Tutorial von mir. Im ersten wurdet ihr mit den Grundlagen vertraut gemacht und habt euren ersten Flashfilm erstellt. Ich hatte danach auch schon Tatendrang nach mehr, und stelle hier also eine erweiterte Lösung vor, um einen Film zu erstellen.

Wenn es einem lästig ist, dass die Kugel immer neu gezeichnet werden muss, wenn sie herumhüpfen soll, fragt man sich, ob es nicht einfacher wäre, wenn sie sich an einer Linie orientieren würde, die man jederzeit verändern kann. Dies ist tatsächlich möglich und nennt sich Bewegungs-Tweening. Uns reicht am Anfang ein kleiner Ball, der sich von A nach B bewegt. Fangen wir also an:

Also erstes starten wir Flash MX 2004 und zeichnen einen kleine Kreis (Maße und andere Werte nach belieben). Nun kommt das erste neue, für das ich das Tutorial „Schaltflächen, Movieclips, Grafiken“ empfehle. Verwandeln sie wie in diesem Tutorial beschrieben den Kreis in ein Movieclip. Die Bildrate (BpS) stellen wir dieses Mal auf 8 ein. Unsere Animation soll aus 24 Bildern bestehen, das entspricht einer Länge von 3 Sekunden. Klicken sie also in der Zeitleiste auf das 24. Schlüsselbild mit der rechten Maustaste und wählen sie „Schlüsselbild einfügen“. Markieren sie nun in der Zeitleiste das 1. Schlüsselbild und wählen sie im Bedienfeld „Eigenschaften“ die Option „Bewegung“ im Feld „Tween“ aus.


Listing 0100: Die ersten Schritte.
Markieren sie nun das 24. und somit letzte Schlüsselbild und platzieren sie den Kreis an der stelle, an der er am Ende stehen soll. Nehmen sie nun auch die Einstellung „Bewegung“ im Feld „Tween“ vor.
Testen sie ihren Film über STRG+Enter und schon wandert ihr Kreis über den Bildschirm – Ohne dass sie sich groß anstrengen mussten. Gut – oder? :-P


Listing 0110: Schon fast fertig.
Aber wir wollen sich den Kreis ja anhand einer Linie orientieren lassen. Wählen sie dazu links neben der Zeitleiste „Ebene 1“ mit einem klick aus. Unter der „Ebene 1“ befinden sich 3 Buttons, das Mittlere interessiert uns. Klicken sie es an.


Listing 0200: Pfadanimation.
Wählen sie nun die Pfadebene aus, indem sie sie anklicken (Sie hat die Beschriftung „Pfad: Ebene 1“) Zeichnen sie nun mit dem Freihandwerkzeug oder dem Linienwerkzeug eine beliebige Linie, welche beliebig positioniert ist. Wählen sie nun „Ebene 1“ durch einen klick aus und markieren sie das 1. Schlüsselbild. Ziehen sie den Kreis auf den Anfang der Linie. Er sollte mit der Runden Elipse in sich automatisch andocken. Wechseln sie nun ins 24. Schlüsselbild und platzieren sie den Kreis am Ende der Linie.


Listing 0210: Fertig.
Wir sind nun Fertig und der Kreis bewegt sich der Linie nach. Noch besser – Oder?

>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!