[Bazyll]

Auteur : bazyll
Mail : bazyll@flash-forum.net
Url : http://www.flash-forum.net
Date de création : 23-07-2003
Version : img:flmx

img:coupe

Introduction
Dans Flash MX, de nouvelles méthodes de dessins ont été ajoutées au langage ActionScript, grace à ces API de dessins
il devient facile de créez des éléments visuels avec du code.
Ce tutoriel va faire le tour des méthodes disponibles ( hormis les dégradés qui seront abordés dans une partie annexe ) pour vous donner les bases nécessaires à l'utilisation des API de dessin.



Dessiner un segment (une ligne droite)
Méthodes : lineStyle - lineTo

lineStyle

Citer

Description : Méthode permettant de définir l'épaisseur, la couleur et l'alpha (transparence) d'un trait.

Syntaxe :

CODE

MovieClip.lineStyle (epaisseur, couleur, alpha);

paramètres :

epaisseur : Un entier allant de 0 à 255. Si aucun nombre n’est spécifié, ou si le paramètre est undefined, aucune

ligne n’est tracée.

• couleur : valeur hexadécimale. Si aucune valeur n’est indiquée, Flash utilise 0x000000 (noir).
  
• alpha : Un entier allant de 0 à 100. Lorsque aucune valeur n’est indiquée, Flash utilise 100 (uni).

lineTo

Citer

Description : Méthode permettant de tracer un trait droit.
Il faut considérer un tracé comme si l'on utilisait un "stylo virtuel" dans un clip (attention ceci est une métaphore, il

n'y as pas de stylo dans flash ), ce "stylo" possède une position selon x et y, par défaut il se trouve sur l'origine du

clip en (0,0).
L'origine du tracé dépend donc de la position courante de ce "stylo virtuel" et la fonction lineTo permet de définir un

point d'arrivée et d'ensuite tracé immédiatement la droite voulue.

Syntaxe :

CODE

MovieClip.lineTo (x, y);

paramètres :

• x et y sont 2 entiers indiquand la position horizontale et verticale par rapport au point d'alignement du clip contenant
  
  le tracé.
  

[u]Exemple

CODE

//On crée un nouveau movieclip vide qui va contenir notre segment, on appelle ce clip "ligne".    this.createEmptyMovieClip("ligne",0); //définition du "style" de la ligne (épaisseur, couleur)    ligne.lineStyle(1, 0xff0012); //création de la ligne    ligne.lineTo(10, 100);

ici, les coordonées (10, 100) sont les coordonnées (x, y) du point d'arrivée de la ligne, en clair la ligne sera tracée entre 2 points :
point de départ: (0,0)
point d'arrivé: (10,100)

Avec cette méthode, tous les dessins commencent au point (0,0)
maintenant , comment faire pour dessiner une ligne ayant pour point de départ un point ayant des coordonnées autre que (0,0)

Note : La scene (ou le _root si vous préférez) est un clip. Il est donc possible de dessiner directement sur la scene principale en ciblant avec l'instruction "this".

Le code suivant va donc dessiner la meme ligne que précédemment, mais directement sur la scène :

CODE

//définition du "style" de la ligne (épaisseur, couleur)    this.lineStyle(1, 0xff0012); //création de la ligne    this.lineTo(10, 100);

Méthodes : lineStyle - lineTo - moveTo
moveTo

Citer

Description : Méthode permettant de définir les coordonées du point de départ d'une ligne.

Syntaxe :

CODE

MovieClip.moveTo (x, y);

paramètres :

x et y sont 2 entier indiquant la postition verticale et horizontale par rapport au point d'alignement du clip contenant le tracé.
Si les parametres sont absents, cette méthode échoue.

[u]Exemple

CODE

this.createEmptyMovieClip("ligne2",1); ligne2.lineStyle(1, 0x336633,50); //On commence à dessiner la ligne au point d'abscisse 100, et d'ordonnée 150. ligne2.moveTo(100, 150); //création de la ligne ligne2.lineTo(200, 180);

Avec ce code une ligne sera tracée entre le point (100,150) et le point (200,180).


Dessiner une ligne courbe
Méthodes : lineStyle - curveTo - moveTo

curveTo

Citer

Description : Méthode permettant de dessiner une courbe avec le style de trait courant de la position de dessin actuelle à (ancreX, ancreY), utilisant le point spécifié par (contrôleX, contrôleY).

Syntaxe :

CODE

MovieClip.curveTo (contrôleX, contrôleY, ancreX, ancreY);

paramètres :

controleX et controleY sont 2 entier indiquant la postition verticale et horizontale par rapport au point d'alignement du clip contenant le tracé.

