ActionScript 3.0, l'essentiel sous la main Adobe Flash Accueil
Fiches
Boutique
Contact
Animation dynamique (Tween/TweenLite)
Certaines animations sont très difficile à réaliser, comme le rebond ou l'élasticité. Pour cela, il peut être beaucoup plus simple de programmer son animation. Pour cela, on utilise la class Tween.
C'est très simple, on définit l'interpolation d'un objet en spécifiant son point de départ et son point d'arrivée. On ajout ensuite certains paramètres comme la durée ou le type de mouvement.
Nous allons voir deux façons de programmer une animation : - Tween (Adobe Flash) :

//Imports Flash
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

var animation:Tween = new Tween(monObjet, "x", Bounce.easeOut, 100, 300, 50, false);

Ici, je crée une interpolation (animation) à l'aide de la class Tween :
Au final, mon clip ayant comme nom d'occurence monObjet va faire un déplacement sur x de 100 (monObjet.x = 100) à 300 (monObjet.x = 300) en 50 images clés.

Le temps d'une interpolation peut être définit en seconde ou en image clé : Le type d'interpolation est définit en 2 temps : Bounce.easeOut
Les animations Tween de Flash ont tendances à s'interrompre de temps à autres. De plus, le nombre de paramètres est assez limité.
Pour allez plus loin, essayez d'autre package d'animation Tween, comme TweenLite.


- TweenLite (GreenSock) :

Tout d'abord, allez sur le site officiel, et télécharger le package AS3 : http://www.greensock.com/tweenlite/

Ouvrez l'archive ZIP, dezippez le dossier 'com', et mettez-le au même niveau que votre fichier.fla

Vous pouvez maintenant utilisez le package TweenLite. Commencez par importer les class dont vous avez besoin :

//Imports TweenLite (by Greensock)
import com.greensock.*;
import com.greensock.easing.*;

Ensuite, pour créer une interpolation, faites :

//Imports TweenLite (by Greensock)
import com.greensock.*;
import com.greensock.easing.*;

TweenLite.to(monObjet, 1, { x:300, ease:Bounce.easeOut } );

Ici, je dit au clip ayant comme nom d'occurence monObjet d'aller se positionner en x=300 à partir de sa position actuelle, en 1 seconde, par une interpolation de type Bounce.easeOut.

L'avantage de TweenLite, c'est qu'on peut ajouter beaucoup plus de paramètres dans une seule animation :

//Imports TweenLite (by Greensock)
import com.greensock.*;
import com.greensock.easing.*;

TweenLite.to(monObjet, 1, { delay:2, //delai de 2 secondes avant l'animation
x:300, //position sur l'axe des X
y:150, //position sur l'axe des Y
width:55, //largeur de 'monObjet'
height:75,//hauteur de 'monObjet'
scaleX:0.5, //grossissement ou rétraississement sur X de 'monObjet' (1.0 = taille normale)
scaleY:0.5, //grossissement ou rétraississement sur Y de 'monObjet' (1.0 = taille normale)
alpha:0.3, //opacité de 'monObjet' (de 0.0 à 1.0)
onStart:function() { trace("Début de l'animation"); }, //fonction executé au départ de l'animation
onComplete:function() { trace("Fin de l'animation"); }, //fonction executé à la fin de l'animation
ease:Bounce.easeOut
});

ATTENTION : Si vous utilisez plusieur fois cette fonction simultanément, il risque d'y avoir des conflits, car comme vous pouvez le remarquer, l'animation n'est pas nomminative. Pour éviter cela, il faut créer les animations individuellement de cette manière :

//Imports TweenLite (by Greensock)
import com.greensock.*;
import com.greensock.easing.*;

var animation:TweenLite = new TweenLite(monObjet,1,{x:300, ease:Expo.easeOut});
animation.play();

Vous pouvez ainsi agir sur le contrôle de l'animation :

animation.play();
animation.stop();
animation.pause();
animation.resume();

Pour avoir plus de détails sur les différents paramètres que vous pouvez utilisez avec TweenLite, consultez la documentation en ligne sur le site officiel :
http://www.greensock.com/tweenlite/.
Commentaire(s)
Aucun.