Accueil | Tutoriaux

Tutoriaux : Tracer dynamiquement une étoile
 

1. Introduction
 
Mon goût pour le code me pousse souvent à ne rien mettre dans la bibliothèque de mes animations. Si j'ai besoin d'une forme géométrique, j'utilise ActionScript et quelques connaissances mathématiques pour tracer dynamiquement la forme voulue. Un visiteur de zoneflash m'a demandé d'écrire un tutoriel pour expliquer comment tracer une étoile. Dans un prochain tutoriel cette forme géométrique servira de masque et permettra de réaliser des transitions entre des photos. Observez l'animation ci-dessous : à l'aide des glissières pour pouvez faire varier les paramètres r1 et r2 qui représentent les rayons de deux cercles tandis que n représente le nombre de branches. Le bouton qui se trouve sous l'étoile permet de faire apparaître les deux cercles utilisés pour la construction de l'étoile.
 
 
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.
- Il n'y a rien dans la bibliothèque de l'animation et la scène principale et vide !
 
3. Le code et l'animation obtenue
 
Dans le panneau "action" de l'image clé n°1, placez le code ci-dessous.
  
MovieClip.prototype.tracerUneEtoile = function(r1, r2, n, c1, c2) {
var da = Math.PI/n;
this.lineStyle(0, c1, 100);
this.moveTo(r2, 0);
this.beginFill(c2, 100);
for(var i = 1; i < 2*n + 1; i++) {
var a = da*i;
var r = (i % 2 == 0) ? r2 : r1;
var x = r*Math.cos(a);
var y = r*Math.sin(a);
this.lineTo(x, y);
}
this.endFill();
}
 
this.createEmptyMovieClip("etoile", 0);
etoile._x = 150;
etoile._y = 150;
etoile.tracerUneEtoile(75, 140, 8, "0x336600", "0x66CC00");
 
 
4. Le code avec ses commentaires
 
Pour obtenir une étoile, il suffit de définir deux rayons r1 et r2 ainsi qu'un nombre n de branches. Ensuite il suffit de faire des rotations successives d'angle 180/n ° et de placer alternativement un point sur le cercle de rayon r1 puis sur le cercle de rayon r2.
 
Nous allons créer une fonction qui permettra de tracer une étoile dans un clip. Cette étoile se caractérise par les valeurs des deux rayons r1, r2, par le nombre n de branches et par les couleurs c1 et c2 utilisées. La couleur du trait (périmètre de l'étoile) est définie par c1 tandis que la couleur de remplissage (surface de l'étoile) est définie par c2.
MovieClip.prototype.tracerUneEtoile = function(r1, r2, n, c1, c2) {
 
da représente la valeur en radians de l'angle de rotation entre deux sommets successifs.
var da = Math.PI/n;
 
Nous définissons les options de tracé : filet maigre, couleur c1 et opacité égale à 100%.
this.lineStyle(0, c1, 100);
 
La pointe de notre stylo virtuel est placé au point de coordonnées (r2, 0).
this.moveTo(r2, 0);
 
Nous définissons les options de remplissage : couleur c2 et opacité à 100 %
this.beginFill(c2, 100);
 
Une boucle for est utilisée indexée sur i variant dans l'intervalle [1, 2n + 1[. L'étoile possède n branches donc elle est définie par 2n sommets que nous relirons entre eux.
for(var i = 1; i < 2*n + 1; i++) {
 
a est l'angle formé entre le sommet i de l'étoile et l'axe des abscisses.
var a = da*i;
 
Si i est pair r vaut r2 sinon r vaut r1. La variable r prendra successivement les valeurs r1 et r2. Cette variable r représente le rayon du cercle sur lequel le prochain sommet sera placé.
var r = (i % 2 == 0) ? r2 : r1;
 
On détermine l'abscisse x et l'ordonnée y du prochain sommet de l'étoile.
var x = r*Math.cos(a);
var y = r*Math.sin(a);
 
On relie les deux sommets consécutifs de l'étoile.
this.lineTo(x, y);
 
fin de la boucle for
}
 
Fin du remplissage.
this.endFill();
 
fin de la fonction tracerUneEtoile.
}
 
On crée sur la scène principale un clip vide dont le nom d'occurrence est "etoile".
this.createEmptyMovieClip("etoile", 0);
 
On définit l'abscisse et l'ordonnée du clip "etoile" qui se trouvera ainsi au centre de la scène.
etoile._x = 150;
etoile._y = 150;
 
On trace une étoile à l'intérieur du clip etoile en donnant les valeurs numériques des rayons, le nombre de branches, les couleurs de trait et de remplissage.
etoile.tracerUneEtoile(75, 140, 8, "0x336600", "0x66CC00");
 
 
 
 
 
Accueil | Tutoriaux