tutoriaux flash et actionscript

Tutoriaux :tracer un polygone dont on peut déplacer les sommets

1. Introduction

Dans un de mes anciens tutoriaux, j'avais détaillé la réalisation d'une animation qui permettait de déplacer un clip en suivant les côtés d'un polygone. C'est en lisant ce tutoriel qu'un lecteur de zoneflash a eu l'idée de me poser la question suivante : "comment faire pour tracer un polygone tout en permettant aux internautes de déplacer ses sommets ?". Merci, bonne question, bonne idée de tutoriel qui devrait intéresser de nombreux utilisateurs de Flash. Ci-dessous un polygone régulier (10 sommets placés sur un cercle) dont vous pouvez déplacer les sommets à l'aide de votre souris. Les lignes suivantes vous permettront de suivre pas à pas la conception de cette animation.

2. Dans la bibliothèque et sur la scène principale

- Ouvrez le logiciel Flash et créez un nouveau document. Définissez les dimensions de l'animation : 300 pixels de largeur et 300 pixels de hauteur.
- Dans le panneau "propriétés du document", définissez la cadence de l'animation à 30 images par seconde.
- La bibliothèque et la scène principale sont vides : nous allons pouvoir passer au code !

3. Le code et l'animation obtenue

Dans la première image clé de la scène principale, placez le code suivant :

nbr = 10;
cote = 6;
cx = 150;
cy = 150;
rayon = 100;
xmax = 275;
xmin = 25;
ymin = 25;
ymax = 275;
 
this.createEmptyMovieClip("zone", 0);
zone.lineStyle(0, 0, 100);
zone.beginFill("0x999999", 15);
zone.moveTo(xmin, ymin);
zone.lineTo(xmax, ymin);
zone.lineTo(xmax, ymax);
zone.lineTo(xmin, ymax);
zone.lineTo(xmin, ymin);
zone.endFill();
 
this.createEmptyMovieClip("polygone", 1);
 
for (var i = 0; i<nbr; i++) {
var sommet = this.createEmptyMovieClip("sommet"+i, i+2);
var angle = i*2*Math.PI/nbr;
 
with (sommet) {
beginFill(0, 100);
moveTo(-0.5*cote, -0.5*cote);
lineTo(-0.5*cote, 0.5*cote);
lineTo(0.5*cote, 0.5*cote);
lineTo(0.5*cote, -0.5*cote);
lineTo(-0.5*cote, -0.5*cote);
endFill();
_x = cx+rayon*Math.cos(angle);
_y = cy+rayon*Math.sin(angle);
}
 
sommet.onPress = function() {
this.startDrag(false, xmin, ymin, xmax, ymax);
this._parent.onEnterFrame = tracerLePolygone;
};
 
sommet.onRelease = sommet.onReleaseOutside=function () {
this.stopDrag();
delete this._parent.onEnterFrame;
tracerLePolygone();
};
 
}
 
tracerLePolygone = function () {
polygone.clear();
polygone.lineStyle(0, "0x999999", 100);
polygone.moveTo(sommet0._x, sommet0._y);
 
for (var i = 1; i<nbr; i++) {
polygone.lineTo(this["sommet"+i]._x, this["sommet"+i]._y);
}
 
polygone.lineTo(sommet0._x, sommet0._y);
};
 
tracerLePolygone();

4. Le code avec ses commentaires

Comme d'habitude la première partie du programme permet de déclarer les constantes de l'animation. C'est une habitude commode : si vous voulez modifier l'apparence de votre animation il suffit alors de modifier ces quelques constantes sans avoir à modifier la moindre ligne dans le programme "principal". nbr est le nombre de sommets.

nbr = 10;

Les sommets du polygone seront représentés sous la forme de petits carrés. La constante "cote" égale à 6 pixels correspond au côté de ces carrés.

cote = 6;

Les sommets du polygone seront placés initialement sur un cercle dont les coordonnées du centre sont (cx ; cy).

cx = 150;
cy = 150;

La constante "rayon" est égale au rayon du cercle (en pixels) dans lequel le polygone sera inscrit.

rayon = 100;

Les sommets pourront être déplacés à l'aide de la souris. Ce déplacement sera contraint : les abscisses des sommets resteront toujours comprises entre les valeurs "xmin" et "xmax".

xmax = 275;
xmin = 25;

De même les ordonnées des sommets seront toujours comprises entre les valeurs "ymin" et "ymax". Ainsi les sommets pourront être déplacés librement tout en restant à l'intérieur d'un rectangle que nous matérialiserons en le traçant.

ymin = 25;
ymax = 275;

Nous créons un clip vide nommé "zone" que nous plaçons sur le calque de niveau zéro. C'est à l'intérieur de ce clip que nous tracerons le rectangle à l'intérieur duquel les sommets pourront être déplacés.

this.createEmptyMovieClip("zone", 0);

Nous définissons un style de trait : taille (filet maigre), couleur (noir), transparence (100%).

zone.lineStyle(0, 0, 100);

Nous définissons les options de remplissage : couleur (gris foncé), transparence (15%).

zone.beginFill("0x999999", 15);

