L'API de dessin est le nom des fonctionnalités intégrées à ActionScript qui permettent de créer des graphismes vectoriels (lignes, courbes, formes, remplissages et dégradés) et de les afficher à l'aide d'ActionScript. Ces fonctionnalités sont prises en charge par la classe flash.display.Graphics. ActionScript permet de dessiner dans une instance d'un objet de type Shape, Sprite ou MovieClip, à l'aide de la propriété graphics définie dans chacune de ces classes. (La propriété graphics de ces classes est en fait une instance de la classe Graphics.)
Si vous n'avez pas l'habitude de « dessiner » par code, la classe Graphics comprend plusieurs méthodes qui facilitent le tracé de formes courantes (cercles, ellipses, rectangles et rectangles à coins arrondis). Ces tracés peuvent être des lignes vides ou des formes remplies. Si vous avez besoin de fonctionnalités plus sophistiquées, la classe Graphics comporte aussi des méthodes destinées au tracé de lignes et de courbes de Bézier, qui peuvent être utilisées conjointement avec les fonctions trigonométriques de la classe Math pour créer n'importe quelle forme.
Tâches courantes faisant appel à l'API de dessin
Les opérations suivantes, qui sont décrites dans ce chapitre, peuvent être aisément accomplies en ActionScript avec l'API de dessin :
Définition de styles de ligne et de remplissage pour le traçage de formes
Dessin de lignes droites et de courbes
Utilisation de méthodes pour tracer des formes (cercles, ellipses et rectangles)
Dessin avec des lignes et des remplissages en dégradé
Définition d'une matrice de création de dégradé
Utilisation de fonctions trigonométriques avec l'API de dessin
Incorporation des fonctionnalités de l'API de dessin dans une animation
Concepts importants et terminologie
La liste de référence suivante énumère les termes importants que vous rencontrerez dans ce chapitre:
Point d'ancrage : l'un des deux points d'extrémité d'une courbe de Bézier
Point de contrôle : point qui définit la direction et la forme d'une courbe de Bézier. Cette ligne courbe ne touche jamais le point de contrôle, mais elle s'arrondit comme si elle était tracée dans la direction de celui-ci.
Espace de coordonnées : représentation graphique des coordonnées contenues dans un objet d'affichage, par rapport auquel sont positionnés les éléments enfants.
Remplissage : partie intérieure opaque d'une forme constituée par le remplissage d'une ligne, ou d'une forme ne possédant pas de ligne de contour.
Dégradé : transition progressive d'une couleur à une ou plusieurs autres (par opposition avec une couleur unie).
Point : emplacement unique dans un espace de coordonnées. Dans le système de coordonnées bidimensionnel utilisé en ActionScript, un point est défini par sa position sur l'axe x et sur l'axe y (les coordonnées de ce point).
Courbe de Bézier : type de courbe définie par une formule mathématique particulière. Dans ce type de courbe, la forme de la courbe est calculée à partir des positions des points d'ancrage (les points d'extrémité de la courbe) et d'un point de contrôle qui définit la forme et la direction de la courbe.
Échelle : taille relative d'un objet par rapport à se taille d'origine. Mettre un objet à l'échelle consiste à modifier sa taille en l'étirant ou en le rétrécissant.
Trait : ligne de contour d'une forme constituée par le remplissage de cette ligne, ou forme ne possédant pas de remplissage.
Translation : modification des coordonnées d'un point en passant d'un espace de coordonnées à un autre
Axe X : L'axe horizontal dans le système de coordonnées en 2 dimensions utilisé dans ActionScript
Axe Y : L'axe vertical dans le système de coordonnées en 2 dimensions utilisé dans ActionScript
Utilisation des exemples des chapitres
Au fur et à mesure que vous avancez dans le chapitre, vous pouvez tester des exemples de code. Etant donné que ce chapitre décrit comment tracer du contenu visuel, le test des exemples de code implique l'exécution du code et l'affichage des résultats dans le fichier SWF créé. Pour tester les exemples de code :
Créez un document Flash vide.
Sélectionnez une image-clé dans le scénario.
Ouvrez le panneau Actions et copiez le code de l'exemple dans la fenêtre de script:
Choisissez Contrôle > Tester l'animation pour exécuter le programme.
Les résultats des exemples de code apparaîtront dans le fichier SWF créé.