Informations

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

La classe Tween a été initialement codée par Robert Penner, avant d'etre rachetée par Macromedia ( appartenant nouvellement à Adobe ) et intégrée dans le repertoire de classes de flash, disponible en suivant le chemin 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 repertoire "/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 installer, il vous suffira de les placer dans le dossier des easing-équations : C:\Program Files\Macromedia\Flash\fr\First Run\Classes\mx\transitions\easing\

I. Utilisation d'une tween

I-A. Utilisation

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 meme aux débutants, il vous suffit de déclarer une variable qui invoque la classe :

 
Sélectionnez

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

Détail des arguments :

Arguments Information Typage de l'argument
objet Il s'agit de l'objet sur lequel vous effectuez l'interpolation. MovieClip
propriété la propriété de l'objet qui sera modifiée par la Tween. String
fonction rappel de l'easing-équation choisie ( explications au prochain sous chapitre ) Function
départ valeur de type Number de la propriété au départ de l'animation. Number
fin valeur de type Number de la propriété à la fin de l'animation. Number
durée valeur de type Number de la propriété à la fin de l'animation. Number
useSeconds paramètre Boolean optionnel indiquant si la durée de l'interpolation est calculée en secondes ( true ) ou en frames ( false ) Boolean

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 )

 
Sélectionnez

import mx.transitions.Tween; // on importe la classe Tween 
import mx.transitions.easing.*; // on importe les classe easing pour les effets visuels.
var maTween = 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.

 
Sélectionnez

var maTween_x = new Tween( this.fenetre, "_x", Regular.easeOut, 100, 200, 20, false );
var maTween_y = 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 :

 
Sélectionnez

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

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

I-B. Les easing-équations

Ce sont les classes qui vous permettront d'obtenir de très beaux effet 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 :

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.
Strgong Ralentissement ou accélération du mouvement .


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é :

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


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

 
Sélectionnez

// applique un déplacement tu l'axe x, ainsi qu'un effet de rebondissement en fin d'interpolation.
var maTween = 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.

II. Le contrôle des Tweens

Lors du developpement de votre application, vous pouvez avoir besoin de déclencher une action lors de la terminaison d'une Tween, ou bien lors du démarage d'une Tween. Pour cela nous allons utiliser les gestionnaires d'évenements de la classe Tween, ainsi que ses méthodes.

II-A. Les gestionnaires d'évènement de la classe Tween :

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'évenement d'une classe à sa place. Dans le cas suivant, on définit la fonction d'évenement onMotionFinished appartenant à la classe Tween sur l'objet écouteur listenerObject, puis on indique à flash que cet objet transmettra l'évenement à 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 )

 
Sélectionnez

import mx.transitions.Tween; // on importe la classe Tween 
import mx.transitions.easing.*;
 
var maTween = new Tween( this.fenetre, "_x", Bounce.easeOut, 100, 200, 20, false );
 
// création de l'objet écouteur :
var listenerObject = new Object ();
 
// application d'un évenement sur l'objet :
listenerObject.onMotionFinished = function () {
     // 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 :

Tween.onMotionChanged appelé lors de chaque changement d'une propriété de l'objet interpolé animé.
Tween.onMotionFinished appelé lorsque l'objet Tween termine son animation.
Tween.onMotionResumed invoqué lors de l'appel à la méthode Tween.resume(), provoquant ainsi la reprise de l'animation interpolée.
Tween.onMotionStarted invoqué lors de l'appel à la méthode Tween.start(), provoquant ainsi le début de l'animation interpolée.
Tween.onMotionStopped invoqué lors de l'appel à la méthode Tween.stop(), provoquant ainsi l'arrêt de l'animation interpolée.

II-B. Les méthodes de la classe Tween :

Nous avons précédemment vu comme nous pouvions déclencher des actions en fonction d'évenements.
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écgargeable ici )

 
Sélectionnez

import mx.transitions.Tween; // on importe la classe Tween 
import mx.transitions.easing.*;
 
var maTween = 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 () {
      // déclenchement de l'interpolation grace à Tween.start();
      maTween.start();
}
			

Dans d'autres cas, vous aurez peut etre besoin de rembobiner votre interpolation de mouvement, apres un rollOut part 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 )

 
Sélectionnez

import mx.transitions.Tween; // on importe la classe Tween 
import mx.transitions.easing.*;
 
var maTween = 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 () {
      // déclenchement de l'interpolation grace à Tween.start();
      maTween.start();
}
 
// detection de la sortie de survolement du bouton :
unBouton.onRollOver = function () {
      // 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 :

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] ».

III. Les Tweens et leurs propriétés

Pour ce dernier chapitre, nous allons juste 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:

 
Sélectionnez

import mx.transitions.Tween; // on importe la classe Tween 
import mx.transitions.easing.*;
 
var maTween = new Tween( this.fenetre, "_x", Bounce.easeOut, 100, 200, 20, false ); // nous définissons la Tween.
var durationDeMaTween:Number = maTween.duration;
trace(durationDeMaTween);
 
 
		

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

Tween.duration La durée de l'animation interpolée en images ou en secondes.
Tween.finish La dernière valeur interpolée pour la fin de l'animation interpolée.
Tween.FPS Le nombre d'images par seconde de l'animation interpolée.
Tween.position La valeur actuelle de la propriété du clip cible en cours d'interpolation.
Tween.time L'heure actuelle dans la durée de l'animation.

IV. Conclusion

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

V. Remerciements

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 aux allures utopiques où chacun peut apprendre et aider son prochain.