Animation en Actionscript : Tween

Grâce aux classes Tween, on peut très facilement créer des animations dynamiquement en Flash avec Actionscript. Bien que l'utilisation de TweenLite ou TweenMax simplifie l'utilisation de la classe Tween, nous abordons en premier lieu l'utilisation de la classe Tween native.

Utilisation de Tween

Tween est la classe native fournie par Adobe pour créer des animations en Actionscript, son utilisation reste relativement simple; exemple, faisons bouger un clip (MovieClip) : la source de l'exemple sera à télécharger librement.

L'exemple montre une cible et une flèche, le but du jeu étant de déplacer dynamiquement la flèche vers le centre de la cible, au moment ou l'on clique sur un bouton monBouton.

Déplacez la cible ou vous le souhaitez, puis cliquez sur le bouton pour que la flèche se plante au centre :

Création de l'animation en Actionscript

Il suffit pour cela d'instancier un objet Tween, la flèche qui est un MovieClip, se déplace en hauteur et en largeur, nous allons donc pour la déplacer modifier ses attributs x et y pour qu'elle vienne se positionner au centre de la cible.

Importez tout l'abord la classe Tween :

import fl.transitions.Tween;

Puis lancez l'animation :

//new Tween(objet,attribut,methode de déplacement,état de départ, état d'arrivée, durée, utiliser les secondes comme unité);
var t:Tween = new Tween(this.fleche, "x", null, this.fleche.x, this.cible.x, 0.5, true);
var t2:Tween = new Tween(this.fleche, "y", null, this.fleche.y, this.cible.y, 0.5, true);

Pour plus de détail sur la classe Tween, reportez vous à la documentation officiel d'Adobe : Tween.

Ajout d'un callback à la fin de l'animation Tween

Il n'est pas rare de vouloir lancer une action à la fin d'une animation, dans l'exemple, vous constatez qu'une fois que la flèche a atteint (brillament) le centre de la cible, un message s'affiche pour vous féliciter. Nous allons donc nous servir des TweenEvent pour lancer cette action lorsque la flèche aura atteint son but :

t.addEventListener(TweenEvent.MOTION_FINISH, this.touche, false, 0, true);

La méthode touche() se chargera de féliciter l'utilisateur :

public function touche(evt:Event):void
{
    this.prompt.text = "Dans le mille ! félicitations ! ";
}

Attention la classe TweenEvent n'est pas situé dans le package flash.events.*, l'import à effectuer est le suivant :

import fl.transitions.TweenEvent;

Téléchargez la source FLA

Cette exemple contient :

• La source FLA de l'animation Flash
• La classe .as
• le fichier SWF compilé

Conclusion

Il est très simple de créer des petites interpolations linéaires en Flash en utilisant la classe Tween native. Il existe néanmoins des librairies qui permettent d'étendre un peu le modèle et de le simplifier ; pour suivre une courbe de Bezier, ou manipuler plusieurs attibuts directement : il s'agit de TweenLite et TweenMax, dont nous aborderons l'utilisation dans un prochain article.

Articles connexes

• Créer une classe en Actionscript 3
• Intégration d'animations flash : SwfObjet, Embed, Object