Accueil | Tutoriaux

Tutoriaux : Déplacement élastique d'un clip
 

1. Introduction

Ce tutoriel a pour objectif de vous faire comprendre comment simuler des déplacements élastiques. Le code est brièvement commenté : si vous voulez lire un tutoriel plus pédagogique, je vous conseille de visiter le site de Keith Peters (but it's not in French...). Pour retenir et comprendre ce genre de script il n'y a qu'une seule méthode : penser en termes de forces, de vecteur vitesse et d'accélération !! Tous à vos anciens manuels de sciences physiques... Le paramètre f simule les forces de frottements et k est la constante de raideur de l'élastique : ces paramètres peuvent varier selon vos besoins entre 0 et 1.
2. Dans la bibliothèque et sur la scène
 

0) Dans le panneau propriétés du document, définissez les dimensions de l'animation : largeur et hauteur valent 200 pixels. Prenez une cadence de 20 images par seconde.

1) a) Créez un clip simple : par exemple un disque rouge de 5 pixels de diamètre, centré verticalement et horizontalement.

1) b) Placez une occurrence de ce clip n'importe où sur la scène principale. Dans le panneau propriétés, nommez cette occurrence "d" (d comme "disque"...).

2) a) Créez un second clip qui symbolisera une cible.

2) b) Placez une occurrence de ce clip au centre de la scène principale et dans le panneau propriétés, nommez cette occurrence "t" (t comme "target" in English, autrement la cible in French...).
 
3. Le code et l'animation
 

Le code ci-dessous permet de modifier les coordonnées de la cible en cliquant sur la scène, tandis que le disque rouge oscillera autour de la cible pour l'atteindre finalement.

Dans le panneau action de l'image n°1 de la scène principale, placez le code suivant :

 
k = 0.2;
f = 0.95;
vx = vy = 0; 
 
onMouseDown = function() {
t._x = _xmouse;
t._y = _ymouse;
}
 
onEnterFrame = function() {
ax = k*(t._x - d._x);
ay = k*(t._y - d._y);
vx += ax;
vy += ay;
vx *= f;
vy *= f;
d._x += vx;
d._y += vy;
}
 Cliquez dans cette zone pour déplacer la cible.
 
4. Le code avec ses commentaires
 
La valeur du paramètre k est constante au cours de cette animation et représente la raideur de l'élastique. Si vous cherchez à simuler la réalité ce paramètre doit être positif et inférieur à 1. La valeur 0.2 est souvent la plus adaptée.
k = 0.2;
 
Le paramètre f représente les forces de frottement et permet de ralentir le mouvement du disque. Pour f=1, il n'y a aucun frottement. Les frottements deviennent d'autant plus importants que f est proche de zéro.
f = 0.95;
 
vx et vy sont les coordonnées cartésiennes du vecteur vitesse. Au démarrage de l'animation, le vecteur vitesse est nul.
vx = vy = 0;
 
Lorsque le bouton de la souris est enfoncé, le clip "t" se positionne à l'endroit où se trouve le curseur. t._x est l'abscisse du clip t tandis que _xmouse est l'abscisse de votre curseur.
onMouseDown = function() {
t._x = _xmouse;
t._y = _ymouse;
}
 
A chaque image de l'animation...
onEnterFrame = function() {
 
ax est l'abscisse du vecteur accélération : cette abscisse est proportionnelle à la différence entre l'abscisse de la cible et celle du disque. Comme la physique de Newton le dit, la somme des forces est égale à la masse multipliée par l'accélération : ax peut aussi être considéré comme l'abscisse du vecteur force. Cette force est d'autant plus grande que la distance entre le disque et la cible est grande : tirez sur un élastique pour comprendre cette loi...
ax = k*(t._x - d._x);
 
ay est l'ordonnée du vecteur accélération.
ay = k*(t._y - d._y);
 
A chaque image on ajoute ax à la valeur de vx. Cette ligne équivaut à : vx=vx+ax. Au fait, c'est quoi l'accélération ? C'est la dérivée du vecteur vitesse, autrement dit l'accélération représente la variation de la vitesse. En effet au cours de l'animation, la position du disque varie, mais sa vitesse également.
vx += ax;
 
On ajoute ay à la valeur de vy.
vy += ay;
 
Ceci équivaut à : vx=vx*f. A chaque image, on multiplie l'abscisse du vecteur vitesse par f qui je le rappelle est une constante comprise entre 0 et 1. La valeur absolue de la nouvelle valeur de vx est donc inférieure à celle de la précédente : la constante f permet donc de freiner le déplacement du disque. Dans notre exemple, nous avons choisi de prendre f=0.95, cela signifie qu'en multipliant vx par f, on réduit la vitesse de 5%. Pour f=1, la perte de vitesse est nulle et les forces de frottement sont inexistantes.
vx *= f;
 
Idem pour l'ordonnée du vecteur vitesse.
vy *= f;
 
Au fait, c'est quoi la vitesse ? La vitesse est la dérivée de la position, autrement dit la vitesse représente la variation de la position. C'est pourquoi, on ajoute désormais l'abscisse du vecteur vitesse à l'abscisse du disque.
d._x += vx;
 
De même, on ajoute l'ordonnée du vecteur vitesse à l'ordonnée du disque.
d._y += vy;
 
Fin de la fonction.
}
 
 
Voilà pour savez tout sur les déplacements élastiques. Le code n'est pas bien long mais le comprendre parfaitement demande du temps : jouez avec les paramètres f et k et observez les modifications parfois sensibles de l'animation. Comprendre ce script ouvre des perspectives intéressantes : pour simuler des phénomènes physiques, il faut constamment penser aux forces, à l'accélération, à la vitesse et à la position des objets sur la scène. Avant tout, il faut connaître ces lois physiques (élasticité, gravité, magnétisme...). Actionscript vous donne l'occasion de remettre le nez dans les manuels scolaires !
 
Accueil | Tutoriaux