Accueil | Tutoriaux

Tutoriaux : déplacement dynamique d'un clip en suivant les côtés d'un polygone.
 

1. Introduction
Avant de lire cette page je vous conseille d'étudier le code détaillé dans le tutoriel précédent et intitulé "Déplacement d'un clip entre deux points en suivant une trajectoire rectiligne". Le problème est le suivant : des points fixes se trouvent sur la scène principale et définissent un polygone. L'objectif est d'animer un clip dont la trajectoire se confond avec les côtés du polygone. L'idée est de faire varier un paramètre t entre 0 et le nombre de points et d'utiliser la notion de barycentre. Sur l'animation ci-contre vous pouvez faire varier la vitesse de déplacement du point rouge et vous pouvez déplacer les sommets du polygone.
 
2. Dans la bibliothèque
 

1) Dans la bibliothèque, vous créez un clip quelconque : par exemple un disque rouge de 5 pixels de largeur et de hauteur, puis vous le centrez verticalement et horizontalement dans la scène. Ensuite, vous placez une occurrence de ce clip n'importe où sur la scène principale en lui donnant le nom "point" dans le panneau propriétés. Ce clip est celui qui devra se déplacer en suivant les côtés du polygone.

2) Vous créez ensuite un second clip : il s'agit d'un disque bleu de 7 pixels de largeur et de hauteur, centré verticalement et horizontalement. Vous placez ensuite 8 occurrences de ce clip sur la scène en les nommant respectivement "point0", "point1", "point2", ... , "point6", "point7" . Ces clips sont les sommets du polygone.
 
3. Le code et l'animation
  
nbr = 8;
dt = 1/25;
t = 0; 
 
this.lineStyle(0, 0xFF0000, 100);
this.moveTo(point0._x, point0._y);
for(var i = 1; i < nbr; i++) {
var pt = eval("point" + i);
this.lineTo(pt._x, pt._y);
}
this.lineTo(point0._x, point0._y);
 
barycentre = function(a, b, t) {
return (1 - t)*a + t*b;
}
 
onEnterFrame = function() {
t += dt;
n = Math.floor(t);
ptA = eval("point" + n);
if(n != nbr - 1) {
ptB = eval("point" + (n + 1));
} else {ptB = point0;}
point._x = barycentre(ptA._x, ptB._x, t - n);
point._y = barycentre(ptA._y, ptB._y, t - n);
if(t >= nbr) {t = 0;}
}

L'animation ci-dessus est celle qui est obtenue en faisant un copier-coller du code ci-contre dans le panneau action de l'image clé n°1 de la scène principale.
 
4. Le code avec ses commentaires
 
Initialisation des variables de l'animation : nbr est le nombre de sommets du polygone ; dt permet de faire varier la vitesse de déplacement du clip "point" ; t est un paramètre qui varie entre 0 et nbr et qui permet de définir la position du clip "point" sur sa trajectoire.
nbr = 8;
dt = 1/25;
t = 0;
 
Les lignes suivantes permettent de tracer le polygone dont les sommets sont les occurrences nommées "point0", "point1", ... , "point7".
this.lineStyle(0, 0xFF0000, 100);
this.moveTo(point0._x, point0._y);
for(var i = 1; i < nbr; i++) {
var pt = eval("point" + i);
this.lineTo(pt._x, pt._y);
}
this.lineTo(point0._x, point0._y);
 
On retrouve notre fameuse fonction "barycentre" utilisée dans le tutoriel précédent : on ne change pas une équipe qui gagne !
barycentre = function(a, b, t) {
return (1 - t)*a + t*b;
}
 
A chaque image de la scène principale...
onEnterFrame = function() {
 
On ajoute la valeur de dt à la variable t : plus la valeur de dt est faible, plus le point rouge se déplacera lentement. Si dt est égal à zéro, le clip "point" est immobile. On peut également jouer avec la cadence de l'animation pour faire varier la vitesse de ce point : 20 images par seconde est un choix raisonnable...
t += dt;
 
La variable n est égale à la partie entière de t, autrement dit n est le plus grand entier inférieur à t.
n = Math.floor(t);
 
Si t vaut 3.22 alors n vaut 3 et ptA est le nom d'occurrence du quatrième sommet de notre polygone soit "point3".
ptA = eval("point" + n);
 
ptB est le nom de l'occurrence qui "suit" ptA... Attention : si n vaut nbr-1, ptA est le dernier sommet du polygone et ptB est alors le nom d'occurence du premier sommet soit "point0". A méditer...
if(n != nbr - 1) {
ptB = eval("point" + (n + 1));
} else {ptB = point0;}
 
L'abscisse du clip "point" est le barycentre des abscisses des points ptA et ptB affectées respectivement des masses 1-(t-n) et (t-n). Remarque : 0<t-n<1 ! Pour comprendre ce bout de code, il faut bien lire le tutoriel précédent |:-)
point._x = barycentre(ptA._x, ptB._x, t - n);
 
Idem pour l'ordonnée du clip "point".
point._y = barycentre(ptA._y, ptB._y, t - n);
 
Si t devient supérieur à nbr alors on réinitialise t à zéro et la boucle est bouclée : le clip "point" vient de faire un tour complet du polygone.
if(t >= nbr) {t = 0;}
 
fin de la fonction
}
 
5. Pour aller plus loin
 

- Dans cette animation, le point rouge ne se déplace pas à vitesse constante : sa vitesse entre deux sommets éloignés est plus grande que celle entre deux sommets très proches. On peut adapter ce script pour faire en sorte que la vitesse soit constante sur toute la trajectoire : je vous laisse faire les modifications idoines !

- Pour modifier le sens de parcours, il faut changer le signe de la variable dt et faire en sorte que t ne devienne pas strictement inférieur à zéro.

- Superbe, maitenant j'ai un point qui se déplace en suivant les côtés d'un polygone dont les sommets sont définis par des clips placés sur la scène. Le problème c'est que je déteste les lignes droites et que je veux une trajectoire plus rock'n roll qui serait tracée avec des curveTo... Comment faire dans ce cas ? Réponse : lire le tutoriel suivant !
Accueil | Tutoriaux