Il est possible depuis Flash MX d'utiliser une API de dessin (Drawing API). A partir d'elle, le développeur peut créer traits, courbes, formes vides ou pleines (avec aplat ou dégradé) au sein d'un movie-clip, ce uniquement avec ActionScript, à la manière de la tortue de l'antique langage Logo.

Bien qu'encore peu utilisée, cette API peu se révéler très utile dès que l'on a besoin de générer des graphiques dynamiquement. Voici comment aborder cette API

Les méthodes
Les méthodes de l'API de dessin sont attachées à l'objet Movie-Clip : un nouveau dessin se fera forcément dans un MC.
Voici une liste de ses différentes méthodes :

A partir de ces quelques méthodes et d'un peu de travail ActionScript, le programmeur peut créer des formes variées, simples ou complexes.

Quelques exemples
Voyons déjà comment tracer un trait :
this.createEmptyMovieClip("monDessin", 1);
this.monDessin.lineStyle(2, 0x0000ff, 50);
this.monDessin.moveTo(150, 100);
this.monDessin.lineTo(200, 150);

On commence ici par créer le MC vide qui contiendra notre dessin. On l'appelle monDessin et on le place sur le niveau 1. Toute l'action se fait ensuite par rapport à monDessin. Notez qu'on aurait aussi bien pu sauter cette étape et travailler dans un MC existant, mais il faut savoir que le dessin se ferait alors SOUS les éléments déjà présents dans le MC...
On définit ensuite le style du trait. Ici, on lui donne 2 pixels d'épaisseur, une couleur bleu vif, et 50% de transparence. La couleur par défaut est le noir, la transparence par défaut est à 100% (opaque, donc) : si l'on avait voulu simplement un trait noir de 5 pixels, il aurait suffit d'utiliser lineStyle(5);.
On déplace ensuite le pointeur. Celui se situe par défaut au point d'alignement du MC, c'est à dire à son angle supérieur gauche. Nous déplaçons le pointeur vers l'intérieur du MC.
Enfin, nous traçons notre trait, qui partira du point d'origine défini avec moveTo(), jusqu'au point de destination.

La courbe est un peu plus compliquée : en plus de devoir définir les points d'origine et de destination du trait, il faut en définir un troisième, l'ancre. Cette méthode trace des courbes de Bézier : la courbe allant du point d'origine au point de destination a deux tangentes partant de ces points et passant par le point d'ancrage. En pratique, on peut donc dire que le tracé partant du point d'origine "vise" d'abord le point d'ancrage avant de dévier petit à petit vers le point de destination, formant ainsi la courbe. Le point d'ancrage est donc nécessaire à la courbe.
this.createEmptyMovieClip("monDessin", 1);
this.monDessin.lineStyle(5, 0x00ffff, 70);
this.monDessin.moveTo(150, 100);
this.monDessin.curveTo(50, 15, 200, 150);

Nous avons légèrement modifié le style de ligne, mais les points d'origine et de destination sont les mêmes. Par contre, dans la méthode curveTo(), nous mettons avant les coordonnées de destination celles de l'ancre.

Le remplissage d'une forme est des plus simples : à partir du moment où la forme est construite en ActionScript, il suffit d'encadrer le code des méthodes beginFill() et endFill() pour remplir cette forme. Voici par exemple comment faire un triangle plein avec deux traits :
this.monDessin.lineStyle(1);
this.monDessin.moveTo(0, 100);
this.monDessin.beginFill(0xff0000);
this.monDessin.lineTo(50, 50);
this.monDessin.lineTo(100, 150);
this.monDessin.endFill();

Malgré le fait que l'on n'ait tracé que deux traits, endFill() fermera la forme d'un dernier trait identique au trait précédent, et la remplira (ici, de rouge).

A partir de là, il devient possible de tracer un rectangle :
with(this.monDessin) {
  moveTo(100, 50);
  lineTo(150, 50);
  lineTo(150, 100);
  lineTo(100,100);
  lineTo(100, 50);
  }

Ce qui nous trace un carré de 50 pixels par 50, partant du point (100, 50). On peut sans problème le remplir avec les méthodes déjà vues.
Cela reste assez laborieux pour un simple rectangle, mais il est possible d'ajouter une fonction à l'objet Movie-Clip pour créer des rectangles simplement en donnant le point d'origine, une longueur et une hauteur :
MovieClip.prototype.drawRect = function(x, y, l, h) {
  this.moveTo(x, y);
  this.lineTo(x+l, y);
  this.lineTo(x+l, y+h);
  this.lineTo(x, y+h);
  this.lineTo(x, y);
  };
this.createEmptyMovieClip("monDessin", 1);
with (this.monDessin) {
  lineStyle(12, 0x0000ff, 100);
  drawRect(200, 50, 50, 50);
  }

Forum

Réagissez dans les forums de JDN Développeurs

Voilà pour cette première approche de l'API de dessin. Nous verrons dans un prochain article comment automatiser des formes plus complexes, créer des animations simples et des graphs...