Créer des dessins vectoriels dans Flash en ActionScript 3 (AS3)
Nous allons étudier les différentes méthodes de la classe Graphics afin de créer en AS3, des rectangles, des carrés, des ellipses. On affectera à ces dessins, un remplissage ou un contour.
N'hésitez par à relire l'article sur les classes Shape et Graphics.
Pour créer un rectangle, nous utilisons la méthode drawRect().
Pour créer un rectangle aux coins arrondis, nous utilisons la méthode drawRoundRect().
Pour créer un cercle, nous utilisons la méthode drawCircle().
Pour créer une ellipse, nous utilisons la méthode drawEllipse().
Dessins avec un remplissage
Le remplissage se fait avec ma méthode beginFill().
Actionscript:
-
// rectangle bleu
-
var rectangle:Shape = new Shape ();
-
rectangle.graphics.beginFill(0x0000FF);
-
rectangle.graphics.drawRect(5, 5, 100, 30);
-
this.addChild(rectangle);
-
// rectangle bleu aux coins arrondis
-
var rectangleRond:Shape = new Shape ();
-
rectangleRond.graphics.beginFill(0x0000FF);
-
rectangleRond.graphics.drawRoundRect(5, 40, 100, 30, 30);
-
this.addChild(rectangleRond);
-
// cercle bleu
-
var cercle:Shape = new Shape ();
-
cercle.graphics.beginFill(0x0000FF);
-
cercle.graphics.drawCircle(55, 100, 25);
-
this.addChild(cercle);
-
// ellipse bleue
-
var ellipse:Shape = new Shape ();
-
ellipse.graphics.beginFill(0x0000FF);
-
ellipse.graphics.drawEllipse(5, 130, 100, 30);
-
this.addChild(ellipse);
-
// carre bleu
-
var carre:Shape = new Shape ();
-
carre.graphics.beginFill(0x0000FF);
-
carre.graphics.drawRect(30, 165, 50, 50);
-
this.addChild(carre);
Dessins avec un remplissage et un contour
Le remplissage se fait avec ma méthode beginFill() et le contour avec la méthode lineStyle().
Actionscript:
-
// rectangle jaune avec un contour rouge
-
var rectangleContour:Shape = new Shape ();
-
rectangleContour.graphics.beginFill(0xFFFF00);
-
rectangleContour.graphics.lineStyle(2,0XFF0000);
-
rectangleContour.graphics.drawRect(150, 5, 100, 30);
-
this.addChild(rectangleContour);
-
// rectangle jaune aux coins arrondis avec un contour rouge
-
var rectangleRondContour:Shape = new Shape ();
-
rectangleRondContour.graphics.beginFill(0xFFFF00);
-
rectangleRondContour.graphics.lineStyle(2,0XFF0000);
-
rectangleRondContour.graphics.drawRoundRect(150, 40, 100, 30, 30);
-
this.addChild(rectangleRondContour);
-
// cercle jaune avec un contour rouge
-
var cercleContour:Shape = new Shape ();
-
cercleContour.graphics.beginFill(0xFFFF00);
-
cercleContour.graphics.lineStyle(2,0XFF0000);
-
cercleContour.graphics.drawCircle(205, 100, 25);
-
this.addChild(cercleContour);
-
// ellipse jaune avec un contour rouge
-
var ellipseContour:Shape = new Shape ();
-
ellipseContour.graphics.beginFill(0xFFFF00);
-
ellipseContour.graphics.lineStyle(2,0XFF0000);
-
ellipseContour.graphics.drawEllipse(150, 130, 100, 30);
-
this.addChild(ellipseContour);
-
// carre jaune avec un contour rouge
-
var carreContour:Shape = new Shape ();
-
carreContour.graphics.beginFill(0xFFFF00);
-
carreContour.graphics.lineStyle(2,0XFF0000);
-
carreContour.graphics.drawRect(175, 165, 50, 50);
-
this.addChild(carreContour);
Dessins avec un contour
Actionscript:
-
// rectangle avec un contour vert
-
var rectangleContourVert:Shape = new Shape ();
-
rectangleContourVert.graphics.lineStyle(2,0x00FF00);
-
rectangleContourVert.graphics.drawRect(300, 5, 100, 30);
-
this.addChild(rectangleContourVert);
-
// rectangle aux coins arrondis avec un contour vert
-
var rectangleRondContourVert:Shape = new Shape ();
-
rectangleRondContourVert.graphics.lineStyle(2,0x00FF00);
-
rectangleRondContourVert.graphics.drawRoundRect(300, 40, 100, 30, 30);
-
this.addChild(rectangleRondContourVert);
-
// cercle avec un contour vert
-
var cercleContourVert:Shape = new Shape ();
-
cercleContourVert.graphics.lineStyle(2,0x00FF00);
-
cercleContourVert.graphics.drawCircle(355, 100, 25);
-
this.addChild(cercleContourVert);
-
// ellipse avec un contour vert
-
var ellipseContourVert:Shape = new Shape ();
-
ellipseContourVert.graphics.lineStyle(2,0x00FF00);
-
ellipseContourVert.graphics.drawEllipse(300, 130, 100, 30);
-
this.addChild(ellipseContourVert);
-
// carre avec un contour vert
-
var carreContourVert:Shape = new Shape ();
-
carreContourVert.graphics.lineStyle(2,0x00FF00);
-
carreContourVert.graphics.drawRect(325, 165, 50, 50);
-
this.addChild(carreContourVert);
;-)
Je suis Antony Chauviré, développeur sur la Flash Platform.
Bonjour,
pour précision, c'etait classe Graphics existe en .NET aussi ;), on delegue le travail de dessin a une autre classe et plus à la classe MovieClip
Une petite question par rapport à cette astuce de contour :
Est-il nécessaire d'importer des classes au lancement de l'ActionScript ?
Merci pr l'info !
Bonjour,
Si tu utilises l'AS3 dans Flash 9, tu n'as pas besoin d'importer les classes.
Si tu utilises l'AS3 dans Flex, il te faut importer les classes.
@+
Bonjour,
j'ai envi de créer une ellipse spatiale assez fine en 3D où je puisse écrire mon activité à l'intérieur de cette ellipse.
J'aimerai qu'on puisse jouer avec les dimensions de l'ellipse afin de trouver sa forme idéale.
j'aimerai que mon activité inscrite à l'intérieur reste fixe sans aucune animation et que sur le trajet de cette ellipse en 3D un très léger mouvement se dessine tout au long du trajet de cette ellipse.
merci pour vos précieux renseignements
Cordialement
Bernard
Pour les rectangles, ce n'est pas plus simple d'utiliser la classe Rectangle directement ?
Bonjour Cécile,
La classe Rectangle n'est pas une classe de dessin. C'est une classe qui permet de définir une zone rectangulaire comme par exemple, une zone de sélection sur une image afin d'effectuer une copie de pixels.
;-)
Bien expliqué tout ça !
Merci beaucoup
Salut, est-il possible de cibler l'objet de dessin après sa création par la suite? Pour par exemple, modifier la taille d'un rectangle dynamiquement sur un évènement resize.... Ou doit-on obligatoirement redimensionner le clip qui le contient?