Nous traçons le rectangle qui délimite la zone dans laquelle les sommets peuvent être déplacés.

zone.moveTo(xmin, ymin);
zone.lineTo(xmax, ymin);
zone.lineTo(xmax, ymax);
zone.lineTo(xmin, ymax);
zone.lineTo(xmin, ymin);

Nous terminons le remplissage du rectangle. Ici, cette ligne est facultative...

zone.endFill();

Nous plaçons sur le calque de niveau 1 un clip vide nommé "polygone". C'est à l'intérieur de ce clip que nous tracerons les côtés du polygone. Lorsque vous créez dynamiquement des clips il faut toujours veiller à les placer sur des calques de niveaux différents...

this.createEmptyMovieClip("polygone", 1);

A l'aide d'une boucle "for" nous allons créer et placer les 10 sommets de notre polygone.

for (var i = 0; i<nbr; i++) {

Nous créons des clips vides qui s'appellent sommet0, sommet1, ... , sommet9 placés respectivement sur les calques de niveau 2, 3, ... , 11. Dans chacun de ces clips, nous allons tracer un carré.

var sommet = this.createEmptyMovieClip("sommet"+i, i+2);

Nous calculons un angle en radians : 2*Math.PI radians correspond à 360 degrés (un tour complet). 2*Math.PI/nbr est l'angle au centre formé par deux sommets consécutifs du polygone régulier.

var angle = i*2*Math.PI/nbr;

A l'intérieur du clip (encore) vide, nous traçons un carré noir (totalement opaque) de côté 6 pixels centré verticalement et horizontalement. Enfin nous initialisons l'abscisse et l'ordonnée de ce clip afin de le placer sur le cercle de centre (cx ; cy) et de rayon 100 pixels. "with" est souvent très utile et permet de faire une "factorisation" du mot "sommet".

with (sommet) {
beginFill(0, 100);
moveTo(-0.5*cote, -0.5*cote);
lineTo(-0.5*cote, 0.5*cote);
lineTo(0.5*cote, 0.5*cote);
lineTo(0.5*cote, -0.5*cote);
lineTo(-0.5*cote, -0.5*cote);
endFill();
_x = cx+rayon*Math.cos(angle);
_y = cy+rayon*Math.sin(angle);
}

Sur chaque sommet nous allons définir une fonction qui sera exécutée lorqu'on cliquera dessus.

sommet.onPress = function() {

Nous obligeons le clip à suivre le déplacement de la souris en contraignant les abscisses à rester comprises entre "xmin" et "xmax" et les ordonnées entre "ymin" et "ymax".

this.startDrag(false, xmin, ymin, xmax, ymax);

this._parent est une référence au clip "parent" du sommet. Il s'agit ici de la scène principale, puisque le clip sommet n'est pas contenu à l'intérieur d'un autre clip. A l'aide de cette ligne de code assez hermétique pour les débutants, nous demandons que la fonction "tracerLePolygone" soit exécutée à chaque image de la timeline de la scène principale.

this._parent.onEnterFrame = tracerLePolygone;

Fin de la fonction onPress.

};

Nous définissons une fonction qui sera exécutée lorsque l'internaute relâchera le bouton de la souris (sur et en dehors du clip sommet).

sommet.onRelease = sommet.onReleaseOutside=function () {

On stoppe le déplacement du clip sommet qui cessera de suivre la souris.

this.stopDrag();

On stoppe l'appel à la fonction "tracerLePolygone" à chaque image de la scène principale.

delete this._parent.onEnterFrame;

On trace le polygone défini par les 10 sommets. Cet appel à la fonction "tracerLePolygone" permet d'éviter les erreurs d'affichage lorsque l'internaute déplace brusquement un des sommets et relâche le bouton de la souris à l'extérieur du petit carré représentant le sommet... Testez ce programme en enlevant cette ligne de code pour comprendre la subtilité...

tracerLePolygone();

Fin des fonctions onRelease et onReleaseOutside.

};

Fin de la boucle "for".

}

Nous allons définir une fonction qui tracera les côtés du polygone en reliant les 10 sommets entre eux.

tracerLePolygone = function () {

On efface tous les segments qui ont été tracés à l'intérieur du clip "polygone" puis on définit un style de trait : taille (filet maigre), couleur (gris foncé) et transparence (100%).

polygone.clear();
polygone.lineStyle(0, "0x999999", 100);

On place la pointe de notre "stylo virtuel" à l'endroit où se trouve le premier sommet qui s'appelle "sommet0".

polygone.moveTo(sommet0._x, sommet0._y);

A l'aide d'une boucle "for" nous relions les différents sommets entre eux.

for (var i = 1; i<nbr; i++) {
polygone.lineTo(this["sommet"+i]._x, this["sommet"+i]._y);
}

Nous relions le dernier sommet qui s'appelle "sommet9" au premier sommet, c'est à dire à "sommet0". Ainsi le dernier côté du polygone a bien été tracé.

polygone.lineTo(sommet0._x, sommet0._y);

Fin de la fonction "tracerLePolygone".

};

On trace le polygone au moment du chargement de l'animation.

tracerLePolygone();

Accueil | Tutoriaux