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().

[ftf w="650" h="250"]// .::. animations avec Tweener .::.
import caurina.transitions.*;

function bouger():void {
Tweener.addTween(ballon, { x:Math.random()*stage.stageWidth,
y:Math.random()*stage.stageHeight,
rotation:Math.random()*600,
time:1,
onComplete:bouger
});
}
bouger();
[/ftf]
[bix i="http://media.benoit-deldicque.com/blog/images/flash.gif";t="Fichier source : tweener.zip"]
Liens: Code Tweener, Documentation Tweener (anglais).