Déplacement par Drag and Drop

Par
tannoy
– 9 avril 2008Publié dans : Interaction

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

L'ActionScript permet le déplacement d'un objet par un glisser-déposer. Nous utiliserons 2 méthodes de la classe Sprite. 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.

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. Et nous allons indiquer à notre clip de suivre le pointeur de souris grâce à la méthode startDrag() de la classe Sprite.

COPIER-COLLER
Actionscript:
  1. function dragEtoile(evt:MouseEvent):void
  2. {
  3. etoile_mc.startDrag();//L'étoile suit le pointeur de souris
  4. }
  5. 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é. Et nous allons indiquer à notre clip de ne plus suivre le pointeur de souris grâce à la méthode stopDrag() de la classe Sprite.

COPIER-COLLER
Actionscript:
  1. function dropEtoile(evt:MouseEvent):void
  2. {
  3. etoile_mc.stopDrag();//L'étoile s'arrête là ou elle est
  4. }
  5. 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 pour tous les clips. Cependant, nous utiliserons la propriété target de l'objet MouseEvent qui nous permettra de cibler le clip sur lequel l'événement a eu lieu.

COPIER-COLLER
Actionscript:
  1. //Deplacer plusieurs clips
  2. function suivreSouris(evt:MouseEvent):void
  3. {
  4. evt.target.startDrag();
  5. }
  6.  
  7. function arreterSuivi(evt:MouseEvent):void
  8. {
  9. evt.target.stopDrag();
  10. }
  11.  
  12. bouche_mc.addEventListener(MouseEvent.MOUSE_DOWN, suivreSouris);
  13. bouche_mc.addEventListener(MouseEvent.MOUSE_UP, arreterSuivi);
  14. cheveuxRouges_mc.addEventListener(MouseEvent.MOUSE_DOWN, suivreSouris);
  15. cheveuxRouges_mc.addEventListener(MouseEvent.MOUSE_UP, arreterSuivi);
  16. echarpe_mc.addEventListener(MouseEvent.MOUSE_DOWN, suivreSouris);
  17. echarpe_mc.addEventListener(MouseEvent.MOUSE_UP, arreterSuivi);
  18. nez_mc.addEventListener(MouseEvent.MOUSE_DOWN, suivreSouris);
  19. nez_mc.addEventListener(MouseEvent.MOUSE_UP, arreterSuivi);
  20. sourcils_mc.addEventListener(MouseEvent.MOUSE_DOWN, suivreSouris);
  21. sourcils_mc.addEventListener(MouseEvent.MOUSE_UP, arreterSuivi);
  22. yeux_mc.addEventListener(MouseEvent.MOUSE_DOWN, suivreSouris);
  23. yeux_mc.addEventListener(MouseEvent.MOUSE_UP, arreterSuivi);

 Le script  complet

Exemple de Drag and Drop