• ancreX et ancreY sont 2 entier indiquant la postition verticale et horizontale par rapport au point d'alignement du clip contenant le tracé du point d'ancrage suivant.
  Si les parametres sont absents, ces méthodes échouent.

[u]Exemple

CODE

this.createEmptyMovieClip("courbe",2); //définition du "style" de la courbe (épaisseur, couleur)    courbe.lineStyle(2,0xffcc88); //On commence à dessiner la courbe au point d'abscisse 150, et d'ordonnée 20.    courbe.moveTo(150,20); //création de la courbe    courbe.curveTo(80,50,60,10);

On défini deux points de controle (x,y) ici (80,50) et deux points d'ancrage (x,y) ici (60,10)


Dessiner et remplir un rectangle, un carré
Méthodes : lineStyle - lineTo - moveTo - beginFill - endFill

beginFill

Citer

Description : Méthode indiquant le début du dessin à "remplir".

Syntaxe :

CODE

MovieClip.beginFill (rvb, alpha);

paramètres :

• rvb : Valeur hexadécimale. Si cette valeur n'est pas fournie ou si elle est indéfinie, aucun remplissage n'est créé.
  
• alpha : Un entier allant de 0 à 100. Lorsque aucune valeur n’est indiquée, Flash utilise 100 (uni).
  

endFill

Citer

Description : Méthode appliquant un remplissage aux traits et courbes ajoutés depuis le dernier appel de la méthode
beginFill ou beginGradientFill.Flash utilise le remplissage spécifié lors de l'appel précédent à beginFill ou beginGradientFill.
Si la position de dessin actuelle n'est pas égale à la position précédente spécifiée dans une méthode moveTo et qu'un remplissage est défini, le trajet est fermé avec un trait, puis rempli.

Syntaxe :

CODE

MovieClip.endFill();

[u]Exemple

CODE

// fonction pour dessiner un carré this.dessinecarre = function() {    this.createEmptyMovieClip("carre",3);    carre.beginFill(0x33dcff,100);    carre.moveTo(50,50);    carre.lineStyle(1,0x000000);    carre.lineTo(50,100);    carre.lineTo(100,100);    carre.lineTo(100,50);    carre.lineTo(50,50);    carre.endFill(); };

La méthode beginFill va servir à remplir le carre d'une couleur : 0x33dcff; et d'un alpha : 100.
Le remplissage prend fin apres le code endFill().


Dessiner et remplir une forme ronde avec curveTo
Méthodes : lineStyle - curveTo - moveTo - beginFill - endFill

[u]Exemple

CODE

// fonction pour dessiner une forme ronde avec curveTo this.dessinecercle2 = function() {    this.createEmptyMovieClip("cercle2", 4);    with (cercle2) {        lineStyle(1, 0x990000, 100);        beginFill(0x3399cc);        moveTo(50, 50);        curveTo(60, 50, 60, 40);        curveTo(60, 30, 50, 30);        curveTo(40, 30, 40, 40);        curveTo(40, 50, 50, 50);        endFill();    } };

Tracer une vrai cercle avec la méthode curveTo requiert des connaissances un peu plus avancées, cela sera donc étudié prochainement, en complément de ce tutoriel.
Note : remarquez l'utilisation de with() qui nous évite d'avoir à spécifier le nom "cercle2" à chaque opération.

Dessiner un cercle Sans curveTo
Méthodes : lineStyle - lineTo - moveTo

[u]Exemple

CODE

this.dessinecercle = function() {    this.createEmptyMovieClip("cercle",5);    cercle.lineStyle(30,0x25ff36);    cercle.moveTo(100,200);    cercle.lineTo(100,201); };

l'astuce pour dessiner un cercle sans la methode curveTo consiste à dessiner un segment tres court (entre les points d'ordonées 200 et 201 par exemple) d'une ligne tres épaisse (épaisseur 30 par exemple)


Effacer des dessins
Méthodes : Clear

Clear

Citer

Description : Méthode qui supprime toutes les commandes de dessin associées à un clip.

Syntaxe :

CODE

MovieClip.clear();

tout ce que vous aurez dessiné sur la scene elle meme pourra etre effacer par le code :

CODE

this.clear();

[u]Exemple
Si vous voulez effacer par exemple le carré construit dans le clip "carre", il suffit de cibler de cette manière :

CODE

carre.clear();

Note :les fonctions "dessinecercle", "dessinecercle2", "dessinecarre", peuvent etre appelées en cliquant sur un bouton, de la maniere suivante :

CODE

btcercle.onRelease = function() {    dessinecercle(); };

Note : Le .fla ci-joint reprend et illustre ce tutoriel.

Fichier(s) joint(s)

•  api.fla (0octets)
  Nombre de téléchargements: 417
•  api.swf (0octets)
  Nombre de téléchargements: 1423