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

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.

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.

Dans l'article Liaison avec un clip de la bibliothèque, nous avons vu comment il était possible d'utiliser un objet de la bibliothèque en ActionScript 3.

Nous allons donc importer une image d'un toucan dans la bibliothèque et dans les propriétés de ce bitmap, nous allons définir sa classe, en l'occurence ici nous utiliserons comme nom de classe : Toucan. La classe de base de ce bitmap est la classe BitmapData.

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. Pour afficher ces données, on va passer l'objet dataToucan en tant que paramètre d'un objet de type Bitmap. La classe Bitmap est une classe qui peut être affichée à l'écran, elle hérite de la classe DisplayObject.

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.

Réduire l'image et l'afficher

Nous allons ensuite réduire l'image à 50% de sa taille d'origine.

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

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

Le fichier d'exemple

Téléchargez le fichier d'exemple de l’événement MOUSE_MOVE

Je vous conseille de relire l'article sur l'événement click pour comprendre le modèle d'événements.

;-)

L'ActionScript 3 intègre un nouveau modèle d'événements basé sur le Document Object Model (DOM) Level 3 Events Specification.
Cette nouvelle version de l'ActionScript introduit un unique gestionnaire d'événements qui remplace les différents mécanismes des versions précédentes du langage.
Pour ajouter un événement en AS3, on utilise la méthode addEventListener(). Une fonction sera éxécutée en réponse à l'événement.

Un objet event est passé en tant qu'argument à la fonction. Cet objet event peut-être une instance des différentes classes du package flash.events, telles que MouseEvent, KeyboardEvent, FocusEvent...

2 articles très complets sur les événements Flash : L'article de starmonkey et L'article de ekameleon

;-)