Animazione di oggetti

Si definisce animazione il processo di mettere qualcosa in movimento, oppure di modificare qualcosa in un determinato arco di tempo. L'animazione con script è una parte fondamentale dei videogiochi e viene spesso utilizzata per aggiungere un tocco di ricercatezza e utili indicazioni di interazione ad altre applicazioni.

L'idea fondamentale alla base dell'animazione con script è il verificarsi di un cambiamento suddiviso in incrementi lungo un intervallo temporale. In ActionScript, rendere un processo ripetitivo è facile, grazie a una comune istruzione ciclica. Tuttavia, un ciclo deve eseguire tutte le sue iterazioni prima di aggiornare lo schermo. Per creare un'animazione mediante script, è necessario scrivere un codice ActionScript che consenta di eseguire alcune azioni in modo ripetuto nel tempo, così come di aggiornare lo schermo ogni volta che tale script viene eseguito.

Si potrebbe, ad esempio, creare una semplice animazione, quale una palla che attraversa lo schermo. ActionScript include un semplice meccanismo che consente di tenere traccia del passaggio del tempo e di aggiornare lo schermo di conseguenza; vale a dire, potete scrivere un codice in grado di fare percorrere alla palla una piccola porzione di spazio durante ogni porzione di tempo, fino a portarla a destinazione. Dopo ogni singolo movimento, lo schermo viene aggiornato, rendendo visibile un movimento che attraversa lo stage.

Dal punto di vista pratico, è opportuno sincronizzare l'animazione mediante script con la frequenza dei fotogrammi del file SWF, ovvero effettuare una variazione dell'animazione ogni volta che viene o verrebbe visualizzato un nuovo fotogramma, in quanto la frequenza dei fotogrammi corrisponde alla frequenza di aggiornamento dello schermo da parte di Flash Player. Ogni oggetto di visualizzazione presenta un evento enterFrame che viene inviato in base alla velocità fotogrammi del file SWF, a un evento per fotogramma. La maggior parte degli sviluppatori che creano animazioni mediante script impiegano l'evento enterFrame come strumento per creare azioni che si ripetono nel tempo. È possibile scrivere un codice listener per l'evento enterFrame che consenta di spostare la palla animata di una determinata porzione di spazio per ogni fotogramma, affinché, con l'aggiornamento dello schermo (a ogni fotogramma) la palla venga ridisegnata nella nuova posizione, creando un effetto di movimento.

Nell'esempio seguente, viene creata sullo stage un'istanza di Sprite a forma di cerchio denominata circle . Quando l'utente fa clic sul cerchio, viene avviata una sequenza animata mediante script che provoca la dissolvenza di circle (la sua proprietà alpha viene diminuita) fino a renderlo completamente trasparente:

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

Quando l'utente fa clic sul cerchio, la funzione fadeCircle() viene registrata come listener dell'evento enterFrame e inizia a essere chiamata a ogni passaggio di fotogramma. Tale funzione provoca una dissolvenza di circle modificando la sua proprietà alpha ; a ogni fotogramma, la proprietà alpha di circle viene diminuita di 0,05 (5 percento) e lo schermo viene aggiornato di conseguenza. Alla fine, quando il valore di alpha raggiunge 0 (e circle è completamente trasparente), la funzione fadeCircle() viene rimossa come listener dell'evento e l'animazione termina.

Lo stesso codice può essere utilizzato, ad esempio, per creare una vera e propria animazione, anziché una dissolvenza. Sostituendo la proprietà alpha con una proprietà differente nella funzione che viene registrata come listener dell'evento enterFrame , tale proprietà risulta animata. Se, ad esempio, si modifica la riga

    circle.alpha -= .05;

nel seguente codice

    circle.x += 5;

la proprietà x risulta animata e il cerchio viene spostato verso destra attraverso lo stage. La condizione che termina l'animazione (vale a dire, l'annullamento della registrazione come listener di enterFrame ) può essere modificata quando viene raggiunta la coordinata x desiderata.

I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.