Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Liaison avec une image de la bibliothèque et gestion du mouvement au dessus d'un objet d'affichage

Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré)

Article écrit le 23/05/2008 23:01.
Par tannoy ( Antony Chauviré ).

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é 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é 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.

var dataToucan:Toucan = new Toucan(1024, 768);

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.

var imgToucan:Bitmap = new Bitmap(dataToucan);

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.

var leToucan:Sprite = new Sprite();
leToucan.addChild(imgToucan);

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.

leToucan.scaleX = leToucan.scaleY = .5;
addChild(leToucan);

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.

function bougeSurToucan(evt:MouseEvent):void
{
trace("Le pointeur bouge sur l'image");
}
leToucan.addEventListener(MouseEvent.MOUSE_MOVE, bougeSurToucan);

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.

function bougeSurToucan(evt:MouseEvent):void
{
	trace("Coordonnée X par rapport à l'image : " + evt.localX + " - ", "Coordonnée Y par rapport à l'image : " + evt.localY + " - "+ " - ", "Coordonnée X par rapport à la scène : " + evt.stageX + " - ", "Coordonnée Y par rapport à la scène : " + evt.stageY);
}

Le script complet

var dataToucan:Toucan = new Toucan(1024, 768);
var imgToucan:Bitmap = new Bitmap(dataToucan);
var leToucan:Sprite = new Sprite();
leToucan.addChild(imgToucan);
leToucan.scaleX = leToucan.scaleY = .5;
addChild(leToucan);
 
function bougeSurToucan(evt:MouseEvent):void
{
	trace("Coordonnée X par rapport à l'image : " + evt.localX + " - ", "Coordonnée Y par rapport à l'image : " + evt.localY + " - "+ " - ", "Coordonnée X par rapport à la scène : " + evt.stageX + " - ", "Coordonnée Y par rapport à la scène : " + evt.stageY);
}
leToucan.addEventListener(MouseEvent.MOUSE_MOVE, bougeSurToucan);