Le but de cet article est d'étudier les différentes fonctionnalités en rapport avec la géométrie dans Flash.
Le package flash.geom contient des classes qui définissent des objets géométriques, tels que des points, des rectangles et des matrices de transformation. Ces classes ne fournissent pas nécessairement de fonctionnalité par elles-mêmes ; néanmoins, elles sont utilisées pour définir les propriétés des objets utilisés dans d'autres classes.

Toutes les classes de géométrie se basent sur la notion selon laquelle les emplacements à l'écran sont représentés comme un plan en deux dimensions. L'écran est traité comme un graphique plat avec un axe horizontal (x) et un axe vertical (y). Tout emplacement (ou point) à l'écran peut être représenté sous la forme d'une paire de valeurs x et y, appelées coordonnées de cet emplacement.

Le point d'origine, coordonnées 0, 0, de la scène de travail est le coin haut gauche de la séquence.

Les valeurs sur l'axe x augmentent en allant vers la droite et diminuent en allant vers la gauche. Néanmoins, contrairement aux systèmes de coordonnées classiques, dans ActionScript, les valeurs sur l'axe y augmentent en allant vers le bas et diminuent en allant vers le haut de l'écran.

Utilisation de la classe Point

Un objet Point définit une paire de coordonnées cartésiennes. Il représente un emplacement dans un système de coordonnées à deux dimensions, dans lequel x est l'axe horizontal et y l'axe vertical.

Le constructeur de la classe Point prend en paramètres la valeur de la coordonnée x et la valeur de la coordonnée y.

On rencontre très souvent des scripts dans lesquels nous avons besoin de mémoriser les coordonnées de départ d'un objet d'affichage. Classiquement, les développeurs vont créés 2 variables numériques et stocker les valeurs d'origine de notre objet.

Il pourrait être plus judicieux de mémoriser ces coordonnées dans un seul objet, un objet de type Point.

Les coordonnées sont ensuite accessibles avec les propriétés x et y de la classe Point.

Calculer la distance entre 2 points

La méthode distance() de la classe Point va nous permettre de calculer la distance entre 2 points dans un espace de coordonnées. Cette méthode est une méthode statique, c'est-à-dire que c'est une méthode qui s'applique à la classe et non à une instance de classe.

Cette méthode attend 2 objets Point en paramètres et renvoie une valeur numérique.

Le cas des espaces de coordonnées différents

Dans le cas où deux objets se trouvent dans deux conteneurs d'affichage différents, ils n'utiliseront pas le même espace de coordonnées. Nous devrons donc convertir les coordonnées locales en coordonnées globales en utilisant la méthode localToGlobal() de la classe DisplayObject.

Dans l'exemple suivant, nous allons créer 2 champs de texte, le premier sera ajouté à la scène et le second sera ajouté dans un conteneur Sprite. Le premier champ de texte sera donc dans l'espace de coordonnées global alors que le second sera lui dans l'espace de coordonnées local au Sprite.

Pour calculer la distance entre les 2 champs de texte, nous utiliserons la méthode localToGlobal() sur le 2^ème champ de texte afin de convertir l'objet point des coordonnées de ce texte (locales) vers les coordonnées de la scène (globales).

Cette méthode attend en paramètres un objet Point correspondant aux coordonnées à convertir.

Autres utilisations

La classe Point pourra être aussi utilisée dans les méthodes des classes suivantes :

• DisplayObjectContainer
• BitmapData
• Matrix
• Rectangle

Utilisation de la classe Rectangle

Un objet Rectangle définit une zone rectangulaire. Un objet Rectangle a une position définie par les coordonnées x et y de son angle supérieur gauche, une propriété width définissant sa largeur et une propriété height  définissant sa hauteur.

Le constructeur prend en paramètres ces 4 valeurs.

Cas d'utilisation

Recouvrement de 2 objets

La méthode intersects() de la classe Rectangle va vous permettre de savoir si 2 rectangles se recouvrent. Cette méthode peut-être utilisée pour savoir si 2 objets d'affichage (clip, sprite, image...) se recouvrent.

