Script Flash pour dessiner dynamiquement des formes avec ActionScipt AS3

Script Flash pour dessiner dynamiquement des formes avec ActionScipt AS3

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 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).

SCRIPT FLASH 3 POUR TRACER UNE LIGNE DROITE EN ACTIONSCRIPT AS 3

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);

SCRIPT FLASH 3 POUR TRACER UN RECTANGLE EN ACTIONSCRIPT AS 3

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);

SCRIPT FLASH 3 POUR TRACER UN RECTANGLE AVEC CONTOUR ET COINS ARRONDIS EN ACTIONSCRIPT AS3

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);

SCRIPT FLASH CS 3 POUR TRACER UN TRIANGLE ROUGE EN ACTIONSCRIPT AS3

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);

SCRIPT FLASH POUR TRACER UN CERCLE JAUNE EN ACTIONSCRIPT AS3

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);

SCRIPT FLASH CS3 Pour tracer une ellipse vert clair avec contour vert foncé EN ACTIONSCRIPT AS3

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);

SCRIPT FLASH CS3 POUR TRACER UNE LIGNE COURBE VERTE EN ACTIONSCRIPT AS3

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);

SCRIPT FLASH CS3 CODE COMPLET EN ACTIONSCRIPT AS3

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();

}

}

}