Pour utiliser la classe Tween, la version mx 2004 de flash est requise.

La classe Tween a été initialement codée par Robert Penner, avant d'être rachetée par Macromedia ( appartenant nouvellement à Adobe ) et intégrée dans le répertoire de classes de flash.
le chemin par défaut est le suivant : ( C:\Program Files\Macromedia\Flash\fr\First Run\Classes\mx\transitions\Tween.as ).

A la classe Tween s'ajoutent les easing-équations de Penner ( pour appliquer à la transition des effets de ralentissement, d' élasticité...) disponibles dans le répertoire "/easing" du dossier contenant la classe Tween cité plus haut. Vous pouvez télécharger de nouvelles easing-équation sur le site de Penner, en vous rendant sur l'adresse suivante : www.robertpenner.com/easing/
Pour les utiliser, dézippez le repertoire "com" du fichier zip dans le dossier de votre projet ( ou de votre fla ) et ajoutez :

import com.robertpenner.easing.*

au début de votre code.

La classe Tween permet de réaliser des interpolations de mouvements ou effets visuels sur des objets trés facilement dans flash. Pour cela, il faut renseigner à la classe un certain nombre d'arguments. L'utilisation de la Tween reste accessible même aux débutants, il vous suffit de déclarer une variable qui invoque la classe :

 

var maTween:Tween = new Tween( objet, propriété, function, départ, fin, durée, useseconds );

Détail des arguments :

Faites bien attention à respecter le typage des arguments ! Notamment pour le paramètre "propriété" qui doit être défini en tant que String.

Voici tout de suite un exemple d'utilisation basique de la classe Tween ( également téléchargeable ici )

 

import mx.transitions.Tween; // on importe la classe Tween 
import mx.transitions.easing.*; // on importe les classe easing pour les effets visuels.
var maTween:Tween = new Tween( this.fenetre, "_x", Regular.easeOut, 100, 200, 20, false ); 
// on déclare une Tween, celle ci va s'executer automatiquement.

Si vous souhaitez que votre objet se déplace en diagonale, il vous suffit simplement de définir deux tweens afin de modifier les proprietés _x et _y de votre objet en même temps.

 

var maTween_x:Tween = new Tween( this.fenetre, "_x", Regular.easeOut, 100, 200, 20, false );
var maTween_y:Tween = new Tween( this.fenetre, "_y", Regular.easeOut, 100, 200, 20, false );

Les Tweens permettent également d'agir sur des propriétés telles que l'alpha d'un clip, vous permettant ainsi de réaliser beaucoup de sortes d'effets visuels très facilement, il faut cependant respecter les valeurs acceptées par ces propriétés : une Tween modifiant l'alpha d'un clip de 100% à 200% ne produira rien du tout, car l'alpha à 100% est le maximum. exemple d'utilisation correcte de la Tween de modication influent sur la propriété alpha :

 

var maTween_x:Tween = new Tween( this.fenetre, "_alpha", Elastic.easeOut, 100, 0, 20, false );

le sous-chapitre suivant vous informera sur les easing équations.

Ce sont les classes qui vous permettront d'obtenir de très beaux effets visuels sur vos Tweens, et ce trés facilement. Voici une liste incomplète ( car vous pouvez en télécharger d'autres sur le site de Penner, ( www.robertpenner.com/easing/ ) des classes présentes dans le répertoire easing :

 

Lors du renseignement de la classe de l'équation choisie, vous remarquerez qu'elle est succédée d'un ".easeOut", ".easeIn" ou même ".easeInOut". Ce paramètre indique en fait quand l'effet de l'équation doit etre effectué :

 

Voici un exemple d'utilisation de Tween avec l'effet Bounce, opéré vers la fin de l'interpolation de mouvement :

 

// applique un déplacement sur l'axe x, ainsi qu'un effet de rebondissement en fin d'interpolation.
var maTween:Tween = new Tween( this.fenetre, "_x", Bounce.easeOut, 100, 200, 20, false );

Si vous n'êtes pas sûr d'avoir tout compris à ce stade, vous pouvez consulter les exemples, ou bien relire ce chapitre. Vous pouvez également vous entrainer à réaliser quelques interpolations avec la classe Tween avant de passer au chapitre suivant.

Lors du développement de votre application, vous pouvez avoir besoin de déclencher une action à la fin d'une Tween, ou bien lors du démarrage d'une Tween. Pour cela nous allons utiliser les gestionnaires d'évènements de la classe Tween, ainsi que ses méthodes.

Il s'agit en fait de fonctions qui se déclenchent lors d'un état particulier de la Tween ( à la fin par exemple ). Nous pourrions utiliser ces gestionnaires d'évènement directement sur notre Tween, cependant nous allons utiliser un objet écouteur par souci de propreté, ( cela pourrait nous permettre de supprimer cet écouteur plus tard, si on ne le désire plus ).