En effet, la méthode getBounds() de la classe DisplayObject renvoie un objet de type Rectangle correspondant à la délimitation rectangulaire de l'objet d'affichage. En récupérant la délimitation de 2 objets, on peut ensuite savoir s'ils se recouvrent en utilisant la méthode intersects() de la classe DisplayObject.

La méthode intersects() renvoie un booléen (true ou false).

Nous allons utiliser ces méthodes avec trois carrés dont 2 (le bleu et le vert) qui se recouvrent.

Copie d'une zone d'une image

Les classes rectangle et Point sont aussi utilisées lors de la copie d'une zone d'une image. En effet, la méthode copyPixels() de la classe BitmapData prend notamment  en paramètres un objet Rectangle et un objet Point.

L'objet Rectangle correspond à la zone rectangulaire de pixels qui sera copiées. Cet objet Rectangle définira les coordonnées x et y du point d'origine de la copie par rapport à l'image initiale et la largeur et hauteur de la zone copiée.

L'objet Point correspond au point d'origine dans la copie à partir duquel seront copiés les pixels.

Autres utilisations

La classe Rectangle pourra être aussi utilisée dans les méthodes des classes suivantes :

• DisplayObject
• BitmapData
• PrintJob
• Sprite
• TextField
• Transform

L'ActionScript permet la création de dessin vectoriel. Contrairement à l'ActionScript 2, l'AS3 permet, en plus des lignes et des courbes, de créer des formes (carré, rectangle, ellipse, cercle...) via des fonctionnalitées intégrées.Ces fonctionnalités sont appelées API de dessin et permettent de créer des dessins vectoriels.

Grâce à cette API de dessin, il vous sera possible de dessiner dynamiquement la forme de vos boutons, de présenter facilement des données numériques sous forme de graphiques...

L'ActionScript 3, à travers son lot de nouvelles classes, va vous permettre de séparer correctement les différents travaux de dessin que vous aurez à réaliser.

La classe Graphics

La classe de base du dessin vectoriel est la classe Graphics. Elle comporte des méthodes et des propriétés permettant de tracer des lignes, des remplissages et des formes.

Il est impossible d'instancier directement la classe Graphics. On utilisera la propriété graphics des objets d'affichage qui prennent en charge le dessin. Ces objets seront des objets de type Shape, Sprite ou des classes dérivées.

La classe Shape

La classe Shape sert à créer des formes simples via l'API de dessin. Cette classe comprend donc une propriété graphics qui vous permet d'accéder aux méthodes de dessin de la classe Graphics.

La classe Shape hérite de la classe DisplayObject, ce qui signifie qu'on ne pourra dessiner qu'une seule forme dans un objet de ce type. D'autre part, cette classe n'hérite pas de la classe InteractiveObject, ce qui signifie qu'il ne sera pas possible de définir des événements de souris ou de clavier sur ces objets.

Dessiner un rectangle uni

Le dessin d'un rectangle en ActionScript 3 va être réalisé en différentes étapes :

1. Création d'une instance de type Shape
2. Définition du style de remplissage (couleur et opacité)
3. Dessin du rectangle
4. Affichage

Les classes Shape et Graphics vont nous permettre de créer du dessin vectoriel en ActionScript.

Création d'une instance de type Shape

La classe Shape possède un constructeur qui ne prend aucun paramètre.

Définition du style de remplissage

Avant de dessiner le rectangle, vous devez d'abord définir le style du remplissage (couleur, opacité...). C'est la méthode beginFill() de la classe Graphics qui va vous permettre de le faire.

1 seul paramètre de cette méthode est obligatoire, c'est la couleur du remplissage au format hexadécimal.

Nous allons définir un remplissage de couleur bleu clair et opaque. Nous appelerons la méthode beginFill() au travers de la propriété graphics de notre objet Shape.

Dessin du rectangle

Pour dessiner le rectangle, nous allons utiliser la méthode drawRect() de la classe Graphics. Cette méthode attend 4 paramètres (x, y, width, height) :

• x:Number - Nombre indiquant la position horizontale par rapport au point d'alignement de l'objet d'affichage parent (en pixels).
• y:Number - Nombre indiquant la position verticale par rapport au point d'alignement de l'objet d'affichage parent (en pixels).
• width:Number - Largeur du rectangle (en pixels).
• height:Number - Hauteur du rectangle (en pixels).

