Animation des objets -- Flash CS3

L'animation est le processus de déplacer un ou plusieurs objets, ou de les modifier dans le temps. Les animations par script représentent un élément fondamental des jeux vidéo, et elles sont aussi fréquemment utilisées pour obtenir un résultat plus séduisant et ajouter des interaction à d'autres applications.

L'idée de base de l'animation par script est le changement, et celui-ci doit être divisé en étapes exécutées successivement. Il est facile de répéter une opération en ActionScript, à l'aide d'une simple boucle. Toutefois, toutes les itérations d'une boucle sont exécutées avant l'actualisation de l'affichage. Pour créer une animation par programmation, il est donc nécessaire de rédiger du code ActionScript qui exécute une action à répétition et actualise l'écran après chacune de ces exécutions.

Par exemple, imaginons que vous souhaitez créer une animation simple : faire traverser l'écran par un ballon. ActionScript comporte un mécanisme simple qui permet de décompter le temps écoulé et d'actualiser l'écran en conséquence, ce qui permet de rédiger du code pour déplacer le ballon d'une faible distance à la fois, jusqu'à ce qu'il atteigne sa destination. L'écran est actualisé après chaque mouvement, si bien que le déplacement est visible par l'utilisateur.

D'un point de vue pratique, il est logique de synchroniser l'animation par programmation avec la fréquence de défilement du fichier SWF (autrement dit, de programmer un changement de l'animation à chaque fois qu'une nouvelle image doit être affichée), puisque c'est ce défilement qui provoque le rafraîchissement d'écran par Flash Player. Chaque objet d'affichage possède un événement enterFrame qui est diffusé en fonction de la cadence d'affichage du fichier SWF (un événement par image). La plupart des développeurs qui créent des animations par programmation utilisent l'événement enterFrame pour créer des actions répétitives. Il est possible d'écrire du code pour écouter l'événement enterFrame et déplacer le ballon animé d'une certaine valeur à chaque nouvelle image, si bien qu'à chaque rafraîchissement d'écran (à chaque image) le ballon sera redessiné à son nouvel emplacement, créant ainsi l'illusion du mouvement.

Dans l'exemple suivant, une instance de Sprite, nommée circle, est créée sur la scène. Lorsque l'utilisateur clique dans le cercle, une séquence d'animation créée par code débute, réduisant l'opacité de circle (sa propriété alpha) jusqu'à ce qu'il soit complètement transparent :

import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

// tracer un cercle et l'ajouter à la liste d'affichage.
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0x990000);
circle.graphics.drawCircle(50, 50, 50);
circle.graphics.endFill();
addChild(circle);

// lorsque cette animation débute, cette fonction est appelée à chaque image.
// le changement effectué par cette fonction (actualisé à chaque
// image) est ce qui provoque l'effet d'animation. 
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);

Lorsque l'utilisateur clique dans le cercle, la fonction fadeCircle() est enregistrée comme écouteur de l'événement enterFrame, et elle est donc appelée une fois à chaque nouvelle image. Cette fonction provoque un fondu de l'objet circle en changeant sa propriété alpha, si bien qu'à chaque nouvelle image la valeur de la propriété alpha du cercle décroît de 0,05 (5 %) et l'écran est actualisé. En fin d'opération, lorsque la valeur de alpha est de 0 (circle est alors complètement transparent), la fonction fadeCircle() est retirée de la liste des écouteurs d'événements, ce qui met fin à l'animation.

Le même code pourrait être utilisé pour créer un mouvement au lieu d'un effet de fondu. Il suffit de remplacer la propriété alpha par une autre dans la fonction qui écoute les événements enterFrame, et cette propriété sera alors animée. Par exemple, en remplaçant la ligne

    circle.alpha -= .05;

c'est la propriété x qui sera animée, provoquant un déplacement du cercle vers la droite sur la scène. La condition qui met fin à l'animation peut être activée à cet effet (en annulant l'enregistrement comme écouteur de enterFrame) lorsque la coordonnée x voulue est atteinte.