Animieren von Objekten

Eine Animation ist der Prozess, ein Objekt zu bewegen, oder alternativ, eine Änderung über die Zeit zu erzeugen. Animationsskripten 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 Animationsskripten ist, dass eine Änderung stattfinden muss, und diese Änderung muss in einzelne Schritte über die Zeit eingeteilt werden. 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, das 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 (d. h. eine Animationsänderung einzuleiten, wenn ein neues Bild angezeigt wird oder angezeigt werden würde), da dies festlegt, wie häufig Flash Player oder AIR 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; 
 
// draw a circle and add it to the display list 
var circle:Sprite = new Sprite(); 
circle.graphics.beginFill(0x990000); 
circle.graphics.drawCircle(50, 50, 50); 
circle.graphics.endFill(); 
addChild(circle); 
 
// When this animation starts, this function is called every frame. 
// The change made by this function (updated to the screen every 
// frame) is what causes the animation to occur. 
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);

Klickt der Benutzer auf den Kreis, wird die Funktion fadeCircle() als Listener des Ereignisses enterFrame abonniert. 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 (5 Prozent) 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 wird 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;

zu

    circle.x += 5;

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.

Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.