Nous allons dessiner un rectangle de 100 pixels de large par 30 pixels de haut, positionné en haut à gauche (0, 0) du shape.

Positionnement et affichage du rectangle dans la scène

Comme tous les objets d'affichage, nous positionnerons notre rectangle avec les propriétés x et y et nous l'afficherons avec la méthode addChild() .

Dessiner un rectangle uni avec un contour

Pour ajouter un contour à notre rectangle, nous allons utiliser la la méthode lineStyle() de la classe Graphics.

• 1 seul paramètre de cette méthode est obligatoire, c'est la largeur du trait. Elle sera exprimée par un entier qui indique l'épaisseur de la ligne en points. Les valeurs possibles varient entre 0 et 255.
• Le second paramètre, qui lui est facultatif, permet de définir la couleur de la ligne au format héxadécimal. Si aucune valeur n'est indiquée, la valeur par défaut est le noir (0x000000).
• Le troisième paramètre, lui aussi facultatif, permet de définir l'opacité de la couleur de la ligne. Les valeurs varient entre 0 (transparent) et 1 (opaque). La valeur par défaut est 1.

Nous allons définir un trait d'une épaisseur de 2 points, de couleur marine et opaque. Nous appelerons la méthode lineStyle() au travers de la propriété graphics de notre objet Shape.

Dessiner un rectangle aux coins arrondis

Pour dessiner un rectangle aux coins arrondis, on utilisera la méthode drawRoundRect() de la classe graphics à la place de la méthode drawRect().

Cette méthode prend 2 paramètres en plus : la largeur de l'arrondi et la hauteur de l'arrondi. Si la hauteur n'est pas spécifiée, elle prend la même valeur que la largeur.

Nous allons définir un arrondi d'angle homothétique de 30.

En modifiant les 2 paramètres de l'arrondi, on peut créer différentes variantes.

Dessiner un cercle

Pour dessiner un cercle, on utilisera la méthode drawCircle() de la classe Graphics. Cette méthode attend 3 paramètres(x, y, radius) :

• x:Number - Coordonnée x du centre du cercle par rapport au point d'alignement de l'objet d'affichage parent (en pixels).
• y:Number - Coordonnée y du centre du cercle par rapport au point d'alignement de l'objet d'affichage parent (en pixels).
• radius:Number - Rayon du cercle (en pixels).

Nous allons créer un cercle rouge transparent à 50%.

Dessiner une ellipse

Pour dessiner une ellipse, on utilisera la méthode drawEllipse() de la classe Graphics. Cette méthode attend 4 paramètres(x, y, width, height) :

• x:Number - Coordonnée x du centre de l'ovale par rapport au point d'alignement de l'objet d'affichage parent (en pixels).
• y:Number - Coordonnée x du centre de l'ovale par rapport au point d'alignement de l'objet d'affichage parent (en pixels)
• width:Number - Largeur de l'ellipse (en pixels)
• height:Number - Hauteur de l'ellipse (en pixels)

Dessiner une forme plus complexe

Pour dessiner une forme plus complexe, nous allons créer une succession de droite ou de courbes.

http://wiki.mediabox.fr/tutoriaux/flash/api/courbes_droites

Nous allons créer un triangle avec un remplissage uni et un contour.

Utiliser un remplissage dégradé

Jusqu'à présent, nous avons créé des remplissages utilisant des couleurs unies. La classe Graphics permet aussi de créer des dégradés.
Nous allons pour cela utiliser la méthode beginGradientFill().
La méthode beginGradientFill() reçoit 4 paramètres obligatoires : type, couleur, alpha et ratio des couleurs.

