Les méthodes de dessin

Depuis Flash Player 6 (Flash MX) Flash propose avec l'objet MovieClip une série de méthodes de dessin qui constituent une interface de programmation d'applications (ang. API Application Programming Interface)

Les méthodes de l'API de dessin
MovieClip.lineStyle()
MovieClip.beginFill() ;
MovieClip.endFill() ;
MovieClip.moveTo() ;
MovieClip.lineTo() ;
MovieClip.curveTo() ;
MovieClip.clear() ;

Dessiner à la manière de Logo

Pour illustrer l'utilisation de quelques unes de ces méthodes de dessin, nous allons mettre au point un interpréteur Logo (du moins une partie d'un interpréteur Logo). Logo est un langage de programmation conçu par Seymour Papert dans le but d'enseigner les bases de la programmation aux jeunes enfants. Il s'agit de programmer les mouvements d'une tortue afin de lui faire dessiner les figures voulues. Chaque instruction est formée d'une commande suivie éventuellement d'un paramètre. Les commandes ont très simples :

Quelques instructions Logo

Les commandes peuvent être saisies au clavier et exécutées directement au fur et à mesure ou bien elles sont stockées dans des programmes et exécutées en bloc. C'est la solution que nous allons adopter pour notre projet de ce jour. Pour des raisons de facilité d'analyse, les données seront stockées dans des fichier xml dont la structure est très simple :

Extrait du fichier XML

Le lecture du fichier XML est directe :

Lecture du fichier XML

La tablette de dessin et la tortue

Nous commençons par créer une tablette de dessin virtuelle qui servira à émettre les commandes de dessin et à tenir trace de la position de la tortue et de son orientation. La tablette est un movieClip dont le point d'ancrage se trouve au centre d'un rectangle dont on a enlevé la couleur de remplissage. Il semble en effet que les méthodes de dessin ne fonctionnent pas sur des fonds colorés, même disposés sur des calques séparés. Si vous désirez mieux matérialiser la tablette en lui donnant une autre couleur, une solution consiste à dessiner un symbole graphique de même dimension et à le placer sous la tablette dans le scénario principal.

La tortue est également un simple MovieClip préparé à l'exportation. Il sera appelé par la tablette.

Initialisation des paramètres

Nous pouvons maintenant initialiser tous nos paramètres Logo :

Initialisation des paramètres

La ligne 17 mérite une explication : comme l'axe des y est orienté vers le bas, il est nécessaire de diriger la tortue vers le bas également.

La fonction de rappel

La fonction de rappel

La fonction principale

La fonction dessine() est la fonction principale de l'animation après la fonction de rappel. Elle lit la liste des instructions dans le fichier XML, en détermine le nombre et initialise le compteur d'instruction à 0. Elle crée alors un interval qui servira à appeler la fonction parse tous les 300 millièmes de seconde.

La fonction parse()

La fonction parse() (ang. to parse analyser d'où les expressions parseur, parser, etc.) analyse chaque instruction en ses différents mots (ang. token). Elle doit donc extraire le texte de l'instruction et c'est ici qu'il faut faire légèrement attention : ce texte étant extrait par la propriété firstChild, il est du type object et non du type String. Il convient donc de le convertir en String par la méthode toString() (ligne 43). C'est à cette condition que l'on peut alors appeler la méthode String.split(" ") qui renvoie un tableau de éléments du texte découpé sur chaque caractère d'espacement. Il s'agit ici du tableau tokens (ligne 44). Ce tableau contient au plus deux éléments (lorsque l'instruction est formée d'une commande et d'un paramètre. La commande se trouve obligatoirement dans le premier élément, c'est-à-dire tokens[0]. On utilise alors une instruction switch pour tester chacun des cas.

Lorsque la commande est "av", il faut calculer la longueur dont il faut avancer (ligne 48) et appeler la fonction avance en lui transmettant cette valeur (ligne 49). Comme il est de bon usage en programmation, la fonction avance() permet de regrouper tout le code nécessaire à faire avancer la tortue et de laisser ainsi bien propre le code de la fonction parse(). Nous ferons de même pour les autres commandes.

La fonction avance()

Cette fonction est la plus difficile de toutes, surtout pour ceux sont parvenus à refouler leur cours de trigonométrie. Il faut considérer la distance à parcourir comme longueur de l'hypoténuse d'un triangle rectangle inscrit dans un cercle de rayon égal à l'hypoténuse.

Les longueurs deux autres côtés correspondent alors respectivement au sinus et au cosinus de l'angle multiplié par le rayon. Comme les méthodes moveTo(x,y) et lineTo(x,y) requièrent les coordonnées du point vers lequel il faut se déplacer, il faut ajouter les valeurs trouvées aux coordonnées du point courant.