Dynamische Bewegung in Flash – Das Gummiband

Mit einfachen Animationen, in denen sich ein Objekt von links nach rechts bewegt, können Sie keinen Betrachter mehr vom Stuhl reißen. Mit dynamischen Bewegungen könnte Ihnen dies allerdings sehr wohl gelingen.

Erstellen Sie ein neues Flashdokument mit den Ausmaßen 500 x 200 Pixel. Zeichen Sie mit dem Ellipsenwerkzeug einen Kreis und skalieren Sie diesen anschließend auf eine Breite und Höhe von 8 Pixel. Richten Sie den Kreis über das Bedienfeld „Ausrichten“ vertikal zentriert an der Bühne aus. Aktivieren Sie hierfür im Bedienfeld die Schaltfläche „An Bühne ausrichten“ und klicken Sie anschließend unter „Ausrichten“ auf das zweite Symbol von Rechts.

Das Bedienfeld „Ausrichten“:


Verschieben Sie den Kreis daraufhin horizontal an den linken Rand des sichtbaren Bühnenbereiches. Da wir das Objekt häufiger benötigen werden, wollen wir es in ein Symbol konvertieren. Markieren Sie hierfür den Kreis und betätigen Sie nachfolgend die Funktionstaste F8. Wählen Sie unter Verhalten die Option „Movieclip“ und verlassen Sie das Fenster über die Schaltfläche „Ok“. Wechseln Sie in den Bearbeitungsmodus des Symbols und rufen Sie von hier aus erneut mit F8 das Dialogfenster zum Erstellen eines Symbols auf. Wählen Sie diesmal das Verhalten „Schaltfläche“ aus. Weiterhin im Bearbeitungsmodus des ersten Symbols, markieren Sie die Schaltfläche und rufen mit F9 das Aktionen-Fenster auf. Schreiben Sie folgenden Code in das Fenster:


Wechseln Sie mit Strg + E zurück auf die Hauptbühne. Gehen Sie nun in das Bedienfeld „Eigenschaften“ und geben Sie der bestehenden Instanz des Kreis-Symbols den Namen „1“.

Zum Einfügen eines weiteren ActionScripts benötigen wir eine zweite Ebene in der Zeitleiste. Benennen Sie die bestehende Ebene mit „objects“ und erstellen Sie daraufhin eine Zweite mit den Namen „actions“. Gehen Sie in das erste Bild der Ebene „actions“ und rufen Sie mit der Funktionstaste F9 das Aktionen-Fenster auf. Platzieren Sie in dem Fenster folgenden ActionScript:


Mit Hilfe des ActionScripts sparen wir uns die Mühe, selbstständig 50 Instanzen des Kreis-Symbols auf der Bühne zu platzieren. Dies erledigen wir in einer For-Schleife durch duplizieren der bestehenden Instanz. Dabei vergeben wir als Instanzennamen eine fortlaufende Nummer und duplizieren das jeweils zuvor erstellte Objekt. Damit die Instanzen auf der Bühne nicht übereinander liegen, verschieben wir jede neue Instanz um 10 Pixel nach rechts. Wenn Sie Ihre Flashdatei nun testen, sollten sich 50 horizontal nebeneinander angeordnete Kreise auf der Bühne befinden.
Markieren Sie erneut die Instanz „1“ auf der Bühne und rufen Sie anschließend das Aktionen-Fenster auf. Wie Sie schon erahnen können, benötigen wir erneut ein paar Zeilen ActionScript:


Mit „onClipEvent(load)” reagieren wir auf das erstmalige Laden der Flashdatei. Die Variable „thisIndex“ soll im Folgenden die Zahl der aktuellen Instanz speichern. In „prev“ und „next“ erfassen wir die Instanznamen der benachbarten Instanzen. Für die Animation benötigen wir die Y-Position der aktuellen Instanz. Diesen Wert speichern wir in der Variable „initPos“. Zusätzlich initialisieren wir eine Variable „speed“ mit dem Wert „0“. Es folgt die eigentliche Animation des Gummibandes:


Mit „onClipEvent(enterFrame)” sorgen wir für eine Abarbeitung der in Blockklammern umschlossenen Anweisungen bei jedem Bildereignis. Wird derzeit eine Instanz angeklickt, so besitzt die Variable „drag“ den Wert „true“. Wir passen die Position der aktuellen Instanz der Position der Maus an. In einer weiteren Variable „deltaY“ berechnen wir für die aktuelle Instanz den Abstand zwischen der Startposition und der aktuellen Position.
Wenn im Augenblick keine Instanz verschoben wird, befinden wir uns im Else-Zweig. Auch hier berechnen wir den Abstand. In einer If-Bedingung überprüfen wir, ob die aktuell betrachtete Instanz links oder rechts von der Instanz liegt, die ursprünglich eine Bewegung ausgelöst hat, also per Drag & Drop gezogen wurde.


Wir passen die Y-Position der aktuellen Instanz entsprechend der Benachbarten an. Sollte es sich bei der aktuellen Instanz um diejenige handeln, die für die Bewegung verantwortlich ist, so überprüfen wir die aktuelle Position und setzen entsprechend unsere Variable „speed“:


Zuletzt sorgen wir mit „speed = speed * 0.96” für eine künstliche Reibung, damit das Gummiband nach einer gewissen Zeit wieder zum Stillstand kommt. Sobald die Position der aktuellen Instanz weniger als einen Pixel von der ursprünglichen Startposition abweicht und die Variable „speed“ einen ebenso geringen Wert aufweist, sorgen wir für einen Animationsstopp.

Beispieldatei: Dynamische Bewegung[Dynamische_Bewegung_-_Das_Gummiband.zip]