Wer immer wieder die gleichen Animationen erzeugt, für den wird es zu aufwändig, jede Bewegung als Tweening auszuführen. Benutzen Sie stattdessen lieber die Tweening-Klassen von ActionScript 2.
Es wird nicht lange her sein, da haben Sie im Web einen Flash-Animationseffekt gesehen, von dem Sie meinten, der wäre aber mit enormem Aufwand produziert worden. Das kann sein, doch der Schein kann auch trügen. Inzwischen gibt es nämlich jede Menge vorgefertigter Bewegungen in Form so genannter Tweening-Klassen. Diese Klassen enthalten den gesamten Code für eine bestimmte Art von Bewegung und werden mit Hilfe einfachster ActionScript-Befehle ausgelöst und durch die Übergabe einiger Parameter individuell konfiguriert.
Live Demo
Die AS2-Klassen sind vor allem dann hilfreich, wenn zwei Dinge miteinander kollidieren, die nicht unbedingt zusammen passen: freie Interaktion durch den User und daraus abgeleitete klar definierte Animationen. Das Problem zwischen den beiden ist nämlich, dass für eine Reihe von Effekten die Kenntnis von Abständen nötig ist. Kann der Nutzer diese verändern, etwa durch das Ziehen eines MovieClips, so verändern sich die Abstände und die Berechnung der Bewegung wird kompliziert.
Das „t“ wird losgelassen, wandert zurück zur richtigen Position und kommt nach leichtem Pendeln zum Stehen
Nehmen Sie beispielsweise ein einfaches Easing (Abbremsen). Im Tweening ist das leicht einzustellen. In der Programmierung im Prinzip auch, man muss nur die Schrittgröße von einem Animationsschritt zum nächsten immer weiter verringern. Werden hierfür feste Werte benutzt, dann wird eine Animation mit großer Bewegungsweite sehr langsam ablaufen oder eine mit geringem Abstand viel zu schnell. Die Berechnung der Schrittgröße hängt also direkt mit dem zusammen, was der User auf dem Bildschirm tut.
Import einzelnen und mehrerer Klassen
Für die meisten Standardeffekte bringt Flash CS 3 Animationsklassen mit. So gibt es Tweening-Klassen 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. Klar sollte dabei sein, dass der Film nur für den Flash-Player 7 und höher funktioniert, denn erst der unterstützt ActionScript 2.
Entwerfen Sie eine Szene, die einen Elastik-Effekt plausibel erscheinen würde. So könnte man einen Ball an einem Gummiband an die Decke hängen oder einen Kaugummi unter eine Tischplatte. Im Beispiel finden Sie einen kleinen optischen Gag: Wir extrahieren den Buchstaben „t“ aus einem Text und lassen ihn zurück in den Text animieren.
Egal wie, wandeln Sie das Objekt der Begierde in ein 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.
Die ActionScript-Klassen liegen im Installationsordner „classes/fl/transitions“
Zunächst werden die Tween-Klassen importiert. Achten Sie auf den Platzhalter „*“ im zweiten Befehl. Der lädt alle sechs Klassen der Kategorie „easing“ in einem Rutsch. Unten auf der Seite werden Sie sehen, welche es gibt.
import mx.transitions.Tween;
import mx.transitions.easing.*;
Übrigens geschieht das Importieren der Klassen in dem Moment, wenn Sie Veröffentlichen oder „STRG + Enter“ 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.
buchstabe_mc.onPress = drag;
function drag(){
this.startDrag();
buchstabe_mc._xscale = 200;
buchstabe_mc._yscale = 200;
buchstabe_mc.onRelease = bewegung;
buchstabe_mc.onReleaseOutside = bewegung;
}
Wie Sie sehen, werden in der Funktion „drag“ auch die beiden Listener fürs 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, die greift, wenn der Nutzer sehr schnell mit der Maus hin und her zieht.
In der dann ausgelösten Funktion bewegung wird zunächst jegliche Interaktion verboten. Hierzu werden einfach die Listener von eben gelöscht.
function bewegung(){
delete buchstabe_mc.onPress;
delete buchstabe_mc.onRelease;
delete buchstabe_mc.onReleaseOutside;
Dann wird der Drag-Vorgang gestoppt.
buchstabe_mc.stopDrag();
Und jetzt kommen wir zum Kern des ganzen Spiels. Wir erzeugen vier Tween-Programmierungen. Zwei beziehen sich auf die Position und zwei auf die Skalierung des Buchstaben. 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, steht er auf „true“ wird in Sekunden gemessen.
var bewegung = new mx.transitions.Tween(buchstabe_mc, "_x", mx.transitions.easing.Elastic.easeOut, buchstabe_mc._x, 195, 2, true);
var bewegung2 = new mx.transitions.Tween(buchstabe_mc, "_y", mx.transitions.easing.Elastic.easeOut, buchstabe_mc._y, 26, 2, true);
var bewegung3 = new mx.transitions.Tween(buchstabe_mc, "_xscale", mx.transitions.easing.Elastic.easeOut, buchstabe_mc._xscale, 100, 2, true);
var bewegung4 = new mx.transitions.Tween(buchstabe_mc, "_yscale", mx.transitions.easing.Elastic.easeOut, buchstabe_mc._yscale, 100, 2, true);
Da alle Animationen gleich lange dauern, reicht es, wenn wir das Ende einer Bewegung abwarten, um dann die Interaktion wieder zu ermöglichen.
bewegung.onMotionStopped = function()
{
buchstabe_mc.onPress = drag;
}
}
Testen Sie den Film. Egal wo Sie das MovieClip loslassen, es strebt immer zurück zur Position 195/26 und verkleinert sich dabei auf 100 Prozent. Statt direkt an die Endposition zu springen, entsteht ein elastischer Effekt.
Die Easing-Klassen und deren Methoden
In der Flash-Hilfe finden Sie folgende sechs Klassen beschrieben: ™
| Übergang | Beschreibung |
| Back | Erweitert die Animation an einem oder an beiden Enden einmal über den Übergangsbereich hinaus, so dass ein Überlaufeffekt entsteht. |
| Bounce | Fügt an einem oder an beiden Enden einen Springeffekt hinzu, der vollständig innerhalb des Übergangs erfolgt. Die Anzahl der Sprünge ist relativ zur Dauer, das heißt, je länger die Dauer, desto mehr Sprünge. |
| Elastic | Fügt an einem oder an beiden Enden einen elastischen Effekt hinzu, der außerhalb des Übergangsbereichs auftritt. Das Maß der Elastizität wird nicht von der Dauer beeinflusst. |
| Regular | Fügt an einem oder an beiden Enden eine langsamere Bewegung hinzu. Mit dieser Klasse können Sie einen Beschleunigungseffekt und/oder einen Verlangsamungseffekt hinzufügen. |
| Strong | Fügt an einem oder an beiden Enden eine langsamere Bewegung hinzu. Dieser Effekt ähnelt der Regular-Abschwächung, fällt aber sehr viel deutlicher aus. |
| None | Fügt von Anfang bis zum Ende eine gleichmäßige Bewegung ohne Effekte oder Geschwindigkeitsänderungen ein. Dieser Übergang wird auch als linearer Übergang bezeichnet. |
Und sie reagieren auf diese Methoden
| Methode | Beschreibung |
| easeIn | Der Abschwächungseffekt tritt am Anfang des Übergangs auf. |
| easeOut | Der Abschwächungseffekt tritt am Ende des Übergangs auf. |
| easeInOut | Der Abschwächungseffekt tritt am Anfang und am Ende des Übergangs auf. |
Material zum Artikel:
Erstveröffentlichung 04.02 .2008
