Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox



Déplacer un objet par un Drag and Drop en ActionScript 3.

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

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

L'ActionScript permet le déplacement d'un objet par un glisser-déposer.

Nous utiliserons 2 méthodes de la classe Sprite, les méthodes StartDrag() et StopDrag(). Les classes MovieClip et UIComponent héritent de la classe Sprite donc nous pourrons facilement déplacer des clips mais aussi les composants d'interface du panneau Composants.

Le déplacement se fera en utilisant des événements.

Un système de gestion des événements permet au programmeur de répondre aux actions de l'utilisateur et aux événements système de manière pratique. 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.

Dans la gestion des événements, on utilisera différents éléments. Le premier élément, que l’on appellera la cible, sera l’objet (Clip, Bouton, Image, Texte…) sur lequel on veut écouter si un événement a lieu. On utilise la méthode addEventListener() sur cet objet.
Cette méthode prend 2 paramètres, le premier correspond à l’événement que vous souhaitez écouter. Le second correspond à la fonction qui sera exécutée en réponse à l'événement.

cible.addEventListener(Classe de l’événement.événement, fonction de réponse);

Le second élément sera une fonction de réponse.

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

function fonction de réponse(evt : Classe de l’événement)
{
 
}

Déplacer un clip

Nous allons déplacer un clip dans lequel nous avons dessiné une étoile. L'occurence du clip est nommée etoile_mc. Le Drag and Drop se fait en 2 étapes. La première étape consiste à déplacer l'objet lorsque l'on reste appuyé sur le bouton de la souris. La deuxième étape consiste à positionner l'objet lors du relâchement du bouton de la souris.

Déplacer l'objet sur l'appui sur le bouton de la souris

Il n'existe pas d'événements de souris qui nous permettent de détecter que le bouton n'est pas relâcher.

Nous allons utiliser l'événement MouseEvent.MOUSE_DOWN, qui nous permet de savoir que le bouton de la souris a été enfoncé sur l'étoile.

En réponse à notre événement, nous exécuterons la fonction dragEtoile(). Dans cette fonction, nous allons indiquer à notre clip de suivre le pointeur de souris grâce à la méthode startDrag() de la classe Sprite.

function dragEtoile(evt:MouseEvent):void
{
etoile_mc.startDrag();//L'étoile suit le pointeur de souris
}
etoile_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragEtoile);//Quand j'appuie sur le bouton de la souris

Positionner l'objet lors du relâchement du bouton de la souris

A ce stade, lorsque nous relâchons le bouton de la souris, l'étoile continue de suivre le pointeur.

Nous allons donc utiliser l'événement MouseEvent.MOUSE_UP, qui nous permet de savoir que le bouton de la souris a été relâché.

En réponse à notre événement, nous exécuterons la fonction dragEtoile(). Dans cette fonction, nous allons indiquer à notre clip de ne plus suivre le pointeur de souris grâce à la méthode stopDrag() de la classe Sprite.

function dropEtoile(evt:MouseEvent):void
{
etoile_mc.stopDrag();//L'étoile s'arrête là ou elle est
}
etoile_mc.addEventListener(MouseEvent.MOUSE_UP, dropEtoile);//Quand je relache le bouton de la souris

Déplacer plusieurs clips

Dans le cas ou nous souhaitons déplacer plusieurs clips, nous allons utiliser les mêmes gestionnaires d'événements (fonctions de réponse) pour tous les clips. Nous avons vu qu’un objet event est passé en tant qu'argument à la fonction de réponse.

Cet objet de type Event ou d’une des classes dérivées (MouseEvent, KeyboardEvent…), possède une propriété target dans laquelle est stocké l’objet qui a levé l’événement.

Nous utiliserons donc la propriété target de l'objet MouseEvent qui nous permettra de cibler le clip sur lequel l'événement a eu lieu.

//Deplacer plusieurs clips
function suivreSouris(evt:MouseEvent):void
{
evt.target.startDrag();
}
function arreterSuivi(evt:MouseEvent):void
{
evt.target.stopDrag();
}
bouche_mc.addEventListener(MouseEvent.MOUSE_DOWN, suivreSouris);
bouche_mc.addEventListener(MouseEvent.MOUSE_UP, arreterSuivi);
cheveuxRouges_mc.addEventListener(MouseEvent.MOUSE_DOWN, suivreSouris);
cheveuxRouges_mc.addEventListener(MouseEvent.MOUSE_UP, arreterSuivi);
echarpe_mc.addEventListener(MouseEvent.MOUSE_DOWN, suivreSouris);
echarpe_mc.addEventListener(MouseEvent.MOUSE_UP, arreterSuivi);
nez_mc.addEventListener(MouseEvent.MOUSE_DOWN, suivreSouris);
nez_mc.addEventListener(MouseEvent.MOUSE_UP, arreterSuivi);
sourcils_mc.addEventListener(MouseEvent.MOUSE_DOWN, suivreSouris);
sourcils_mc.addEventListener(MouseEvent.MOUSE_UP, arreterSuivi);
yeux_mc.addEventListener(MouseEvent.MOUSE_DOWN, suivreSouris);
yeux_mc.addEventListener(MouseEvent.MOUSE_UP, arreterSuivi);

Optimisation du code

Nous remarquons cependant que nous sommes obligés pour chaque objet, d’ajouter un écouteur d’événement, ce qui alourdit considérablement le code.

Afin d’optimiser notre code, nous allons utiliser le système de propagation des événements. En effet, en ActionScript 3, les événements sont propagés jusqu’aux enfants d’un conteneur. C'est-à-dire qu’il nous est possible d’ajouter un écouteur d’événement à un conteneur et que ce soit les enfants du conteneur qui réagissent à l’événement.

Dans notre exemple, les différents clips sont placés sur la séquence. Nous allons donc ajouter les événements MOUSE_DOWN et MOUSE_UP à notre scène et par conséquent, tous les objets présents sur la scène réagiront à ces 2 événements.

//Deplacer plusieurs clips
function suivreSouris(evt:MouseEvent):void
{
evt.target.startDrag();
}
function arreterSuivi(evt:MouseEvent):void
{
evt.target.stopDrag();
}
 
addEventListener(MouseEvent.MOUSE_DOWN, suivreSouris);
addEventListener(MouseEvent.MOUSE_UP, arreterSuivi);