Un peu d'histoire avant de commencer

Et oui rendons à César ce qui appartient à César ...
La class Tween à été conçu par un génie :) Pourquoi un génie ? Parce qu'il a su simplifier la vie de centaines de miliers de développeurs Flash

Cette class est apparue avec Flash Mx 2004 et a été codé par M. Robert Penner. Bien rapidement elle a été rachetée par Macromedia, nouvellement Adobe.
Cette class s'accompne des transitions easing-équations de Penner (Effet elastique, bounce etc.)

Voici le site de M. Penner : www.robertpenner.com/easing/
Vous y trouverez d'autre Easing et un aperçu de son travail.

Entrons dans le vif du sujet

La class tween accompagnée de ses easing-équations permet de créer des interpolations de mouvement ou de forme en une petite ligne de code, les transitions seront alors parfaitement restituées.
Ouvrez donc un nouveau document flash AS2 de la taille que vous souhaitez.

La première étape consistera à importer les class dans notre animation.
Pour ce faire sélection l'image vide numéro 1 et importez-y les classs comme ceci :

import mx.transitions.Tween;

import mx.transitions.easing.*;

stop();

Une fois les class importées nous allons créer un movieclip que nous allons animer avec "Tween".
Créer un nouveau calque et écriver à l'aide de l'outil texte statique : CLASS TWEEN par exemple.
Placer votre texte fraichement créer en dehors de votre animation comme sur l'image ci-dessous.
Dans mon exemple le point X est à -280px.

Sélectionner maintenant votre texte et transformer le en movieClip (F8)
Donnez maintenant un nom d'occurrence à votre Clip : Ceci est très important pour la suite.

Dans notre exemple nous l'appelerons : texte_anime

Voila tout est prêt pour tweener ensemble :)
Pour déclencher la tween nous allons utiliser un bouton, mais sachez cependant qu'elle peut être déclenché par plein de méthode, un écouteur, un timer, sur une image clé défini etc.
Dans notre exemple nous utiliserons un simple bouton.

Importer un bouton sur un nouveau calque (dans notre exemple je vais utiliser un bouton de la bibliothéque commune)
Et donner lui un nom d'occurrence (ici je l'ai appelé mon_bouton)

Revenons sur notre premier calque ou nous avions importé les classs tweens et easing et entrer en dessous ce bout de code

mon_bouton.onRelease = function (){

maTween = new Tween(texte_anime, "_x", Strong.easeOut, -280, 10, 40, false);

};

Nous venons juste de créer une action sur un bouton (mon_bouton.onRelease = blablabla ...)
La tween est appelé comme ceci :

maTween = new Tween(texte_anime, "_x", Strong.easeOut, -280, 10, 40, false);

En gros on définie le : new Tween(MovieClip impacté pour la Tween, "la tween agit sur l'axe X du clip", le style de transition ease, la position de départ, la position d'arrivée, le temps d'execution en ms, Valeur booléene pour savoir si on utilise des secondes (true) ou des frames (false));

Il ne vous reste plus qu'a tester votre bouton, faites ALT+ENTRER et cliquez sur votre bouton.

Les easing-équations

Dans notre petit bout de code ci-dessus nous avons utilisé l'easing-équation "Strong" en sorti de twenn "easeOut".
Voyons ci dessous les transitions proposées, voyons également si nous voulons un effet en début de Tween, à la fin de la Tween ou au début et à la fin :)

Back : effet de rebondissement. ( un seul rebondissement )

Bounce : effet de rebondissements ( multiples rebondissements )

Elastic : effet d'élasticité.

None : aucun effet.

Regular : Mouvement régulier mais adoucit par un léger ralentissement.

Strong : Ralentissement ou accélération du mouvement .

easeIn : L'effet est effectué vers le début de l'interpolation

easeOut : L'effet est effectué vers la fin de l'interpolation

easeInOut : L'effet est effectué deux fois, au début et à la fin de l'interpolation

Nous pouvons lancer des Tween sur l'axe des X, l'axe des Y, sur l'alpha, la teinte, la longueur, la largeur, multiplier les tweens entres elle pour avoir des effets tout à fait interressant
Vous l'aurez compris les possibilités sont énormes.

Controler ses Tweens

Les controles de Tweens servent à lancer une action spécifique à un moment donné. Par exemple vous voulez qu'a la fin de votre Tween la tête de lecture aille se positionner à l'image 20.
Pour ce faire nous allons utiliser des "écouteurs".

J'utilise pour ma part deux méthodes, celle avec OnEnterFrame et celle avec la création d'un objet écouteur.

Avec OnEnterframe

Toujours à la suite de votre code entrer

onEnterFrame = function () {

  maTween.onMotionFinished = function() {

  gotoAndStop(20); 

  }

};

Vous pouvez tester votre animation

Avec un Objet ecouteur

// création de l'objet écouteur :

var listenerObject:Object = new Object ();

// application d'un évenement sur l'objet :

  listenerObject.onMotionFinished = function (Void):Void {

  gotoAndStop(20); 

  }

  // application de l'objet écouteur à la tween :

maTween.addListener(listenerObject);

Vous l'aurez compris il existe quelques gestionnaires d'évènement dont voici la liste

Liste des évenements

onMotionChanged

appelé lors de chaque changement d'une propriété de l'objet interpolé animé.

onMotionFinished

appelé lorsque l'objet Tween termine son animation.

onMotionResumed

invoqué lors de l'appel à la méthode Tween.resume(), provoquant ainsi la reprise de l'animation interpolée.

onMotionStarted

invoqué lors de l'appel à la méthode Tween.start(), provoquant ainsi le début de l'animation interpolée.

onMotionStopped

invoqué lors de l'appel à la méthode Tween.stop(), provoquant ainsi l'arrêt de l'animation interpolée.

Voici maintenant la liste des propriétés de la class Tween

Tween.yoyo();

Indique à l'animation interpolée d'effectuer la lecture à l'envers en partant de la dernière direction des incréments de propriété interpolés.

Tween.fforward():

Transmet l'animation interpolée directement à la fin de l'animation.

Tween.nextFrame();

Transmet l'animation interpolée à l'image suivante.

Tween.prevFrame();

Dirige l'animation interpolée à l'image précédant l'image actuelle.

Tween.resume();

Reprend une animation interpolée de son point d'arrêt dans l'animation.

Tween.rewind();

Rembobine une animation interpolée à son début.

Tween.start();

Démarre l'animation interpolée du début.

Tween.stop();

Arrête l'animation interpolée sur sa position actuelle.

Tween.toString();

Renvoie le nom de classe, « [Tween] ».

Quelques exemples d'effet easing - Elastic

Quelques exemples d'effet easing - Bounce