Blog

Vous avez toujours rêvé de pouvoir faire de jolies animations, de pouvoir déplacer vos clips dans votre animation Flash sans passer par la TimeLine ?
Voici un petit post qui vous aidera et qui, je pense, vous simplifiera la vie si vous connaissez "les tween" dans Flash. Cet article vous présente la classe Tweener utilisée pour créer des animations avec des tween et autres transitions.

Première étape: vous devez récupérer les fichiers de la classe Tweener pour ActionScript 3.0.
Ces fichiers sont téléchargeables sur le site de l'éditeur.
Récupérez la dernière version tweener_x_x_x_as3.zip sur http://code.google.com/p/tweener/.

Seconde étape: créer votre projet Flash.
Commencez par créer un nouveau fichier Flash ActionScript 3.0 et enregistrez-le dans votre machine.
Dans le dossier où se situe votre fichier .fla, copiez tout le dossier caurina avec le dossier lui-même.

Vous êtes alors prêt à utiliser Tweener !

Animation, étape 1: créer un clip.
Pour commencer, créez ou importez un objet sur votre scène et convertissez-le en symbole de type Clip. Donnez-lui un nom à votre guise et n'oubliez pas de spécifier l'alignement en cochant le petit carré du milieu. Validez.
Ensuite, vous devez donner un nom d'occurrence à votre clip. Sélectionnez votre clip et dans la fenêtre Propriétés, tapez un nom d'occurrence.
Pour cet exercice, nous utiliserons le nom d'occurrence ballon.

Animation, étape 2: le code ActionScript.
Nous allons maintenant passer à la partie "code".
Pour commencer, vous devez indiquer au compilateur que vous utilisez la classe Tweener.
import caurina.transitions.*;

Ensuite, nous allons écrire la ligne de code permettant d'animer notre clip. La construction de cette instruction est la suivante :
Tweener.addTween(objet à animer, {propriétés à animer, paramètres d'animation});

Remplacez "objet à animer" par le nom d'occurrence de votre clip, ici ballon.
Tweener.addTween(ballon, {propriétés à animer, paramètres d'animation});

Les "propriétés à animer" sont essentiellement les propriétés de votre objet comme x, y, width, height, scaleX, scaleY, alpha,...
Les valeurs spécifiées sont les valeurs à atteindre. La syntaxe pour les "propriétés à animer" est la suivante :
Tweener.addTween(ballon, {x:200, y:200, paramètres d'animation});

Les "paramètres d'animation" sont multiples. Voici une liste des principaux paramètres :

• time: durée de l'animation en secondes.
• delay: temps après lequel l'animation s'exécute.
• transition: type de transition à appliquer.
• onStart: instructions ou fonction exécutée au lancement de l'animation.
• onUpdate: instructions ou fonction exécutée à chaque changement d'une des "propriétés à animer".
• onComplete: instructions ou fonction exécutée à la fin de l'animation.
• rounded: arrondi les valeurs des "propriétés à animer" afin d'optimiser le calcul.

Cela pourrait donner :
Tweener.addTween(ballon, {x:200, y:200, time:3, delay:2, onComplete:function() {trace("Terminé")}; });
Animation débutant 2 secondes après son appel et d'une durée de 3 secondes. Une fois terminée, l'animation écrit "Terminé".

Voici un exemple de code qui anime notre ballon avec une animation de 1 seconde. Les propriétés à animer sont sa position en x et y ainsi que sa rotation. Ces valeurs sont générées aléatoirement avec Math.random(). L'appel à notre animation Tween est fait dans la fonction bouger qui est appelée à la fin de chaque animation, donc en boucle. Pour lancer l'animation, nous devons appeler une première fois la méthode bouger().