Cette classe intégrée à Flash à partir de la version 7, permet de réaliser par le code différents mouvements sur des objets de la scène, du plus simple au plus complexe.
Nous verrons dans ce tutoriel quelques façons simples d’utiliser cette classe pour faire des petites bases d’animation sympas. A vous ensuite de vous en servir pour en faire quelque chose de plus conséquent.
Tout d’abord pour pouvoir utiliser la classe Tween, il faut appeler les fichiers nécessaires à son fonctionnement. Commencez par copier ces lignes dans un nouveau calque que l’on nommera “AS3″ :
import fl.transitions.Tween; //Classe Tween
import fl.transitions.easing.*; //Fonctions de mouvements
Il faut savoir que la classe Tween s’utilise couplée avec une série de fonctions permettant le calcul du mouvement. Nous verrons plus en détails ces différentes fonctions un peu plus loin dans ce tutoriel.
Nous pouvons nous lancer dans notre animation.
Créez un MovieClip, mettez-y par exemple du texte et placez-le sur la scène. Nommez ce clip d’une occurrence (par exemple “mc”) dans sa fenêtre de propriétés.
Nous allons faire arriver ce texte de la gauche de l’animation. Placez le MovieClip à son point de départ, donc en dehors de l’animation (en dehors du carré blanc).
Vous devriez avoir quelque chose comme ça :
Dans le calque de code, à la suite des 2 lignes précédemment copiées, ajoutez la ligne suivante :
new Tween(mc,"x", None.easeNone,mc.x, 230, 1, true);
Il s’agit du constructeur de la classe Tween. Flash va créer un objet Tween en fonction des paramètres qu’il lui sont donnés (ce qu’il y a entre parenthèses).
Voyons un par un ces paramètres.
mc : l’objet cible, ici notre MovieClip contenant du texte.
“x” : la propriété de l’objet qui va être bougée, ici il s’agit de la coordonnée x pour effectuer un mouvement horizontal.
None.easeNone : la fonction de mouvement utilisée, il s’agit ici d’un mouvement neutre sans accélération ni autres effets.
mc.x : la valeur de départ de la propriété, nous prenons ici la coordonée x actuelle de l’objet ( nous l’avons déjà placée précédemment).
230 : la valeur d’arrivée de la propriété, nous allons faire déplacer l’objet de là où il est, jusqu’au point de coordonnée x=230.
1: le temps que va mettre le mouvement à s’effectuer.
true : la valeur indiquant que le paramètre précédent était en secondes, (et non en images).
Vous pouvez lancer l’animation et admirer le résultat. Vous devriez avoir quelque chose qui s’approche de ça :
Voilà, vous venez de faire votre première animation via le code !
Rien de bien impressionnant tout de même. Essayons de la rendre plus sympa.
Nous pouvons par exemple changer la fonction de mouvement. Il y a 6 fonctions de bases : None, Regular, Strong, Back, Bounce et Elastic.
- None n’applique rien de spécial
- Regular applique une accélération constante
- Strong applique une accélération plus forte
- Back applique un rebond
- Bounce applique plusieurs rebonds
- Elastic applique un effet d’élasticité
Il faut, à ces fonctions, spécifier à quel moment du mouvement elles doivent être appliquées : easeIn (appliquées au début), easeOut (appliquée sà la fin) et easeInOut (appliquées des 2 côtés), ce qui nous donne par exemple Strong.easeIn ou Bounce.easeOut
Voici quelques exemples de notre animation en changeant uniquement le paramètre de la fonction de mouvement.
new Tween(mc,"x", Strong.easeOut,-290, 230, 1, true);
new Tween(mc,"x", Strong.easeOut,-290, 230, 1, true);
new Tween(mc,"x", Elastic.easeOut,-290, 230, 1, true);
On peut également appliquer plusieurs Tweens au même objet sur plusieurs propriétés différentes.
Essayons de faire des mouvements en diagonal en modifiant la propriété x et y en même temps.
Créez un nouveau document dans lequel vous allez dessiner un carré, où vous voulez dans la scène, et convertissez-le en MovieClip. Donnez-lui comme nom d’occurrence “mc_carre”.
Nous allons faire partir ce carré en bas à gauche de la scène et le faire arriver en haut à droite. Pour cela rien de bien compliqué, comme dans le premier exemple, créez un objet Tween sur la propriété “x” de mc_carre. A cela rajoutez une Tween sur la propriété “y” de mc_carre.
Ce qui donne par exemple :
new Tween(mc,"x", Back.easeInOut,100, 400, 0.5, true);
new Tween(mc,"y", Back.easeInOut,300, 100, 0.5, true);
Et quelque chose qui ressemble à :
Vous pouvez également jouer avec les différentes propriétés d’un objet, comme par exemple “scaleX” et “scaleY” qui permettent le redimensionnement. Elles prennent comme valeur un facteur de taille, elles sont donc par défaut à 1 (1x sa taille) . Modifiez le code précédent pour faire grossir le carré de la moitié de sa taille (donc 0.5 fois sa taille), puis au double de sa taille de base (donc 2x sa taille).
Attention de bien appliquer l’effet au point d’origine du MovieClip ! Si vous voulez quelque chose qui grossit du centre, éditez votre clip pour placer le point de coordonnée (0,0) au centre du carré.
Cela devrait donner :
new Tween(mc_carre,"scaleX", Elastic.easeOut,0.5, 2, 1, true);
new Tween(mc_carre,"scaleY", Elastic.easeOut,0.5, 2, 1, true);
soit :
Un autre exemple avec la propriété “alpha” de l’objet. Cette propriété prend comme valeur un pourcentage entre 0 et 1 (0 = 0% et 1 = 100%. Essayez de reproduire l’exemple si dessous :
De même, essayez de refaire celle-là , elle possède une Tween sur la propriété “rotation” qui prend un angle en degrés:
La classe Tween peut également être utilisée avec des effets comme le flou, ou encore avec une influence de la souris. Cela fera l’objet d’un prochain tutoriel.
