Pas encore membre ? Enregistrez-vous ! | Identifiants égarés ?
Fermer

Drag and drop

  • Introduction
  • Informations
Drag and drop Nous avions déjà vu dans un précédent tutoriel comment réaliser un "drag and drop" en AS2.
Je vous propose cette fois d'étudier son l'emploi avec AS3.  
Netger
  • Auteur : Netger
  • Publication : 31 mai 2008 17:12
  • Consultations : 4940
 

1. Préparation de l'espace de travail

Débutons ce tutoriel par l'habituel création d'un nouveau document Flash (AS3) :
  • dimensions : 400 x 200 pixels (peu importe)
  • couleur d'arrière-plan : blanc (peu importe)
  • cadence : 12 images par secondes
  • unité de la règle : pixels
Drag and drop en as3 image 1 Dans un premier temps, comme dans le tutoriel sur le drag and drop en AS2, j'utiliserai un simple rectangle pour réaliser la démonstration.
Nous réaliserons ensuite un petit puzzle afin de l'adapter en AS3 (comme nous l'avions fait en AS2).

Pour le moment créez un simple rectangle et convertissez le en symbole "movie clip".

Remarque : en AS3 le drag and drop peut-être utilisé sur un symbole clip.

2. Mise en place du Drag and Drop

Avant toute chose définissez un nom pour l'occurrence du symbole clip : j'utiliserai le nom "objet".
Cela permettra de cibler l'élément avec notre code AS.

Drag and drop en as3 image 2 Nous allons maintenant mettre en place le drag and drop de notre symbole clip avec un petit bout de code AS3.
Créez un nouveau calque et placez-y le code suivant :
Code-source actionscript
  1. function dragClip(evt:MouseEvent):void
  2. {
  3. 	objet.startDrag();
  4. }
  5.  
  6. function dropClip(evt:MouseEvent):void
  7. {
  8. 	objet.stopDrag();
  9. }
  10.  
  11. objet.addEventListener(MouseEvent.MOUSE_DOWN, dragClip);
  12. objet.addEventListener(MouseEvent.MOUSE_UP, dropClip);
 
Certains peuvent se sentir un peu dérouté par ce code, je vais donc vous expliquer son fonctionnement global :
Dans la première partie du script nous créons les 2 fonctions dragClip() et dropClip().
Celles-ci nous permettront de déclencher le drag and drop sur l'élément grâce aux fonctions startDrag() et stopDrag().
Dans la seconde partie nous affectons un écouteur d'événement à notre symbole clip.
  • 1er déclencheur : lance la fonction dragClip() lorsque le clic de la souris est enfoncé.
  • 2éme déclencheur : lance la fonction dropClip() lorsque le clic de la souris est relâché.
Enregistrez votre document et publiez le afin de vérifier que tout fonctionne correctement.

3. Réaliser un puzzle (étape 1)

Drag and drop en as3 image 3 Pour illustrer le drag and drop de plusieurs éléments je vous propose de réaliser un petit puzzle.
Créez un nouveau document flash puis importez et placez les pièces de votre puzzle sur la scène.

4. Réaliser un puzzle (étape 2)

Commencez par convertir en symbole clip chaque pièce de votre puzzle et à leur donner un nom d'occurrence .
Drag and drop en as3 image 4 Cela étant fait nous allons légèrement modifier les fonctions rédigées dans le chapitre 2 afin de pouvoir les utiliser avec plusieurs éléments :
Code-source actionscript
  1. function dragClip(evt:MouseEvent):void
  2. {
  3. 	evt.target.startDrag();
  4. }
  5.  
  6. function dropClip(evt:MouseEvent):void
  7. {
  8. 	evt.target.stopDrag();
  9. }
 
Ici nous affectons la fonction startDrag() à l'élément (target) dont l'écouteur d'événement à enregistré le comportement déclencheur (clic de la souris enfoncé)
Idem pour la fonction stopDrag() (mais avec le clic de la souris relaché)...

Pour finir ajoutez un écouteur d'événement à chaque symbole auquel vous souhaitez attribuer un comportement "drag and drop" :
Code-source actionscript
  1. elmt_1.addEventListener(MouseEvent.MOUSE_DOWN, dragClip);
  2. elmt_1.addEventListener(MouseEvent.MOUSE_UP, dropClip);
  3. elmt_2.addEventListener(MouseEvent.MOUSE_DOWN, dragClip);
  4. elmt_2.addEventListener(MouseEvent.MOUSE_UP, dropClip);
  5. etc...
 
 
  • Rédiger un commentaire
  • Afficher les commentaires (0)
Vous devez être identifié pour poster un commentaire
Aucun commentaire