Un objet écouteur va récuperer l'évènement d'une classe à sa place. Dans le cas suivant, on définit la fonction d'évènement onMotionFinished appartenant à la classe Tween sur l'objet écouteur listenerObject, puis on indique à flash que cet objet transmettra l'évènement à la classe Tween grâce à la méthode : maTween.addListener(listenerObject);

Voici un exemple où une fonction trace() est effectuée à la fin d'une interpolation par Tween : ( également téléchargeable ici )

 

import mx.transitions.Tween; // on importe la classe Tween 
import mx.transitions.easing.*;

var maTween:Tween = new Tween( this.fenetre, "_x", Bounce.easeOut, 100, 200, 20, false );

// création de l'objet écouteur :
var listenerObject:Object = new Object ();

// application d'un évenement sur l'objet :
listenerObject.onMotionFinished = function (Void):Void {
     // le trace est executé lorsque l'interpolation est terminée.
     trace(" Je suis terminée !");
}

// application de l'objet écouteur à la tween :
maTween.addListener(listenerObject);

Si vous n'avez pas assimilé la notion d'objets écouteurs, vous pouvez vous référer à l'aide flash ( F1 ), nous n'aborderons pas cette notion ici.

Voici un tableau des gestionnaires d'évenements de la classe Tween :

 

Nous avons précédemment vu comme nous pouvions déclencher des actions en fonction d'évènements.
Nous allons voir à présent comment contrôler directement nos Tweens, à l'aide des méthodes de la classe Tween.

Commençons avec un exemple, vous aurez sûrement remarqué que lorsque nous déclarons une Tween, elle execute l'interpolation aussitôt.
Imaginons à présent que l'on souhaite déclarer notre Tween au début de l'animation, mais la déclencher lors d'un clic sur un bouton, l'exemple ci-dessous illustre la façon de procéder, en utilisant les méthodes start() et stop() de la classe Tween : ( également téléchargeable ici )

 

import mx.transitions.Tween; // on importe la classe Tween 
import mx.transitions.easing.*;

var maTween:Tween = new Tween( this.fenetre, "_x", Bounce.easeOut, 100, 200, 20, false ); // nous définissons la Tween.
maTween.stop(); // nous lui indiquons de ne pas s'executer pour l'instant à l'aide de la méthode stop();

// detection du clic sur un bouton :
unBouton.onRelease = function (Void):Void {
      // déclenchement de l'interpolation grace à Tween.start();
      maTween.start();
}

Dans d'autres cas, vous aurez peut-être besoin de rembobiner votre interpolation de mouvement, après un rollOut par exemple. Dans ce cas, nous utiliserons la méthode yoyo() de la classe Tween, qui réalisera l'interpolation de notre Tween à l'envers : ( également téléchargeable ici )

 

import mx.transitions.Tween; // on importe la classe Tween 
import mx.transitions.easing.*;

var maTween:Tween = new Tween( this.fenetre, "_x", Bounce.easeOut, 100, 200, 20, false ); // nous définissons la Tween.
maTween.stop(); // nous lui indiquons de ne pas s'executer pour l'instant à l'aide de la méthode stop();

// detection du survolement sur un bouton :
unBouton.onRollOver = function (Void):Void {
      // déclenchement de l'interpolation grace à Tween.start();
      maTween.start();
}

// detection de la sortie de survolement du bouton :
unBouton.onRollOver = function (Void):Void {
      // déclenchement de l'interpolation à l'envers
      maTween.yoyo();
}

Je vous ai présenté précedemment les méthodes de la classe Tween les plus utilisées, voici un tableau récapitulatif de toutes les méthodes disponibles :

 

Pour ce dernier chapitre, nous allons voir rapidement les propriétés disponibles pour la classe Tween.
Ces propriétés sont en lecture seule, c'est à dire que vous ne pouvez pas les modifier, vous pouvez uniquement y accéder pour les lire.

Pour accéder à une propriété de la Tween, il vous faut tout d'abord déclarer la Tween et ensuite aller chercher la propriété sur la variable, voici un exemple avec la propriété duration:

 

import mx.transitions.Tween; // on importe la classe Tween 
import mx.transitions.easing.*;

var maTween:Tween = new Tween( this.fenetre, "_x", Bounce.easeOut, 100, 200, 20, false ); // nous définissons la Tween.
var durationDeMaTween:Number = maTween.duration;
trace("durée : "+durationDeMaTween);

C'est aussi simple que ca.
Voici à présent un tableau récapitulatif des propriétés de la classe Tween :

 

Comme vous avez pu le remarquer dans ce tutoriel, les Tweens fournissent l'alternative indispensable pour des interpolations de mouvement vraisemblables et dynamiques.
Vous serez parfois amené à créer une application uniquement avec du code, et devrez alors recourir à cette classe.

Je remercie Arnolem, Roikku, Nico, Thuliad, bref tous mes ainés du projet FLOG, avec lesquels j'apprends un peu plus chaque jour, notamment dans l'environnement flash.
Je remercie Developpez.com, ce site où chacun peut apprendre et aider son prochain.