Animatie is een proces waardoor een object beweegt of in de loop van de tijd verandert. Gescripte animatie is een fundamenteel deel van videogames en wordt vaak gebruikt om Pools en bruikbare interactietips aan andere toepassingen toe te voegen.
De gedachte achter gescripte animaties is dat er een verandering moet plaatsvinden en dat die verandering moet worden verdeeld in toenames die worden uitgevoerd na een bepaalde tijd. U kunt in ActionScript met een algemene lusinstructie eenvoudig iets herhalen. Een lus doorloopt echter alle herhalingen voordat het scherm wordt bijgewerkt. Als u gescripte animatie wilt maken, moet u ActionScript schrijven die een actie herhaaldelijk uitvoert en ook het scherm bijwerkt wanneer de actie wordt uitgevoerd.
Stel dat u een eenvoudige animatie wilt maken, zoals een bal die over het scherm rolt. ActionScript bevat een simpele methode waarmee u het verloop van de tijd kunt volgen en het scherm overeenkomstig kunt bijwerken: u kunt dus code schrijven waardoor de bal telkens een klein stukje beweegt totdat de bestemming is bereikt. Na elke beweging wordt het scherm bijgewerkt, zodat de beweging over het werkgebied voor de gebruiker zichtbaar is.
Vanuit een praktisch standpunt is het nuttig om gescripte animatie en de framesnelheid van het SWF-bestand te synchroniseren (met andere woorden één animatieverandering uitvoeren wanneer een nieuw frame wordt weergegeven), omdat dit bepaalt hoe vaak Flash Player of AIR het scherm bijwerkt. Elk weergaveobject heeft een gebeurtenis
enterFrame
die op basis van de framesnelheid van het SWF-bestand wordt verzonden (één gebeurtenis per frame). De meeste ontwikkelaars die met gescripte animaties werken, gebruiken de gebeurtenis
enterFrame
om acties te maken die zich na verloop van tijd herhalen. U kunt code schrijven die naar de gebeurtenis
enterFrame
luistert, zodat de geanimeerde bal bij elk frame met een bepaalde afstand wordt verplaatst. Omdat het scherm wordt bijgewerkt (elk frame), wordt de bal op de nieuwe positie opnieuw getekend, waardoor er beweging ontstaat.
Opmerking:
Een andere methode waarmee u een actie in de loop van de tijd herhaaldelijk kunt uitvoeren is met gebruik van de klasse Timer. Een instantie Timer activeert een gebeurtenismelding op het moment dat een bepaalde hoeveelheid tijd is verstreken. U kunt code schrijven die animatie uitvoert door de timergebeurtenis van de klasse Timer te verwerken en de tijdsinterval op een kleine hoeveelheid in te stellen (een fractie van een seconde). Zie
Tijdintervallen bepalen
voor meer informatie over het gebruik van de klasse Timer.
In het volgende voorbeeld wordt er een cirkelinstantie Sprite met de naam
circle
in het werkgebied gemaakt. Wanneer de gebruiker op de cirkel klikt, wordt een gescripte animatie gestart, waardoor de
circle
gaat faden (zijn eigenschap
alpha
wordt verminderd) totdat hij volledig transparant is:
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);
Wanneer de gebruiker op de cirkel klikt, wordt de functie
fadeCircle()
als een listener op de gebeurtenis
enterFrame
geabonneerd, waardoor de functie vanaf nu één keer per frame wordt aangeroepen. Met deze functie wordt de
circle
gefadet doordat de eigenschap
alpha
wordt gewijzigd. Eenmaal per frame wordt de
alpha
van de cirkel met 0,05 (5 procent) verminderd, waarna het scherm wordt bijgewerkt. Wanneer de waarde van
alpha
is afgenomen tot 0 (de
circle
is volledig transparant), wordt de functie
fadeCircle()
verwijderd als een gebeurtenislistener, waardoor de animatie stopt.
U kunt dezelfde code gebruiken om bijvoorbeeld een animatiebeweging te maken in plaats van faden. Als u
alpha
in de gebeurtenislistenerfunctie
enterFrame
vervangt door een andere eigenschap, wordt die eigenschap geanimeerd. Als u bijvoorbeeld deze regel wijzigt
circle.alpha -= .05;
naar deze code,
circle.x += 5;
wordt de eigenschap
x
geanimeerd en wordt de cirkel naar rechts over het werkgebied bewogen. De voorwaarde waardoor de beweging stopt, kan worden gewijzigd om de beweging te laten stoppen (door het abonnement van de listener
enterFrame
op te zeggen) wanneer de gewenste x-coördinaat wordt bereikt.
