Accueil | Tutoriaux

Tutoriaux : placer des clips sur une grille
 
1. Introduction
 
Comme le titre ci-dessus l'indique, vous allez apprendre dans ce tutoriel à placer des clips sur une "grille". Nous allons créer une fonction qui s'appelle placer() et qui prend 8 arguments (xstart, ystart, nbrl, nbrc, v1x, v1y, v2x, v2y). Quelques explications s'imposent : xstart et ystart sont respectivement l'abscisse et l'ordonnée sur premier clip placé sur la scène (dans l'animation ci-contre vous pouvez faire varier ces deux paramètres en déplaçant à l'aide de votre souris le point qui se trouve en haut à gauche au chargement de la page). nbrl et nbrc représentent respectivement le nombre de lignes et le nombre de colonnes : dans l'animation ci-contre nbrl vaut 7 tandis que nbrc vaut 9. (v1x, v1y) sont les coordonnées du vecteur v1 représenté en noir dans l'animation ci-contre : vous pouvez modifiez ces 2 coordonnées en déplaçant l'extrémité du vecteur v1 avec votre souris. Par analogie, vous comprendrez facilement la définition des variables v2x et v2y et je vous laisse imaginer comment vous pouvez les faire varier... Dans les lignes suivantes vous trouverez la fonction placer() et quelques commentaires.
 
2. Rappels mathématiques
 

Parmi vous, ceux qui ont la chance de connaître les notions de vecteurs, de coordonnées et de bases comprendront facilement le principe de la fonction placer(). Nous allons faire varier un entier i entre 0 et nbrl - 1 et un entier j entre 0 et nbrc - 1, puis nous allons placer une occurrence de notre clip ayant pour coordonnées (i ; j) dans le repère d'origine (xstart ; ystart) et de base (v1 ; v2).

Survolez les points de la figure ci-contre pour comprendre ce charabia ! Pour placer le point de coordonnées (4 ; 2) on se déplace successivement de 4 "pas" parallèlement au vecteur v1 puis on se déplace de 2 "pas" parallèlement au vecteur v2.
 
3. Dans la bibliothèque
 

Dans la bibliothèque, créez un clip quelconque (par exemple un cercle de 8 pixels de diamètre) et centrez le horizontalement et verticalement. Dans le panneau "propriétés de liaison", tapez l'identifiant "point". Ce nom nous permettra de placer dynamiquement (autrement dit via ActionScript) des occurrences de ce clip sur notre scène principale.

L'animation que vous allons créer aura une largeur de 150 pixels et une hauteur de 200 pixels.
 
4. Le code et l'animation
 

Dans le panneau "action" de l'image clé n°1 de la scène principale, placez le code ci-dessous et publiez l'animation : vous obtiendrez l'animation ci-contre.

placer = function (xstart, ystart, nbrl, nbrc, v1x, v1y, v2x, v2y) {
var depth = 0;
for(var i = 0; i < nbrl; i++) {
for(var j = 0; j < nbrc; j++) {
var mc = attachMovie("point", "point" + depth, depth);
mc._x = xstart + v1x*j + v2x*i;
mc._y = ystart + v1y*j + v2y*i;
depth++;
}
}	
}
 
placer(80, 25, 10, 5, 10, 5, -5, 15);

 
5. Le code avec ses commentaires
 
On déclare une fonction qui prend 8 arguments. La définition de ces arguments se trouve dans le premier paragraphe de ce tutoriel.
placer = function (xstart, ystart, nbrl, nbrc, v1x, v1y, v2x, v2y) {
 
On déclare une nouvelle variable "depth" ce qui signifie "profondeur" en anglais ! Pourquoi utiliser ce terme ? Par snobisme évidemment, ensuite parce que c'est plus court que "profondeur" et enfin parce que cela fait référence à la fonctions swapDepths() qui permet de gérer les différents plans sur lesquels vous placez vos occurrences. Les points pour lesquels depth sera grand seront au premier plan de l'animation.
var depth = 0;
 
On utilise deux boucles for : i et j sont deux entiers qui vont varier respectivement entre 0 et nbrl - 1 et entre 0 et nbrc - 1. Comme les rappels mathématiques le signalaient déjà (mais après tout la pédagogie est basée sur la répétition :=)) i et j sont les coordonnées du point que nous allons placer.
for(var i = 0; i < nbrl; i++) {
for(var j = 0; j < nbrc; j++) {
 
La fonction attachMovie est une merveille : elle permet de déposer sur la scène princiaple une occurrence d'un clip se trouvant dans la bibliothèque. Il suffit au préalable de saisir un identifiant dans le panneau "propriétés de liaison"... Ces occurrences se nommeront successivement point0, point1, point2...
var mc = attachMovie("point", "point" + depth, depth);
 
Nous définissons l'abscisse de l'occurrence.
mc._x = xstart + v1x*j + v2x*i;
 
Nous définissons l'ordonnée de l'occurrence.
mc._y = ystart + v1y*j + v2y*i;
 
La variable depth est majorée de une unité après chaque appel à la fonction attachMovie ce qui nous assure de l'unicité du nom donné à chaque occurrence...
depth++;
 
Ces deux accolades mettent un terme aux deux boucles for.
}
}
 
Cette accolade termine la déclaration de la fonction placer.
}
 
Ceci est un appel à la fonction placer. Entre parenthèses se trouvent les valeurs numériques des 8 paramètres. Valeurs que j'ai choisies totalement arbitrairement. Le premier point aura 80 pour abscisse et 25 pour ordonnée. 50 occurrences seront placées réparties en 10 lignes et 5 colonnes. Les coordonnées des vecteurs de la base seront (10 ; 5) et (-5 ; 15).
placer(80, 25, 10, 5, 10, 5, -5, 15);
 
6. Idées
 
Si vous avez compris dans les grandes lignes comment agit la fonctionner placer(), vous n'aurez aucun mal à la modifier pour créer un quadrillage avec des lignes horizontales et verticales, ou pour construire un damier, un repère orthonormé si vous êtes prof de maths...
 
Accueil | Tutoriaux