Animieren von Objekten -- Flash CS3

Eine Animation ist der Prozess, ein Objekt zu bewegen, oder alternativ eine Änderung über die Zeit zu erzeugen. Animationsskripts sind ein grundlegender Teil von Videospielen und werden häufig dazu verwendet, Anwendungen aufzuwerten und nützliche Hinweise zur Interaktion anzuzeigen.

Das grundlegende Konzept von Animationsskripts ist, dass eine Änderung stattfinden muss und dass diese Änderung in einzelne Schritte über einen bestimmten Zeitraum aufgeteilt wird. Mit einer allgemeinen Schleifenanweisung ist es leicht, etwas in ActionScript zu wiederholen. Jedoch muss eine Schleife alle Iterationen durchlaufen, bevor die Anzeige aktualisiert wird. Zum Erstellen von Animationsskripts müssen Sie ActionScript schreiben, dass bestimmte Aktionen wiederholt ausführt und den Bildschirm nach jedem Durchlauf aktualisiert.

Angenommen, Sie möchten eine einfache Animation erstellen, z. B. den Weg eines Balls über den Bildschirm. ActionScript enthält einen einfachen Mechanismus, mit dem Sie den Zeitverlauf erfassen und den Bildschirm entsprechend aktualisieren können - anders ausgedrückt, Sie können Code schreiben, der den Ball jedes Mal um einen kleinen Betrag weiter bewegt, bis er sein Ziel erreicht. Nach jeder Bewegung wird der Bildschirm aktualisiert, wodurch die Bewegung des Balls über die Bühne für den Betrachter sichtbar wird.

Vom praktischen Standpunkt aus macht es Sinn, Animationsskripts mit der Bildrate einer SWF-Datei zu synchronisieren (das heißt, eine Animationsänderung einzuleiten, wenn ein neues Bild angezeigt wird oder angezeigt werden würde), da dies die Geschwindigkeit ist, mit der Flash Player den Bildschirm aktualisiert. Jedes Anzeigeobjekt hat ein enterFrame-Ereignis, das entsprechend der Bildrate der SWF-Datei ausgelöst wird - ein Ereignis pro Bild. Die meisten Entwickler, die Animationsskripts erstellen, sehen in dem enterFrame-Ereignis eine Möglichkeit, Aktionen zu erstellen, die sich mit der Zeit wiederholen. Sie können Code schreiben, der das enterFrame-Ereignis überwacht und den animierten Ball in jedem Bild um eine bestimmte Strecke bewegt. Wenn der Bildschirm dann aktualisiert wird (bei jedem Bild), wird der Ball an seiner neuen Position neu gezeichnet, wodurch eine Bewegung entsteht.

Im folgenden Beispielcode wird eine kreisförmige Sprite-Instanz namens circle auf der Bühne erstellt. Klickt der Benutzer auf den Kreis, beginnt eine Animationsskriptsequenz, die circle ausblendet (die Eigenschaft alpha wird verringert), bis der Kreis vollständig transparent ist:

import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

// Zeichnet einen Kreis und fügt ihn der Anzeigeliste hinzu.
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0x990000);
circle.graphics.drawCircle(50, 50, 50);
circle.graphics.endFill();
addChild(circle);

// Wenn diese Animation startet, wird diese Funktion in jedem Bild aufgerufen.
// Die durch diese Funktion hervorgerufene Änderung (Aktualisierung des Bildschirms 
// in jedem Bild) ist, was die Animation bewegt erscheinen lässt.
function fadeCircle(event:Event):void
{
    circle.alpha -= .05;
    
    if (circle.alpha <= 0)
    {
        circle.removeEventListener(Event.ENTER_FRAME, fadeCircle);
    }
}

function startAnimation(event:MouseEvent):void
{
    circle.addEventListener(Event.ENTER_FRAME, fadeCircle);
}

circle.addEventListener(MouseEvent.CLICK, startAnimation);

Wenn der Benutzer auf den Kreis klickt, wird die Funktion fadeCircle() als Listener für das enterFrame-Ereignis registriert. Dies bedeutet, sie wird in jedem Bild einmal aufgerufen. Diese Funktion blendet circle aus, indem sie die Eigenschaft alpha ändert. Der alpha-Wert des Kreises wird in jedem Bild um 0,05 verringert und der Bildschirm aktualisiert. Wenn der alpha-Wert schließlich 0 beträgt (circle ist vollständig transparent), wird die fadeCircle()-Funktion als Ereignis-Listener entfernt und die Animation beendet.

Der gleiche Code könnte auch zum Erstellen einer animierten Bewegung anstelle einer Ausblendung verwendet werden. Durch Einsetzen einer anderen Eigenschaft für alpha in der Funktion, die ein enterFrame-Ereignis-Listener ist, wird die Eigenschaft stattdessen animiert. Beispielsweise wird durch Ändern der Zeile

    circle.alpha -= .05;

die Eigenschaft x animiert, und der Kreis führt eine Bewegung über die Bühne nach rechts aus. Die Bedingung, die das Ausblenden beendet, könnte zum Beenden der Animation geändert werden (d. h., zum Beenden des Abonnements des Listeners enterFrame), wenn die gewünschte x-Koordinate erreicht ist.