Animowanie obiektów

Animacja to proces, w którym obiekt zostaje przesunięty lub — innymi słowy — proces zmiany obiektu w czasie. Animacje skryptowe to podstawowa część gier wideo, która jest często wykorzystywana w celu udoskonalania i dodawania użytecznych operacji do innych aplikacji.

Fundamentem animacji skryptowych jest to, że do zmiany musi dojść, a zmiana musi zostać podzielona na fragmenty w czasie. W języku ActionScript powtarzanie określonych operacji jest łatwe, ponieważ możliwe jest wykorzystanie często stosowanej instrukcji pętli. Jednak przed aktualizacją wyświetlania nastąpi przejście wszystkich iteracji pętli. W celu utworzenia animacji skryptowej należy napisać kod ActionScript, który będzie powtarzał niektóre operacje w czasie, a każde jego uruchomienie będzie powodowało aktualizację zawartości ekranu.

Przykład: wyobraźmy sobie utworzenie prostej animacji, takiej jak toczenie się kulki na ekranie. Język ActionScript udostępnia prosty mechanizm, który umożliwia śledzenie przejścia kulki w czasie i odpowiednie aktualizowanie ekranu — to oznacza, że możliwe jest napisanie kodu, który będzie przesuwał kulkę o niewielką odległość za każdym razem, aż osiągnie ona miejsce docelowe. Po każdym ruchu powinno dojść do zaktualizowania ekranu, co spowoduje, że będzie prezentowany ruch przez cały stół montażowy.

Z praktycznego punktu widzenia sensowne jest synchronizowanie animacji skryptowych z liczbą klatek na sekundę w pliku SWF (tj. jedna zmiana animacji po każdym wyświetleniu nowej klatki lub przed jej wyświetleniem), ponieważ jest to częstotliwość, z jaką program Flash Player lub środowisko AIR aktualizuje ekran. Każdy obiekt wyświetlany zawiera zdarzenie enterFrame , które jest wywoływane zgodnie z liczbą klatek na sekundę pliku SWF — jedno zdarzenie na jedną klatkę. Większość programistów, którzy tworzą animacje skryptowe, korzysta ze zdarzenia enterFrame jako sposobu na powtarzanie określonych operacji w czasie. Możliwe jest napisanie kodu, który będzie wykrywał zdarzenie enterFrame i przesuwał animowaną kulkę o pewną odległość w każdej klatce, i w miarę odświeżania ekranu (w każdej klatce) kulka będzie ponownie rysowana w nowym położeniu, co będzie powodowało wrażenie ruchu.

W poniższym przykładzie utworzono na stole montażowym instancję Sprite o nazwie circle . Gdy użytkownik kliknie okrąg, następuje rozpoczęcie sekwencji animacji skryptowej, co powoduje, że obiekt circle zanika (następuje zmniejszenie jego właściwości alpha ) aż staje się całkowicie przezroczysty:

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);

Gdy użytkownik kliknie okrąg, następuje subskrypcja funkcji fadeCircle() w roli detektora zdarzenia enterFrame , co oznacza, że jest wywoływana raz dla każdej klatki. Ta funkcja powoduje zanikanie obiektu circle poprzez zmianę jego właściwości alpha — raz na klatkę właściwość alpha okręgu jest zmniejszana o .05 (5 procent), a ekran jest aktualizowany. Ostatecznie, gdy wartość alpha wynosi 0 (obiekt circle jest całkowicie przezroczysty), funkcja fadeCircle() przestaje być detektorem zdarzenia, co kończy animację.

Ten sam kod może zostać wykorzystany na przykład w celu utworzenia animowanego ruchu zamiast zanikania. Wprowadzenie innej właściwości zamiast właściwości alpha do funkcji, która jest detektorem zdarzenia enterFrame , powoduje animowanie tej właściwości. Na przykład: zmiana tej linii

    circle.alpha -= .05;

na taki kod

    circle.x += 5;

powoduje animowanie właściwości x , co sprawia, że okrąg przesuwa się w prawo na stole montażowym. Jako warunek zakończenia animacji (tj. anulowania roli detektora dla funkcji enterFrame ) można ustawić osiągnięcie wybranej współrzędnej x.

Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.