Workshop: Flash Tweening mit Actionscript 2

Programmierte Bewegung

Immer wieder die gleichen Bewegungen per Tweening umzusetzen, ist sehr aufwendig. Benutzen Sie stattdessen Tweening-Klassen von Actionscript 2.

Es wird nicht lange her sein, da haben Sie im Web einen Flash-Animationseffekt gesehen, der mit enormem Aufwand produziert worden zu sein schien.

Inzwischen gibt es jede Menge sogenannter Tweening-Klassen. Diese Klassen enthalten den gesamten Code für eine bestimmte Art von Bewegung und werden mithilfe einfachster Actionscript-Befehle ausgelöst und durch Parameter individuell konfiguriert.

Flash CS4 schafft die Grundlage für einen ganz neuen Markt. Animationseffekte können als Presets gespeichert und auf beliebige Objekte wiederholt angewandt werden.

Durch ein austauschbares XML-Format lassen sich fertige Effekte zum Download anbieten oder verkaufen. Googeln statt Tweening - so könnte der Workflow der Zukunft für ambitionierte Flasher lauten.

Tweening per Script

Im Wesentlichen gibt es drei Disziplinen, bei denen programmierte Animationen zum Tragen kommen: als Ersatz für klassische Tweenings, zur Manipulation von Filtereffekten und zum dynamischen Zeichnen auf der Bühne.

Dank Flash Player 10 gibt es inzwischen auch die ersten programmierten Bitmapmanipulationen im Netz (Stichwort Pixelbender).

Für die meisten Standardeffekte bringt Flash CS 3 Animationsklassen mit. So gibt es Kassen für jede Form der Animation inklusive Alpha-Tweenings. Und es gibt die Beschleuniger-Klassen für Abbremsen und Beschleunigen.

Bevor Sie eine dieser Klassen benutzen können, müssen Sie sie in den Flash-Film importieren. Entwerfen Sie eine Szene, die für einen Elastik-Effekt plausibel erscheinen würde. Im Beispiel extrahieren wir den Buchstaben t aus einem Text und lassen ihn zurück in den Text animieren.

Wandeln Sie dazu das Objekt in einen Movieclip um und geben Sie ihm den Instanznamen buchstabe_mc.

Erzeugen Sie eine weitere Ebene, die Sie Aktionen nennen, und platzieren Sie dort im ersten Frame folgende Programmierung.Zunächst werden die Tween-Klassen importiert.

Achten Sie auf den Platzhalter * im zweiten Befehl. Er lädt alle sechs Klassen der Kategorie easing. Weiter unten werden Sie sehen, welche Klassen es gibt.

Übrigens geschieht das Importieren der Klassen in dem Moment, in dem Sie Veröffentlichen drücken. Sie müssen also keine weiteren Dateien auf den Server legen.

Nun definieren wir die Interaktion mit dem Buchstaben. Klickt der Nutzer darauf, kann er ihn ziehen. Gleichzeitig wird er auf 200 Prozent vergrößert.

Wie Sie sehen, werden in der Funktion drag auch die beiden Listener für das Loslassen und damit die Animation gestartet. Das ist schön einfach, denn losgelassen kann eben nur werden, wenn vorher geklickt wurde.

Der Befehl onReleaseOutside ist eine Sicherheitsmaßnahme, wenn der Nutzer sehr schnell mit der Maus hin und her zieht.

In der dann ausgelösten Funktion wird zunächst jegliche Interaktion verboten. Hierzu werden die Listener gelöscht.

Dann wird der Drag-Vorgang gestoppt.

Jetzt erzeugen wir vier Tween-Programmierungen. Zwei beziehen sich auf die Position und zwei auf die Skalierung des Buchstabens. Der Variablenname vorne ist beliebig. Er dient der späteren Prüfung, ob die Animation komplettiert wurde.

Die Syntax in der Klammer folgt folgender Logik: (zu animierende Instanz, zu animierende Eigenschaft, Animationsart, Ausgangswert, Endwert, Zeit, Zeitmessungsart). Steht der letzte Parameter auf false wird in Frames gemessen, bei true in Sekunden.

Da alle Animationen gleich lange dauern, reicht es, wenn wir das Ende einer Bewegung abwarten, um dann die Interaktion wieder zu ermöglichen.