Accueil | Tutoriaux

Tutoriaux : Déplacement d'un clip entre deux points en suivant une trajectoire rectiligne.
 

1. Introduction
 
L'objectif de ce tutoriel est d'expliquer comment parvenir à coder le déplacement d'un clip entre deux points dont on connaît les coordonnées. Sur l'animation ci-contre le point rouge se déplace sur le segment dont les extrémités sont les 2 petites croix grises. Vous pouvez déplacer les croix et faire varier la vitesse du point rouge à l'aide de la glissière. Qu'est qu'un segment [AB] ? Réponse : c'est l'ensemble des barycentres des points A et B affectés respectivement des masses (1-t) et t lorsque t varie entre 0 et 1 ! Voilà, le prof de maths a parlé... C'est quoi un barycentre ? Silence au fond de la classe !! Le prof de maths a d'autres choses à faire. Le code ci-dessous est une version plus simple de l'animation ci-contre.
2. Dans la bibliothèque
 
Dans votre 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. That's all ! Nous pouvons passer au code ci-dessous qui doit comme d'habitude se trouver dans le panneau action de la première et seule image clé de la scène principale (vous êtes fainéant : je vous suggère un copier-coller).
 
3. Le code
  

x1 = 25;
y1 = 75;
x2 = 150;
y2 = 120; 
 
barycentre = function(a, b, t) {
return (1 - t)*a + t*b;
}
 
dt = 1/25;
t = 0;
 
this.lineStyle(0, 0x666666, 100);
this.moveTo(x1, y1);
this.lineTo(x2, y2);
 
onEnterFrame = function() {
t += dt;
point._x = barycentre(x1, x2, t);
point._y = barycentre(y1, y2, t);
if(t >= 1) {t = 1; dt *= - 1;} else {
if(t <=0) {t = 0; dt *= - 1;}
}
}

Le script ci-contre permet de coder le déplacement du clip nommé "point" entre les deux points de coordonnées (25;75) et (150;120).
 
4. Le code avec ses commentaires
 
On détermine les coordonnées (abscisse et ordonnée) de la première extrémité du segment.
x1 = 25;
y1 = 75;
 
On procède de même pour le deuxième point.
x2 = 150;
y2 = 120;
 
La fonction "barycentre" est fondamentale : elle renvoie le barycentre des points pondérés (a,(1-t)) et de (b,t). Le paramètre t doit varier entre 0 et 1. Pour t=0, la fonction retourne la valeur a ; pour t=1, elle retourne la valeur b ; pour t=0.5, elle retourne la valeur (a+b)/2, autrement dit la moyenne de a et de b, ou encore le centre de l'intervalle [a,b] !! Lorsque t varie entre 0 et 1, la fonction "barycentre" retourne toutes les valeurs comprises entre a et b : elle définit une bijection entre les intervalles [0;1] et [a;b].
barycentre = function(a, b, t) {
return (1 - t)*a + t*b;
}
 
On initialise deux variables : dt permettra de faire varier la vitesse de déplacement du clip "point" et t est un paramètre qui varie entre 0 et 1.
dt = 1/25;
t = 0;
 
On trace le segment qui relie les points de coordonnées (x1;y1) et (x2;y2) avec un trait gris, en filet maigre avec un alpha de 100%. Consultez la doc pour les détails... On peut se passer du "this" mais dans ce cas on se passe également de la coloration syntaxique !
this.lineStyle(0, 0x666666, 100);
this.moveTo(x1, y1);
this.lineTo(x2, y2);
 
A chaque image de la scène principale...
onEnterFrame = function() {
 
On ajoute la quantité dt à la variable t.
t += dt;
 
L'abscisse du clip "point" est le barycentre des abscisses ! Vivent les maths.
point._x = barycentre(x1, x2, t);
 
L'ordonnée du clip "point" est le barycentre des ordonnées.
point._y = barycentre(y1, y2, t);
 
Si t est plus grand que 1 alors t prend la valeur 1 et la valeur de dt est multipliée par -1 sinon si t est plus petit que 0 alors t prend la valeur 0 et dt est multipliée par -1. Ouf ! Tout cela pour s'assurer que t varie et reste bien compris entre 0 et 1.

if(t >= 1) {t = 1; dt *= - 1;} else {
if(t <=0) {t = 0; dt *= - 1;}
}
 
fin de la fonction.
}
 
5. Pour aller plus loin
 

OK, super : notre point se déplace et sa trajectoire est un segment. Mais si je veux que sa trajectoire soit un triangle ou si je veux que le point se déplace en suivant les cotés d'un décagone... comment dois-je faire ? Réponse : lire le prochain tutoriel !
 
Accueil | Tutoriaux