• Le premier paramètre spécifie le type de dégradé à créer. Les 2 valeurs possibles sont des constantes de la classe GradientType : GradientType.LINEAR pour un dégradé linéaire et GradientType.RADIAL pour un dégradé radial.
• Le second paramètre indique le tableau de valeurs colorimétriques à utiliser. Dans un dégradé linéaire, les couleurs sont organisées de gauche à droite. Dans un dégradé radial, les couleurs sont organisées de l'intérieur à l'extérieur. L'ordre des couleurs dans le tableau représente l'ordre dans lequel elles sont tracées dans le dégradé.
• Le troisième paramètre indique les valeurs de transparence alpha pour les couleurs du tableau des couleurs.
• Le quatrième paramètre spécifie les rapports, c'est-à-dire l'importance de chaque couleur dans le dégradé. La plage de valeurs possible va de 0 à 255. Ces valeurs représentent la position au sein du dégradé : 0 représente le début du dégradé, et 255 la fin. Cette plage de rapports doit augmenter séquentiellement et comporter le même nombre d'éléments que les tableaux des couleurs et des valeurs alpha spécifiés comme second et troisième paramètres.

Nous allons créer un dégradé linéaire de trois couleurs : rouge au début (0xCF0903), orange au milieu (0xFFCC00) et vert à la fin (0x46B504).
Les trois couleurs seront opaques : [1, 1, 1].

Les couleurs ne seront pas réparties de façon uniforme, le vert sera la couleur dominante. Le rouge démarrera à gauche (0), le vert sera à droite du dégradé (255) et le orange sera au ¼ du dégradé (100). [0, 100, 255]

Nous remarquons que par défaut le dégradé n'est pas étiré sur la largeur de la ligne. Pour remédier à ce problème, nous allons définir le 5ème paramètre de la méthode.

Ce paramètre défini une matrice de transformation du dégradé et accepte une instance de la classe Matrix.

Création d'un objet de type Matrix pour le dégradé

La classe Matrix représente une matrice de transformation que l'on peut utiliser pour appliquer diverses transformations graphiques à un objet d'affichage.

Nous allons ensuite utiliser la méthode createGradientBox() de la classe Matrix pour définir la largeur et la hauteur du dégradé. Nous allons définir la largeur du dégradé sur 100, valeur correspondant à la largeur du rectangle et la hauteur sur 30, valeur correspondant à la hauteur du rectangle.

L'objet de type Matrix est ensuite passé en tant que 5ème paramètre de la méthode beginGradientFill().

Nous pouvons contrôler l'angle du dégradé grâce au troisième paramètre de la méthode createGradientBox().

L'ActionScript permet la création de dessin vectoriel. Contrairement à l'ActionScript 2, l'AS3 permet, en plus des lignes et des courbes, de créer des formes (carré, rectangle, ellipse, cercle...) via des fonctionnalitées intégrées.

Ces fonctionnalités sont appelées API de dessin et permettent de créer des dessins vectoriels.

Grâce à cette API de dessin, il vous sera possible de dessiner dynamiquement la forme de vos boutons, de présenter facilement des données numériques sous forme de graphiques...

L'ActionScript 3, à travers son lot de nouvelles classes, va vous permettre de séparer correctement les différents travaux de dessin que vous aurez à réaliser.

La classe Graphics

La classe de base du dessin vectoriel est la classe Graphics. Elle comporte des méthodes et des propriétés permettant de tracer des lignes, des remplissages et des formes.

Il est impossible d'instancier directement la classe Graphics. On utilisera la propriété graphics des objets d'affichage qui prennent en charge le dessin. Ces objets seront des objets de type Shape, Sprite ou des classes dérivées.

La classe Shape

La classe Shape sert à créer des formes simples via l'API de dessin. Cette classe comprend donc une propriété graphics qui vous permet d'accéder aux méthodes de dessin de la classe Graphics.

La classe Shape hérite de la classe DisplayObject, ce qui signifie qu'on ne pourra dessiner qu'une seule forme dans un objet de ce type. D'autre part, cette classe n'hérite pas de la classe InteractiveObject, ce qui signifie qu'il ne sera pas possible de définir des événements de souris ou de clavier sur ces objets.

Dessiner un droite

Le dessin d'une droite en ActionScript 3 va être réalisé en différentes étapes :

• Création d'une instance de type Shape
• Définition du style de trait (épaisseur de ligne, couleur de ligne et opacité)
• Déplacement de la position de dessin vers les coordonnées initiales de la droite
• Dessin de la droite entre la position initiale et la position finale

