ActionScript3: Eigenschaften von Displayobjekten (Movieclips) animieren

Mithilfe der Tween-Klasse kann man eine Eigenschaft  eines Movieclips für die Animation über mehrere Bilder oder Sekunden einstellen.

Mit der Tween-Klasse kann man auch verschiedene Beschleunigungsmethoden festlegen. "Beschleunigen" bezieht sich auf die allmähliche Beschleunigung oder Verlangsamung bei der Animation, wodurch Animationen realistischer erscheinen. Im fl.transitions.easing-Paket stehen für diese Beschleunigung und Verlangsamung viele Beschleunigungsmethoden zur Verfügung, die die Animation entsprechend ändern.

Grundsätzlicher Aufbau eines Skripts für eine Animation mit einem Tween-Objekt

1. Einbindung der notwendigen fl-Pakete, die die benötigten Klassen enthalten: 
   import fl.transitions.Tween;
   import fl.transitions.easing.*;
 
2. Initialisierungblock, in dem Variable initialisiert 
   und eventuell für den Movieclip die Startwerte für bestimmte Eigenschaften gesetzt werden
 
3. Tweenobjekt erzeugen:
   var tween:Tween = new Tween(Movieclip, Eigenschaft, Funktion, Startwert, Endwert, Dauer, true/false);
 
4. Tweenanimation starten:
   tween.start();

 
Beispiel: Bewegen eines Kreises vom linken zum rechten Bühnenrand

Das nachfolgende Skript ist wieder im ersten Frame der Timeline platziert.
Beim Movieclip Kreis in der Bibliothek muss Export für ActionScript aktiviert sein.

Schritt 1: fl-Pakete importieren

import fl.transitions.Tween;
import fl.transitions.easing.*;

 
Das fl.transitions.easing-Paket enthält Klassen, die mit den fl.transition-Klassen zur Erstellung von Beschleunigungseffekten verwendet werden können. "Beschleunigung" bezieht sich auf die allmähliche Beschleunigung oder Verlangsamung bei der Animation, wodurch Animationen realistischer erscheinen. Eine gleichförmige, lineare Änderung einer Eigenschaft zählt dabei auch zu den "Beschleunigungseffekten".

Schritt 2: Initialisierungsblock
Erzeugen und platzieren einer Kreisinstanz am linken Bühnenrand:

var kreis_mc:MovieClip = new Kreis();
this.addChild(kreis_mc);
kreis_mc.x = kreis_mc.width/2;
kreis_mc.y = stage.stageHeight/2;

Schritt 3: Eine Tween-Instanz aus der Tween-Klasse erzeugen

var tween:Tween = new Tween(kreis_mc, "x", None.easeNone, kreis_mc.x, stage.stageWidth-kreis_mc.width/2, 2, true);

Der Konstruktor benötigt 7 Eingabewerte:

1. kreis_mc ist der Movieclip von dem eine  Eigenschaft animiert werden soll
2. "x" ist die zu animierende Eigenschaft als Zeichenkette geschrieben
3. None.easeNone ist die Beschleunigungsfunktion (die None-Klasse definiert Beschleunigungsfunktionen zum unbeschleunigten, linearen Ändern einer Eigenschaft)
4. kreis_mc.x ist der Anfanfgswert der Eigenschaft
5. stage.stageWidth - kreis_mc.width/2 ist der Endwert der Eigenschaft nach der Animation
6. 2 ist die Dauer der Animation in Sekunden, weil ...
7. ... der 7. Parameter auf true gesetzt ist.
   Wenn dieser Parameter auf false ist, gibt der Wert im 6. Parameter die Anzahl der Bilder in der Animation an.

Schritt 4: Tween-Animation starten

tween.start();

 
Das Skript zusammengefasst:

import fl.transitions.Tween;
import fl.transitions.easing.*;
 
var kreis_mc:MovieClip = new Kreis();
this.addChild(kreis_mc);
kreis_mc.x = kreis_mc.width/2;
kreis_mc.y = stage.stageHeight/2;
 
var tween:Tween = new Tween(kreis_mc, "x", None.easeNone, kreis_mc.x, stage.stageWidth-kreis_mc.width/2, 2, true);
tween.start();