Les Tweens

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 = 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 = new Tween( this.fenetre, "_x", Regular.easeOut, 100, 200, 20, false ); // on déclare une Tween, celle-ci va s'exécuter 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 propriétés _x et _y de votre objet en même temps.

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 modification influant sur la propriété alpha :

var maTween_x = 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 être 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 = 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.

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écupérer 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 = new Tween( this.fenetre, "_x", Bounce.easeOut, 100, 200, 20, false );
 
// création de l'objet écouteur :
var listenerObject = new Object ();
 
// application d'un événement 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'événements 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 exécute 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 = 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'exécuter pour l'instant à l'aide de la méthode stop();
 
// détection du clic sur un bouton :
unBouton.onRelease = function () {
      // déclenchement de l'interpolation grâce à 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 = 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'exécuter pour l'instant à l'aide de la méthode stop();
 
// détection du survolement sur un bouton :
unBouton.onRollOver = function () {
      // déclenchement de l'interpolation grâce à Tween.start();
      maTween.start();
}
 
// détection 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écédemment les méthodes de la classe Tween les plus utilisées, voici un tableau récapitulatif de toutes les méthodes disponibles :