Accueil | Tutoriaux

Tutoriaux : déplacement dynamique d'un clip en suivant une courbe tracée avec plusieurs appels à la fonction curveTo.
 

1. Introduction

Une courbe est tracée à l'aide de plusieurs appels à la fonction curveTo : dans l'animation ci-contre les points rouges sont les ancres de la courbe. Ce tutoriel vous permet de comprendre comment il est possible de coder le déplacement d'un clip qui suit cette courbe. Tout réside dans la définition mathématique de la fonction curveTo et dans l'écriture d'une fonction que l'on nommera "barycentre" dans le script. Quelques connaissances en mathématiques permettent de mieux comprendre ce script.

 
2. Dans la bibliothèque
 

Dans la bibliothèque vous devez créer 3 clips différents :

1) Le premier clip est un disque bleu de 10 pixels de diamètre, centré verticalement et horizontalement. Placez ensuite 7 occurrences de ce clip sur la scène principale en les nommant respectivement "pt0", "pt1", ..., "pt6" dans le panneau propriétés. La courbe passera par ces points.

2) Le deuxième clip est un disque rouge de 10 pixels de diamètre, centré verticalement et horizontalement. Placez 7 occurrences de ce clip sur la scène principale en les nommant respectivement "a0", "a1", ..., "a6" dans le panneau propriétés. Ces points sont les ancres de la courbe.

3) Enfin, créez un dernier clip en traçant par exemple un disque vert de 10 pixels de diamètre et centré verticalement et horizontalement. Placez une occurrence de ce clip sur la scène principale en la nommant "pt". Ce clip est le point qui se déplacera en suivant la courbe.
 
3. Le code et l'animation
  
nbr = 7;
t = 0;
dt = 0.03; 
 
barycentre = function(a, b, c, t) {
return (1-t)*(1-t)*a + 2*(1-t)*t*b + t*t*c;
}
 
this.lineStyle(0, 0x999999, 100);
this.moveTo(pt0._x, pt0._y);
for(var i = 0; i < nbr; i++) {
nom1 = eval("a" + i);
if(i != nbr -1) {
nom2 = eval("pt" + (i + 1));
} else {
nom2 = pt0;
}
this.curveTo(nom1._x, nom1._y, nom2._x, nom2._y);
}
 
onEnterFrame = function() {
t += dt;
if(t >= nbr) {t = 0;}
n = Math.floor(t);
ptA = eval("pt" + n);
ptB = eval("a" + n);
if(n != nbr-1) {
ptC = eval("pt" + (n + 1));
} else {var ptC = pt0;}
pt._x = barycentre(ptA._x, ptB._x, ptC._x, t-n);
pt._y = barycentre(ptA._y, ptB._y, ptC._y, t-n);
}

Cette animation est celle qui est obtenue en placant le code ci-contre dans le panneau action de l'image clé n°1 de la scène principale.
 
3. Le code et quelques commentaires
 
On initialise 3 variables de l'animation : nbr est le nombre d'ancres ou le nombre de points par lesquels la courbe doit passer. t est un paramètre qui varie entre 0 et nbr tandis que dt permet de régler la vitesse de déplacement du clip nommé "pt".
nbr = 7;
t = 0;
dt = 0.03;
 
Lorsque vous utilisez la fonction curveTo vous tracez (sans le savoir) l'ensemble des barycentres des points a, b et c affectés respectivement des masses (1-t)², 2(1-t)t et t² lorsque t varie entre 0 et 1.
barycentre = function(a, b, c, t) {
return (1-t)*(1-t)*a + 2*(1-t)*t*b + t*t*c;
}
 
Les lignes suivantes permettent de tracer la courbe définie par les 14 points.
this.lineStyle(0, 0x999999, 100);
this.moveTo(pt0._x, pt0._y);
for(var i = 0; i < nbr; i++) {
nom1 = eval("a" + i);
if(i != nbr -1) {
nom2 = eval("pt" + (i + 1));
} else {
nom2 = pt0;
}
this.curveTo(nom1._x, nom1._y, nom2._x, nom2._y);
}
 
A chaque image de la scène principale...
onEnterFrame = function() {
 
On ajoute la valeur de dt à la variable t.
t += dt;
 
Si t devient supérieur à nbr, on réinitialise t à zéro.
if(t >= nbr) {t = 0;}
 
n est la partie entière de t.
n = Math.floor(t);
 
Si t vaut 2,35 alors n est égal à 2 et ptA est le nom du clip "pt2" tandis que ptB est le nom du clip "a2".
ptA = eval("pt" + n);
ptB = eval("a" + n);
 
Si ptA est le nom du clip "pt2" alors ptC est le nom du clip "pt3". Dans le cas où n est égal à nbr-1, autrement dit si ptA est le nom du clip "pt6" alors ptC est le nom du clip "pt0".
if(n != nbr-1) {
ptC = eval("pt" + (n + 1));
} else {var ptC = pt0;}
 
L'abscisse du clip "pt" est le barycentre des abscisses des clips ptA, ptB et ptC affectées respectivement des masses (1-u)², 2(1-u)u et u²avec u=t-n. Remarque : 0 < u < 1 !
pt._x = barycentre(ptA._x, ptB._x, ptC._x, t-n);
 
Idem pour l'ordonnée du clip "pt".
pt._y = barycentre(ptA._y, ptB._y, ptC._y, t-n);
 
fin de la fonction.
}
 
Accueil | Tutoriaux