Dessin de lignes et de courbes -- Flash CS3

Tous les graphismes qu'il est possible de réaliser à l'aide d'une instance de la classe Graphics sont des tracés à l'aide de lignes et de courbes. Tous les dessins réalisés en ActionScript doivent donc suivre les mêmes étapes :

Sous-rubriques

Définition de styles de ligne et de remplissage

Pour utiliser la propriété graphics d'une instance de Shape, Sprite ou MovieClip, vous devez d'abord définir le style (épaisseur et couleur de la ligne, couleur de remplissage) à utiliser. De la même manière qu'avec les outils de dessin d'Adobe Flash CS3 Professional ou de toute autre application de dessin, en ActionScript vous pouvez dessiner avec ou sans trait, et avec ou sans remplissage. Pour indiquer l'apparence du trait, utilisez la méthode lineStyle() ou lineGradientStyle(). Pour créer une ligne pleine, utilisez la méthode lineStyle(). Lors de l'appel de cette méthode, les valeurs les plus courantes à indiquer sont les trois premiers paramètres : épaisseur de ligne, couleur de ligne et niveau d'opacité (alpha). Par exemple, la ligne de code suivante indique que la forme myShape doit tracer des lignes de deux pixels d'épaisseur, en rouge (0x990000) et avec une opacité de 75 % :

myShape.graphics.lineStyle(2, 0x990000, .75);

La valeur par défaut du paramètre alpha est 1.0 (100 %), vous pouvez donc le négliger si vous souhaitez tracer une ligne entièrement opaque. La méthode lineStyle() accepte également deux paramètres supplémentaires pour l'indice de lissage des pixels et le mode de mise à l'échelle. Pour plus d'informations sur ces paramètres, consultez la description de la méthode Graphics.lineStyle() dans le manuel Référence du langage et des composants ActionScript 3.0.

Pour créer une forme remplie, appelez les méthodes beginFill(), beginGradientFill() ou beginBitmapFill() avant de débuter le dessin. La plus élémentaire de ces trois méthodes, beginFill() reçoit deux paramètres : la couleur de remplissage et, éventuellement, la valeur d'opacité (alpha) de celle-ci. Par exemple, pour tracer une forme avec un remplissage vert uni, utilisez le code suivant (on suppose ici que vous dessinez dans un objet nommé myShape):

myShape.graphics.beginFill(0x00FF00);

L'appel d'une méthode de remplissage annule implicitement le remplissage précédemment défini avant la mise en œuvre du nouveau. L'appel d'une méthode qui spécifie un style de trait remplace le style de trait précédent, mais ne modifie pas le remplissage précédemment défini, et vice-versa.

Après spécifié le style de ligne et de remplissage, l'étape suivante consiste à indiquer le point de départ du dessin. L'instance de Graphics possède un point de traçage, tout comme la pointe d'un crayon sur une feuille de papier. Quel que soit l'emplacement du point de traçage, il représente l'origine de l'action de dessin à venir. Initialement, un objet Graphics débute avec son point de traçage aux points 0, 0 dans l'espace de coordonnées de l'objet dans lequel il dessine. Pour que le tracé débute en un autre point, appelez la méthode moveTo() avant d'appeler une des méthodes de dessin. Cet appel peut être comparé à l'action de lever la pointe du crayon du papier et de l'amener à un nouvel emplacement.

Lorsque le point de traçage est en place, utilisez une série d'appels aux méthodes lineTo() (pour tracer des lignes droites) et curveTo() (pour tracer des courbes).

Pendant le traçage du dessin, si vous avez indiqué une couleur de remplissage vous pouvez ordonner à Flash Player de fermer le remplissage en appelant la méthode endFill(). Si vous n'avez pas tracé une forme close (autrement dit, si lors de l'appel de la méthode endFill() le point de traçage n'est pas sur les coordonnées du point de départ de la forme), lorsque vous appelez la méthode endFill(), Flash Player ferme automatiquement la forme en traçant une ligne droite entre le point de traçage actuel et l'emplacement spécifié dans le dernier appel à la méthode moveTo(). Si vous avez débuté un remplissage et n'avez pas appelé endFill(), tout appel à beginFill() (ou à l'une des autres méthodes de remplissage) ferme le remplissage actif et en débute un nouveau.

Dessin de lignes droites

Lorsque vous appelez la méthode lineTo(), l'objet Graphics trace une ligne droite (en utilisant le style de ligne que vous avez spécifié) entre le point de traçage actuel et les coordonnées que vous transmettez en paramètres à cette méthode. Par exemple, cette ligne de code place le point de traçage aux coordonnées 100, 100 puis trace une ligne jusqu'au point 200, 200 :

myShape.graphics.moveTo(100, 100);
myShape.graphics.lineTo(200, 200);

var triangleHeight:uint = 100;
var triangle:Shape = new Shape();

// red triangle, starting at point 0, 0
triangle.graphics.beginFill(0xFF0000);
triangle.graphics.moveTo(triangleHeight/2, 0);
triangle.graphics.lineTo(triangleHeight, triangleHeight);
triangle.graphics.lineTo(0, triangleHeight);
triangle.graphics.lineTo(triangleHeight/2, 0);

// green triangle, starting at point 200, 0
triangle.graphics.beginFill(0x00FF00);
triangle.graphics.moveTo(200 + triangleHeight/2, 0);
triangle.graphics.lineTo(200 + triangleHeight, triangleHeight);
triangle.graphics.lineTo(200, triangleHeight);
triangle.graphics.lineTo(200 + triangleHeight/2, 0);

this.addChild(triangle);

Dessin de courbes

La méthode curveTo() dessine une courbe de Bézier. Elle trace un arc entre deux points (appelés points d'ancrage) courbé en direction d'un troisième point (appelé point de contrôle). L'objet Graphics utilise la position de traçage actuelle comme premier point d'ancrage. Lorsque vous appelez la méthode curveTo(), vous devez lui transmettre quatre paramètres : les coordonnées x et y du point de contrôle, puis les coordonnées x et y du second point d'ancrage. Par exemple, le code suivant trace une courbe entre le point 100, 100 et le point 200, 200. Le point de contrôle ayant les coordonnées 175, 125, la courbe est orientée vers la droite puis vers le bas :

myShape.graphics.moveTo(100, 100);
myShape.graphics.curveTo(175, 125, 200, 200);

L'exemple suivant trace des objets circulaires rouges et verts avec une largeur et une hauteur de 100 pixels. Notez qu'en raison même de la nature de l'équation de Bézier, ces cercles ne sont pas parfaits :

var size:uint = 100;
var roundObject:Shape = new Shape();

// red circular shape
roundObject.graphics.beginFill(0xFF0000);
roundObject.graphics.moveTo(size / 2, 0);
roundObject.graphics.curveTo(size, 0, size, size / 2);
roundObject.graphics.curveTo(size, size, size / 2, size);
roundObject.graphics.curveTo(0, size, 0, size / 2);
roundObject.graphics.curveTo(0, 0, size / 2, 0);

// green circular shape
roundObject.graphics.beginFill(0x00FF00);
roundObject.graphics.moveTo(200 + size / 2, 0);
roundObject.graphics.curveTo(200 + size, 0, 200 + size, size / 2);
roundObject.graphics.curveTo(200 + size, size, 200 + size / 2, size);
roundObject.graphics.curveTo(200, size, 200, size / 2);
roundObject.graphics.curveTo(200, 0, 200 + size / 2, 0);

this.addChild(roundObject);