Animation des objets

L’animation consiste à faire bouger un élément ou à le faire progressivement évoluer. 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 interactions à d’autres applications.

Une animation par script est régie par un principe de base : il doit se produire une évolution et cette dernière doit être divisée en incréments, au fil du temps. Il est facile de répéter une opération en ActionScript, à l’aide d’une simple boucle. Toutefois, une boucle exécute toutes ses itérations avant de mettre à jour l’affichage. Pour créer une animation par script, vous devez écrire un code ActionScript qui exécute plusieurs fois une action au fil du temps et met également à jour l’écran à chaque exécution.

Supposons par exemple que vous souhaitez créer une animation simple, telle qu’une balle qui traverse l’écran. ActionScript comprend un mécanisme simple qui permet de suivre le passage du temps et de mettre à jour l’écran en conséquence. En d’autres termes, vous pourriez écrire un code qui déplace la balle d’un petit incrément à chaque fois jusqu’à ce qu’elle atteigne sa destination. Après chaque déplacement, l’écran serait mis à jour, afin que l’utilisateur puisse visualiser le mouvement à l’écran.

D’un point de vue pratique, il est logique de synchroniser l’animation par script avec la cadence du fichier SWF (en d’autres termes, de modifier une animation à chaque fois qu’une nouvelle image s’affiche ou devrait s’afficher), puisque cela permet de définir la fréquence des mises à jour de l’écran par Flash Player ou AIR. 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 une animation par script utilisent l’événement enterFrame pour générer des actions répétées au fil du temps. Vous pourriez écrire du code qui écoute l’événement enterFrame , déplace la balle animée d’un incrément déterminé à chaque image et, lorsque l’écran est mis à jour (à chaque image), la balle est redessinée à sa nouvelle position, créant ainsi un mouvement.

Dans l’exemple suivant, une occurrence circulaire de Sprite, appelée circle , est créée sur la scène. Lorsque l’utilisateur clique sur le cercle, une séquence animée par script débute et entraîne un fondu de circle (sa propriété alpha diminue) jusqu’à ce qu’il soit complètement transparent :

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

Lorsque l’utilisateur clique sur le cercle, la fonction fadeCircle() est enregistrée en tant qu’écouteur de l’événement enterFrame . En d’autres termes, elle commence à être appelée une fois par 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 (soit 5 %) et l’écran est actualisé. Au fil du temps, lorsque la valeur alpha correspond à 0 (auquel cas circle est complètement transparent), la fonction fadeCircle() est supprimée des écouteurs d’événement et l’animation s’arrête.

Le même code permet, par exemple, de créer un mouvement animé au lieu d’un fondu. En substituant une autre propriété à alpha dans la fonction qui écoute l’événement enterFrame , cette propriété est animée. Par exemple, remplacer la ligne

    circle.alpha -= .05;

par la ligne

    circle.x += 5;

anime la propriété x . Le cercle se déplace alors vers la droite de la scène. La condition qui arrête l’animation peut être modifiée de sorte à arrêter l’animation (en d’autres termes, annuler l’enregistrement de l’écouteur enterFrame ) lorsque la coordonnée x appropriée est atteinte.

Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.