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

Dans cet exemple, nous allons utiliser une image de la bibliothèque et détecter le mouvement de la souris au dessus de cette image.

Liaison avec une image de la bibliothèque

Pour utiliser un élément de la bibliothèque en ActionScript 3, nous allons devoir, comme les autres objets graphiques, l'instancier avec le mot clé new. Il faut cependant définir la classe de notre objet dans ces propriétés de liaisons. Cette classe sera auto-générée lors de la compilation.

Nous allons donc importer une image d'un toucan dans la bibliothèque et réaliser un clic-droit sur celle-ci puis choisir Liaisons.

Nous allons cocher l'option Exporter pour ActionScript afin de rendre éditable les champs Classe et Classe de base.

Dans les propriétés de liaisons de ce bitmap, nous allons définir sa classe. En l'occurrence ici nous utiliserons comme nom de classe : Toucan. La classe de base de ce bitmap est la classe BitmapData. La classe Toucan sera auto-générée lors de la compilation.

Création de l'objet de type Toucan

L'image possède une largeur de 1024 pixels et une hauteur de 768 pixels. Nous préciserons ces dimensions dans le constructeur de la classe Toucan.

Création de l'objet de type Bitmap

La classe BitmapData dont hérite notre classe Toucan, est une classe qui ne contient que les données de l'image. On peut imaginer ces données sous la forme d'une grille de pixels. Un objet de type BitmapData ne peut être affiché à l'écran.

Pour afficher ces données, on va donc devoir utiliser une classe qui représente visuellement les données bitmap. Cette classe est la classe Bitmap.

La classe Bitmap est une classe qui peut être affichée à l'écran. Elle hérite de la classe DisplayObject. Le constructeur Bitmap() vous permet de créer un objet Bitmap contenant une référence à un objet BitmapData.

Nous allons donc passer l'objet dataToucan en tant que paramètre d'un objet de type Bitmap.

Création de l'objet Sprite

Cependant, un objet de type Bitmap ne possède pas d'événements de souris car la classe Bitmap n'hérite pas de la classe InteractiveObject. Nous allons donc afficher l'objet imgToucan dans un objet de type Sprite. L'objet de type Sprite est conteneur d'objets d'affichage notamment d'objets images, sur lequel on peut définir des événements de souris.

Réduire l'image et l'afficher

Nous allons ensuite réduire l'image à 50% de sa taille d'origine. Nous utiliserons pour cela les propriétés scaleX et scaleY héritées de la classe DisplayObject. Pour ces 2 propriétés, une valeur spécifiée à 1 correspond à 100% de la taille d'origine.

Nous remarquons que nous avons utilisé la forme courte au niveau de la valeur. On aurait pu l'écrire 0.5. Ces 2 formes sont équivalentes.

L'événement MOUSE_MOVE en ActionScript 3.

L'événement MouseEvent.MOUSE_MOVE permet de détecter le mouvement au dessus d'un objet. Contrairement à l'ActionScript 2, l'événement est déclenché uniquement quand la souris bouge au dessus d'un objet et non plus dès que la souris bouge sur la scène.

Création de l'événement MOUSE_MOVE sur l'objet leToucan

L'image étant maintenant affichée, nous allons lui ajouter un événement MOUSE_MOVE afin de détecter le déplacement de la souris sur celle-ci.

Nous allons afficher dans la fenêtre de sortie, un message, à chaque fois que la souris se déplacera au-dessus de l'image.

Les propriétés de l'objet MouseEvent

Lorsqu'un événement est diffusé, un objet de type Event ou d'une des classes dérivées, est envoyé en paramètre à la fonction de réponse de l'événement.

Cet objet contient des informations, liées à l'événement en cours de diffusion, accessibles à travers des propriétés de l'objet.

Dans notre exemple, nous utilisons un événement MOUSE_MOVE de la classe MouseEvent. Cette classe possède notamment 4 propriétés, localX, localY, stageX, stageY, que nous allons présenter.

• La propriété localX contient la coordonnée horizontale à laquelle l'événement s'est produit par rapport à l'image.
• La propriété localY contient la coordonnée verticale à laquelle l'événement s'est produit par rapport à l'image.
• La propriété stageX contient la coordonnée horizontale à laquelle l'événement s'est produit par rapport à la scène.
• La propriété stageY contient la coordonnée verticale à laquelle l'événement s'est produit par rapport à l'image.

Nous allons afficher ces différentes valeurs lors du survol de l'image.

Le script complet

Le chargement de l'image et son affichage, une fois le chargement terminé, sont expliqués dans ces 2 billets :
Le chargement d'images
Gérer la progression et la fin du chargement d'une image

Chargement de l'image

La gestion de l'affichage en fondu

Nous allons utilisé un objet Timer qui va nous permettre d'augmenter de 10% l'alpha du conteneur toutes les 200 millisecondes. L'objet Timer possède 2 arguments. Le premier permet d'indiquer la fréquence à laquelle on veut exécuter une action. Le second permet d'indiquer le nombre de fois où l'on veut exécuter cette action.
On évoquera l'événement TIMER de la classe TimerEvent afin d'exécuter en réponse la fonction onAlpha

Le timer ne démarre pas automatiquement, c'est pourquoi on utilise la méthode start du timer dans la fonction onComplete

;)

Le chargement est explique dans le billet : Le chargement d'images ou de swf

La classe LoaderInfo fournit des informations sur les fichiers swf chargés et sur les images chargées. Les informations fournies inclues une progression de chargement, les url du chargeur et du contenu chargé, le nombre total de bits pour le média, et la largeur/hauteur du média.

On accède aux objets LoaderInfo grâce à la propriété contentLoaderInfo de l'objet Loader.
Les événements progress et complete sont des événements de la classe LoaderInfo et non de la classe Loader. Il faut donc ajouter la méthode addEventListener() à Loader.contentLoaderInfo et non à Loader directement.

L'événement progress est évoqué régulièrement durant le chargement de l'image. L'événement complete est évoqué lorsque le chargement a réussi.

;-)

Le chargement d'images ou de swf dans Flash va se faire grâce à deux nouvelles classes : Loader et URLRequest.
La classe Loader va nous permettre de créer un conteneur de chargement. La classe URLRequest va nous permettre de définir l'url absolue ou relative du fichier à charger.

Le chargement se fera grâce à la méthode load() de l'objet loader. L'affichage de l'image ou du swf se fera grâce à la méthode addChil().

L'image utilisée est celle-ci :

;-)

A suivre un billet sur les événements liés au chargement d'images ou de swf :

http://www.bases-as3.fr/13-les-evenements-progress-et-complete-de-la-classe-loaderinfo