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;
public class formes extends Sprite {
public function formes():void {
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
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).
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);
ligneD.graphics.moveTo(450, 50);
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);
rectangle.graphics.drawRect(300,100,100,50);
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();
rectRond.graphics.lineStyle(4, 0x0000FF);
rectRond.graphics.beginFill(0xFF3F8E);
rectRond.graphics.drawRoundRect (40,250,80,120,25,25);
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);
triangle.graphics.beginFill(0xFF0000);
triangle.graphics.moveTo(50, 50);
triangle.graphics.lineTo(50, 150);
triangle.graphics.lineTo(150, 50);
triangle.graphics.lineTo(50, 50);
addChild(triangle);
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);
cercle.graphics.beginFill(0xE4CF12);
cercle.graphics.drawCircle (200,150,60);
addChild(cercle);
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();
ellipse.graphics.lineStyle(2, 0x10701A);
ellipse.graphics.beginFill(0x1FD831);
ellipse.graphics.drawEllipse (200, 300, 150, 60);
addChild(ellipse);
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 ();
ligneC.graphics.lineStyle(2, 0x00FF00);
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.addChild(ligneC);
curveTo :
ligneC.graphics.moveTo(200, 50);
ligneC.graphics.curveTo(250,-20, 300,50);
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.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);
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;
import flash.display.Shape;
public class formes extends Sprite {
public function formes():void {
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);
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);
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);
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);
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);
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();
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();
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();
}
}
}