Code Flash ActionScript AS3 pour dessiner dynamiquement des formes : ligne droite, cercle, rond, , triangle, carré, rectangle
Créez une nouvelle animation AS3 nommée « formes.fla ». Nous allons y dessiner différentes formes vectorielles uniquement en code AS3.
Associez-lui la classe de document « formes ».
Créez le fichier de code actionscript AS3 « formes.as ».
Dans ce fichier importez les classes « Sprite » et « Shape » :
package {
import flash.display.Sprite;
import flash.display.Shape;
Créez la classe publique « formes » liée à la classe « Sprite » :
public class formes extends Sprite {
Puis la fonction constructeur publique « formes » :
public function formes():void {
Le fichier est prêt à recevoir le code pour tracer dynamiquement les différentes formes vectorielles.
RAPPEL SUR LE CODAGE DES COULEURS ACTIONSCRIPT EN AS3
Pour obtenir le codage d'une couleur particulière : récupérez le code hexadécimal
dans la palette de couleur de l'interface Flash,
puis remplacez le signe # en tête par « 0x » (zéro x).
Code Flash Actionscript AS3 POUR TRACER UNE LIGNE DROITE
On va créerune nouvelle occurrence de l'objet Shape, nommée « ligneD »
var ligneD:Shape = new Shape ();
On définit l'épaisseur et la couleur de la ligne :
ligneD.graphics.lineStyle(2, 0x000000);
On précise les coordonnées du premier point de la ligne :
ligneD.graphics.moveTo(450, 50);
Celles du second point :
ligneD.graphics.lineTo(400, 300);
On ajoute l'occurrence à la liste d'affichage :
addChild(ligneD);
Code Flash Actionscript AS3 pour TRACER UN RECTANGLE
On créé une nouvelle occurrence d'objet Shape nommée « rectangle » :
var rectangle:Shape = new Shape();
On définit la couleur de remplissage du rectangle :
rectangle.graphics.beginFill(0x0000FF);
On trace le rectangle en précisant dans les arguments : les coordonnées du point supérieur gauche puis la largeur et la hauteur du rectangle :
rectangle.graphics.drawRect(300,100,100,50);
On ajoute l'occurrence à la liste d'affichage :
addChild(rectangle);
Code Flash Actionscript AS3 POUR TRACER UN RECTANGLE AVEC CONTOUR ET COINS ARRONDIS
On créé une nouvelle occurrence d'objet Shape nommée « rectRond » :
var rectRond:Shape = new Shape();
On définit l'épaisseur et la couleur du contour :
rectRond.graphics.lineStyle(4, 0x0000FF);
On définit la couleur de remplissage du rectangle :
rectRond.graphics.beginFill(0xFF3F8E);
Définition des paramètres du rectangle avec « drawRoundRect » : coordonnées du coin supérieur gauche, largeur, hauteur puis largeur et hauteur des bords arrondis :
rectRond.graphics.drawRoundRect (40,250,80,120,25,25);
On ajoute l'occurrence à la liste d'affichage :
addChild(rectRond);
Code Flash Actionscript AS3 POUR TRACER UN TRIANGLE ROUGE
Pour tracer un triangle rouge, on créé une nouvelle occurrence d'objet Shape nommée « triangle » :
var triangle:Shape = new Shape();
triangle.graphics.beginFill(0xFF0000);
coordonnées du point de démarrage :
triangle.graphics.moveTo(50, 50);
coordonnées du point 2 :
triangle.graphics.lineTo(50, 150);
coordonnées du point 3 :
triangle.graphics.lineTo(150, 50);
coordonnées du point de départ pour le rejoindre :
triangle.graphics.lineTo(50, 50);
addChild(triangle);
Code Flash Actionscript AS3 POUR TRACER UN CERCLE JAUNE
On créé une nouvelle occurrence d'objet Shape nommée « cercle » :
var cercle:Shape = new Shape();
cercle.graphics.beginFill(0xE4CF12);
On détermine avec « drawCircle » les coordonnées du centre, puis le rayon du cercle :
cercle.graphics.drawCircle (200,150,60);
addChild(cercle);
Code Flash Actionscript AS3 pour tracer une ellipse vert clair avec contour vert foncé
On créé une nouvelle occurrence de Shape nommée « ellipse » :
var ellipse:Shape = new Shape();
On définit l'épaisseur et la couleur du contour :
ellipse.graphics.lineStyle(2, 0x10701A);
On définit la couleur du remplissage :
ellipse.graphics.beginFill(0x1FD831);
On définit avec « drawEllipse » les coordonnées du coin supérieur gauche du rectangle qui contient l'ellipse, puis la largeur et la hauteur de cette ellipse:
ellipse.graphics.drawEllipse (200, 300, 150, 60);
addChild(ellipse);
Code Flash Actionscript AS3 POUR TRACER UNE LIGNE COURBE VERTE
On créé une nouvelle occurrence de Shape nommée « ligneC » :
var ligneC:Shape = new Shape ();
On définit l'épaisseur et la couleur de la ligne :
ligneC.graphics.lineStyle(2, 0x00FF00);
On définit les coordonnées du point de départ :
ligneC.gr
ligneC.graphics.moveTo(200, 50);
On définit les paramètres de la ligne courbe avec « curveTo » :
ligneC.graphics.curveTo(250,-20, 300,50);
addChild(ligneC);
curveTo :
Les paramètres de la ligne « moveTo » définissent tout d'abord les coordonnées du point de départ.
ligneC.graphics.moveTo(200, 50);
Les deux derniers paramètres de la commande « curveTo » sont les coordonnées du point d'arrivée. Les deux premiers ont les coordonnées du point de courbure du second point de la courbe. Il s'agit des coordonnées de l'extrémité du vecteur qui définit la courbure de l'arc.
ligneC.graphics.curveTo(250,-20, 300,50);
Sur le même principe on va tracer une lune mauve avec un contour violet:
var lune:Shape = new Shape();
lune.graphics.lineStyle(3,0x502E74);
lune.graphics.beginFill(0x8B5ABE);
// point de départ de coordonnées 400, 200
lune.graphics.moveTo(400, 200);
// point d'arrivée de coordonnées 400, 300
lune.graphics.curveTo(300, 250, 400, 300);
// retour au point 400, 200, avec un autre point de contrôle qui permet de tracer une seconde courbe
lune.graphics.curveTo(350, 250, 400, 200);
addChild(lune);
Code Flash Actionscript AS3 complet pour dessiner des formes
package {
import flash.display.Sprite;
import flash.display.Shape;
public class formes extends Sprite {
public function formes():void {
// tracé d'une ligne droite noire
var ligneD:Shape = new Shape ();
// épaisseur et couleur
ligneD.graphics.lineStyle(2, 0x000000);
// point 1
ligneD.graphics.moveTo(450, 50);
// point 2
ligneD.graphics.lineTo(400, 300);
addChild(ligneD);
// tracé d'un rectangle bleu
var rectangle:Shape = new Shape();
rectangle.graphics.beginFill(0x0000FF);
// position coin supérieur gauche, puis largeur et hauteur
rectangle.graphics.drawRect(300,100,100,50);
addChild(rectangle);
// tracé d'un rectangle à bords arrondis avec contour
var rectRond:Shape = new Shape();
rectRond.graphics.lineStyle(4, 0x0000FF);
rectRond.graphics.beginFill(0xFF3F8E);
rectRond.graphics.drawRoundRect (40,250,80,120,25,25);
addChild(rectRond);
// tracé d'un triangle rouge
var triangle:Shape = new Shape();
triangle.graphics.beginFill(0xFF0000);
// point de démarrage
triangle.graphics.moveTo(50, 50);
// point 2
triangle.graphics.lineTo(50, 150);
// point 3
triangle.graphics.lineTo(150, 50);
// point de départ
triangle.graphics.lineTo(50, 50);
addChild(triangle);
// tracé d'un cercle jaune
var cercle:Shape = new Shape();
cercle.graphics.beginFill(0xE4CF12);
// centre, rayon)
cercle.graphics.drawCircle (200,150,60);
addChild(cercle);
// tracé d'une ellipse verte
var ellipse:Shape = new Shape();
// trait vert foncé
ellipse.graphics.lineStyle(2, 0x10701A);
// remplissage vert clair
ellipse.graphics.beginFill(0x1FD831);
// point supérieur gauche, largeur, hauteur
ellipse.graphics.drawEllipse (200, 300, 150, 60);
addChild(ellipse);
// tracé d'une ligne courbe verte
var ligneC:Shape = new Shape ();
ligneC.graphics.lineStyle(4, 0x00FF00);
ligneC.graphics.moveTo(200, 50);
ligneC.graphics.curveTo(250, -20, 300,50);
addChild(ligneC);
// tracé d'une lune
var lune:Shape = new Shape();
lune.graphics.lineStyle(3,0x502E74);
lune.graphics.beginFill(0x8B5ABE);
// départ au point 400, 200
lune.graphics.moveTo(400, 200);
// point d'arrivée de coordonnées 400, 300
lune.graphics.curveTo(300, 250, 400, 300);
// retour au point 400, 200
lune.graphics.curveTo(350, 250, 400, 200);
graphics.endFill();
}
}
