Animera objekt

Flash Player 9 och senare, Adobe AIR 1.0 och senare

Animering är att tillsätta en rörelse eller att skapa en ändring med tiden. Animering via skript är en grundläggande del i videospel och används ofta för extraeffekter och interaktiva hänvisningar till andra program.

Den grundläggande idén bakom animering via skript är att en ändring behöver inträffa och att ändringen måste delas upp i inkrement under en viss tid. Det är enkelt att få en upprepning i ActionScript med hjälp av en vanlig programslinga. Men med en slinga körs alla iterationer innan visningen uppdateras. När du ska skapa skriptanimering måste du skriva ett ActionScript där något utförs upprepade gånger under en tid och skärmbilden uppdateras vid varje körning.

Tänk dig till exempel att du vill skapa en enkel animering, som att få en boll att rulla över skärmbilden. ActionScript innehåller en enkel mekanism som gör att du kan följa tidsförloppet och uppdatera skärmbilden enligt detta, vilket innebär att du kan skriva kod som flyttar bollen en liten bit i taget ända tills destinationen uppnås. Efter varje rörelse uppdateras visningen så att användaren ser föremålets rörelse på scenen.

Ur en praktisk synvinkel är det logiskt att synkronisera skriptanimeringar med SWF-filens bildrutehastighet (d.v.s. att göra en animeringsändring varje gång en ny bildruta visas) eftersom detta definierar hur ofta Flash Player eller AIR uppdaterar skärmen. Alla visningsobjekt innehåller händelsen enterFrame som skickas enligt SWF-filens bildrutehastighet – en händelse per bildruta. De flesta utvecklare som skapar skriptanimering använder händelsen enterFrame för att skapa rörelser som upprepas under tiden. Du kan skriva kod som avlyssnar händelsen enterFrame så att den animerade bollen flyttas en viss sträcka för varje bildruta, och när skärmbilden uppdateras (varje bildruta) ritas bollen om i sin nya placering och skapar en rörelse.

Obs! Ett annat sätt att utföra en åtgärd upprepade gånger under en tid är med hjälp av klassen Timer. En Timer-instans utlöser en händelseavisering varje gång som en viss tidsperiod har passerat. Du kan skriva kod som utför animering genom hantering av klassen Timers timerhändelse, där du anger ett kort tidsintervall (en del av en sekund). Mer information om hur du använder klassen Timer finns i Kontrollera tidsintervall.

I följande exempel skapas en cirkelformad Sprite-instans, circle, på scenen. När användaren klickar på cirkeln startas en skriptanimeringssekvens som får circle att tona ut (egenskapen alpha stegas ner) tills den är helt genomskinlig:

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

När användaren klickar på cirkeln används funktionen fadeCircle() som avlyssnare för händelsen enterFrame, vilket innebär att den anropas vid varje bildruta. Funktionen tonar ut circle genom att egenskapen alpha ändras, så att cirkelns alpha minskas med 0,05 (5 procent) för varje bildruta och skärmbilden uppdateras. Efter en stund när värdet alpha har blivit 0 (circle är helt genomskinlig) tas funktionen fadeCircle() bort som händelseavlyssnare och animeringen avslutas.

Samma kod kan användas för att exempelvis skapa animerad rörelse i stället för uttoning. Genom att ersätta en annan egenskap med alpha i funktionen som är händelseavlyssnaren enterFrame kommer i stället denna egenskap att animeras. Genom att till exempel ändra raden

    circle.alpha -= .05;

till denna kod

    circle.x += 5;

animeras egenskapen x, vilket gör att cirkeln flyttas till höger över scenen. Villkoret som avslutar animeringen kan ändras så att animeringen avslutas (d.v.s. avlyssnaren enterFrame avbryts) när önskad x-koordinat uppnås.