ActionScript3: Eigenschaften von Displayobjekten (Movieclips) animieren

In diesem Kapitel wird die Animation unter Verwendung eines Eventhandlers für das ENTER_FRAME-Ereignis erstellt.
Immer wenn der Abspielkopf ein neues Frame betritt, wird das Ereignis ENTER_FRAME ausgelöst.
Bei einer Bildrate von z.B. 15 Bildern in der Sekunde tritt dieses Ereignis 15-mal in der Sekunde auf.
Das passiert, auch wenn es nur im ersten Frame der Timeline Schlüsselbilder gibt oder der Abspielkopf in einem Frame gestoppt wurde.

Siehe auch ActionScript3: Ereigniskonzept und Eventhandler - eine kurze Einführung

Grundsätzlicher Aufbau eines Skripts für eine ENTER_FRAME-Animation

1. Initialisierungblock, in dem Variable initialisiert 
   und eventuell für Movieclips die Startwerte für bestimmte Eigenschaften gesetzt werden
 
2. Zuordnung des Eventlisteners:
   eventTarget.addEventListener(Event.ENTER_FRAME, enterFrameListener);
 
3. Defintion des Eventlisteners, der auch das Entfernen des Eventlisteners enthält:
   function enterFrameListener(e:Event):void {
       relative Veränderung von MovieClip-Eigenschaften (das ist der zentrale Punkt für die Animation)
       if (Abbruchkriterium für die Animation ist erfüllt) {
           abschließende Aktionen
           eventTarget.removeEventListener(Event.ENTER_FRAME, enterFrameListener);
       }
   }

Im nachfolgenden Beispiel gibt es nur ein Skript im ersten Frame der Maintimeline.

Beim Movieclip Kreis in der Bibliothek muss Export für ActionScript aktiviert sein.

Schritt 1: Initialisierungsblock

Erzeugen einer Kreisinstanz und platzieren 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;

Die Schrittweite in einer Variablen abspeichern:

var speed:Number = 10;

Schritt 2: Zuordnung des Eventlisteners

Die Kreisinstanz "abonniert" das Ereignis ENTER_FRAME. Der Instanz kreis_mc wird der Eventlistener (Eventhandler) bewegeKreis zugeordnet, der auf das Ereignis ENTER_FRAME "horcht". D.h. immer wenn das Ereignis ENTER_FRAME eintritt, wird der Eventlistener  bewegeKreis aufgerufen.

kreis_mc.addEventListener(Event.ENTER_FRAME, bewegeKreis);

Variante: Das Mainmovie (die Maintimeline) erhält den Eventlistener. Über this wird in diesem Fall die Maintimeline angesprochen.

this.addEventListener(Event.ENTER_FRAME, bewegeKreis);

Schritt 3: Definition des Eventlisteners (Eventhandlers)

Ein Eventhandler ist eine Funktion, die als Input das auslösende Event erhält. Eventhandler haben keinen Output.

function bewegeKreis(e:Event):void {
	e.target.x += speed;
	if (e.target.x + e.target.width/2 > stage.stageWidth) {
		e.target.x = stage.stageWidth - e.target.width/2;
		e.target.removeEventListener(Event.ENTER_FRAME, bewegeKreis);
	}
}

Über die Eigenschaft target des Events e (d.h. e.target) kann die Instanz angesprochen werden, die das Ereignis abonniert hat. In diesem Fall ist damit die Instanz kreis_mc gemeint, deren x-Koordinate um den Wert von speed erhöht wird.

Wenn der Kreis den rechten Rand erreicht hat, muss er nicht mehr auf das Ereignis ENTER_FRAME horchen und daher wird in diesem Fall der Eventlistener mit e.target.removeEventListener(Event.ENTER_FRAME, bewegeKreis) entfernt. D.h. "das Abonnement des Ereignisses wird storniert".

Variante: Dem Mainmovie (die Maintimeline) wurde der Eventlistener zugeordnet.
In diesem Fall ist mit e.target die Maintimeline gemeint und daher muss man die Instanz kreis_mc explizit in den Eventhandler hineinschreiben.
Der Eventlistener wird in dieser Variante mit this.removeEventListener(Event.ENTER_FRAME, bewegeKreis) von der Maintimeline entfernt.

function bewegeKreis(e:Event):void {
	kreis_mc.x += speed;
	if (kreis_mc.x + kreis_mc.width/2 > stage.stageWidth) {
		kreis_mc.x = stage.stageWidth - kreis_mc.width/2;
		this.removeEventListener(Event.ENTER_FRAME, bewegeKreis);
	}
}

Das Skript zusammengefasst:
 

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

var speed:Number = 10;

kreis_mc.addEventListener(Event.ENTER_FRAME, bewegeKreis);
function bewegeKreis(e:Event):void {
	e.target.x += speed;
	if (e.target.x + e.target.width/2 > stage.stageWidth) {
		e.target.x = stage.stageWidth - e.target.width/2;
		e.target.removeEventListener(Event.ENTER_FRAME, bewegeKreis);
	}
}

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

var speed:Number = 10;

this.addEventListener(Event.ENTER_FRAME, bewegeKreis);
function bewegeKreis(e:Event):void {
	kreis_mc.x += speed;
	if (kreis_mc.x + kreis_mc.width/2 > stage.stageWidth) {
		kreis_mc.x = stage.stageWidth - kreis_mc.width/2;
		this.removeEventListener(Event.ENTER_FRAME, bewegeKreis);
	}
}