Accueil | Tutoriaux

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

1. Introduction

Trois points définissent une ligne courbe construite à l'aide de la fonction curveTo. Comment coder le déplacement d'un clip le long de cette courbe ? En lisant ce tutoriel ! Il faut savoir que la courbe tracée avec la fonction curveTo est définie mathématiquement comme l'ensemble des barycentres des trois points affectés respectivement des masses (1-t)², 2*(1-t)*t et t² lorsque t varie entre 0 et 1. Encore faut-il savoir ce qu'est un barycentre... Jetez vous dans la lecture passionnante de vos manuels de Terminale !
2. Dans la bibliothèque
 

1) Dans la bibliothèque, vous créez un clip quelconque : par exemple une croix de 12 pixels de largeur, de 12 pixels de hauteur, centrée verticalement et horizontalement. Placez ensuite 3 occurrences de ce clip sur la scène principale et nommez les "pt1", "pt2" et "pt3" dans le panneau propriétés.

2) Dans la bibliothèque, créez un second clip : un disque rouge de 5 pixels de diamètre, centré verticalement et horizontalement. Placez une occurrence de ce clip sur la scène principale et nommez le "pt". Le déplacement de ce clip sera obtenu en plaçant le code ci-dessous dans le panneau action de l'image clé n°1 de la scène principale.
 
3. Le code et l'animation
  
t = 0;
dt = 0.02; 
 
barycentre = function(a, b, c, t) {
return (1-t)*(1-t)*a + 2*(1-t)*t*b + t*t*c;
}
 
this.lineStyle(0, 0xFF0000, 100);
this.moveTo(pt1._x, pt1._y);
this.curveTo(pt2._x, pt2._y, pt3._x, pt3._y);
 
onEnterFrame = function() {
t += dt;
pt._x = barycentre(pt1._x, pt2._x, pt3._x, t);
pt._y = barycentre(pt1._y, pt2._y, pt3._y, t);
if(t >= 1) {t = 1; dt *= - 1;} else {
if(t <=0) {t = 0; dt *= -1;}
}
}
 
4. Le code avec ses commentaires
 
On initialise 2 variables : dt permet de régler la vitesse de déplacement du clip "pt". t est un paramètre qui varie entre 0 et 1 et qui permet de définir la position du clip "pt" sur la courbe obtenue avec la fonction curveTo.
t = 0;
dt = 0.02;
 
La fonction "barycentre" est la définition mathématique de la fonction curveTo !
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 en rouge la courbe qui relie le clip "pt1" au clip "pt3" avec "pt2" comme ancre : lire la documentation pour plus de précisions.
this.lineStyle(0, 0xFF0000, 100);
this.moveTo(pt1._x, pt1._y);
this.curveTo(pt2._x, pt2._y, pt3._x, pt3._y);
 
A chaque image de la scène principale...
onEnterFrame = function() {
 
On ajoute la valeur de dt à la variable t.
t += dt;
 
L'abscisse du clip "pt" est le barycentre des abscisses des clips "pt1", "pt2" et "pt3" affectées respectivement des masses (1-t)², 2(1-t)t et t².
pt._x = barycentre(pt1._x, pt2._x, pt3._x, t);
 
Idem pour l'ordonnée du clip "pt".
pt._y = barycentre(pt1._y, pt2._y, pt3._y, t);
 
Si t devient supérieur à 1 ou inférieur à 0 alors on change le signe de dt.
if(t >= 1) {t = 1; dt *= - 1;} else {
if(t <=0) {t = 0; dt *= -1;}
}
 
fin de la fonction.
}
 
5. Pour aller plus loin
 

- Comme dans le précédent tutoriel, on peut remarquer que le clip "pt" ne se déplace pas à vitesse constante... Il faut donc adapter ce script si vous voulez un mouvement uniforme.

- On peut compliquer le problème : désormais vous voulez coder le déplacement d'un clip suivant une trajectoire définie par plusieurs appels à la fonction curveTo. Dans ce cas comment faire ? Comme d'habitude, il suffit de lire le tutoriel suivant !
 
Accueil | Tutoriaux