Les classes Shape et Graphics vont nous permettre de créer du dessin vectoriel en ActionScript.

Création d'une instance de type Shape

La classe Shape possède un constructeur qui ne prend aucun paramètre.

Définition du style de trait

Avant de dessiner la droite, vous devez d'abord définir le style du trait (épaisseur, couleur, opacité...).

C'est la méthode lineStyle() de la classe Graphics qui va vous permettre de le faire.

• 1 seul paramètre de cette méthode est obligatoire, c'est la largeur du trait. Elle sera exprimée par un entier qui indique l'épaisseur de la ligne en points. Les valeurs possibles varient entre 0 et 255.
• Le second paramètre, qui lui est facultatif, permet de définir la couleur de la ligne au format héxadécimal. Si aucune valeur n'est indiquée, la valeur par défaut est le noir (0x000000).
• Le troisième paramètre, lui aussi facultatif, permet de définir l'opacité de la couleur de la ligne. Les valeurs varient entre 0 (transparent) et 1 (opaque). La valeur par défaut est 1.

Nous allons définir un trait d'une épaisseur de 20 points, de couleur rouge et opaque.

Nous appelerons la méthode lineStyle() au travers de la propriété graphics de notre objet Shape.

Déplacement de la position de dessin vers les coordonnées initiales de la droite

Nous allons déplacer la position de dessin en utilisant la méthode moveTo() de la classe Graphics.

Cette méthode prend paramètres 2 nombres indiquant la position horizontale et verticale par rapport au point d'alignement de l'objet d'affichage parent.

Dessin de la droite entre la position initiale et la position finale

Pour dessiner la droite, nous allons utiliser la méthode lineTo() de la classe Graphics.

Cette méthode trace une ligne entre la position de dessin actuelle (dans notre cas, définie par la méthode moveTo) et la position (x, y), passée en paramètre de cette méthode. Une fois la ligne tracée, la position de dessin actuelle est réglée sur les coordonnées passées en paramètres.

Positionnement et affichage de la droite dans la scène

Comme tous les objets d'affichage, nous positionnerons notre droite avec les propriétés x et y et nous l'afficherons avec la méthode addChild() .

Extrémité des lignes

On remarque que par défaut les extrémités de la droite sont arrondies.

Grâce au paramètre caps (6^ème paramètre) de la méthode lineStyle(), nous allons pouvoir contrôler les extrémités de la droite.

Nous allons utiliser la classe CapsStyle pour définir le style des extrémités. Cette classe est une énumération de valeurs constantes qui spécifient le style d'extrémité à utiliser pour tracer les lignes.

Ces constantes sont utilisées en tant que valeurs du paramètre caps dans la méthode lineStyle().

Vous pouvez spécifier les trois types d'extrémités suivants :

• CapsStyle.NONE : aucunes extrémités
• CapsStyle.ROUND : extrémités rondes
• CapsStyle.SQUARE : extrémités carrées

Le 4^ème et 5^ème paramètre ne vont pas nous concernés par l'instant, nous allons donc utiliser leur valeur par défaut. Nous allons définir pour notre droite des extrémités carrées.

Dessiner une courbe

Nous avons vu que la méthode lineStyle() permettait de dessiner une droite. Dès lors que vous allez vouloir dessiner une courbe, vous devrez utiliser la méthode curveTo() de la classe Graphics.

La méthode curveTo() dessine une courbe de Bézier. Elle trace un arc entre deux points (appelés points d'ancrage) courbé en direction d'un troisième point (appelé point de contrôle).

Le premier point d'ancrage est défini par la position actuelle du dessin. Le point de contrôle et le second point d'ancrage sont définis en tant que paramètres de la méthode curveTo().

Dessiner une ligne dégradée

Jusqu'à présent, nous avons créé des lignes ou des courbes en utilisant des couleurs unies. La classe Graphics permet aussi de créer des dégradés.

Nous allons pour cela utiliser la lineGradientStyle() après la méthode lineStyle(). En effet, la méthode lineGradientStyle() ne défini pas l'épaisseur du trait, c'est la méthode lineStyle() qui le gère.

La méthode lineGradientStyle() reçoit 4 paramètres obligatoires : type, couleur, alpha et ratio des couleurs.

• Le premier paramètre spécifie le type de dégradé à créer. Les 2 valeurs possibles sont des constantes de la classe GradientType : GradientType.LINEAR pour un dégradé linéaire et GradientType.RADIAL pour un dégradé radial.
• Le second paramètre indique le tableau de valeurs colorimétriques à utiliser. Dans un dégradé linéaire, les couleurs sont organisées de gauche à droite. Dans un dégradé radial, les couleurs sont organisées de l'intérieur à l'extérieur. L'ordre des couleurs dans le tableau représente l'ordre dans lequel elles sont tracées dans le dégradé.
• Le troisième paramètre indique les valeurs de transparence alpha pour les couleurs du tableau des couleurs.
• Le quatrième paramètre spécifie les rapports, c'est-à-dire l'importance de chaque couleur dans le dégradé. La plage de valeurs possible va de 0 à 255. Ces valeurs représentent la position au sein du dégradé : 0 représente le début du dégradé, et 255 la fin. Cette plage de rapports doit augmenter séquentiellement et comporter le même nombre d'éléments que les tableaux des couleurs et des valeurs alpha spécifiés comme second et troisième paramètres.

Nous allons créer un dégradé linéaire de trois couleurs : vert au début (0x00FF00), blanc au milieu (0xFFFFFF) et bleu marine à la fin (0x000088).

Le vert et le bleu seront opaque et le blanc aura une transparence de 50% : [1, 0.5, 1].

Les couleurs ne seront pas réparties de façon uniforme, le vert sera la couleur dominante. Le vert démarrera à gauche (0), le bleu sera à droite du dégradé (255) et le blanc sera au ¾ du dégradé (190). [0, 190, 255]

Nous remarquons que par défaut le dégradé n'est pas étiré sur la largeur de la ligne. Pour remédier à ce problème, nous allons définir le 5^ème paramètre de la méthode.

Ce paramètre défini une matrice de transformation du dégradé et accepte une instance de la classe Matrix.

Création d'un objet de type Matrix pour le dégradé

La classe Matrix représente une matrice de transformation que l'on peut utiliser pour appliquer diverses transformations graphiques à un objet d'affichage.

Nous allons ensuite utiliser la méthode createGradientBox() de la classe Matrix pour définir la largeur et la hauteur du dégradé.

Nous allons définir la largeur du dégradé sur 200, valeur correspondant à la largeur de la ligne et la hauteur sur 20, valeur correspondant à l'épaisseur de la ligne.

L'objet de type Matrix est ensuite passé en tant que 5^ème paramètre de la méthode lineGradientStyle().

Nous pouvons contrôler l'angle du dégradé grâce au troisième paramètre de la méthode createGradientBox().

Nous avons vu dans un billet précédent l'utilisation des classes Shape et Graphics pour faire du dessin vectoriel.
La classe Sprite va nous permettre de réaliser la même chose à la différence qu'un objet de type Sprite pourra contenir plusieurs dessins de type Shape. En effet, cette classe est similaire à la classe MovieClip mais elle ne possède pas de timeline.
D'autre part, contrairement à la classe Shape, la classe Sprite possède des événements utilisateurs (souris, clavier...)

;)

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

Dessins avec un remplissage et un contour

Le remplissage se fait avec ma méthode beginFill() et le contour avec la méthode lineStyle().

Dessins avec un contour

;-)

Bonjour,

Les classes Shape et Graphics vont nous permettre de créer du dessin vectoriel en ActionScript.

La classe Shape est utilisée pour créer des formes simples.

La classe Graphics ne possède pas de constructeur. C'est un ensemble de méthodes de dessin. Les méthodes de la classe Graphics seront appelées dans la propriété graphics de la classe Shape.

L'exemple suivant va nous permettre de dessiner un rectangle bleu nommé rectangle, positionné en x à 50 pixels, en y à 200 pixels, d'une largeur de 100 pixels et d'une hauteur de 30 pixels. Le positionnement se fait par rapport à l'élément parent dans lequel on affiche le rectangle via la méthode addChild.

;-)