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

Drag and drop

  • Introduction
  • Informations
Drag and drop Ce tutoriel présente l'utilisation du "drag and drop" dans Flash.
La démonstration est réalisée sous AS2 et s'achève par un exemple d'utilisation.  
Netger
  • Auteur : Netger
  • Publication : 29 déc. 2005 17:45
  • Consultations : 4916
 

1. Préparation de l'espace de travail

Créez un nouveau document flash et attribuez lui les propriétés suivantes :
  • 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 as2 image 1 Commencez par créer ou importer une image sur laquelle utiliser la "drag and drop".

Pour le moment j'utiliserai un simple rectangle afin que la démonstration reste la plus simple possible.
Placez votre image sur la scène, convertissez la en symbole "Bouton" puis passez à l'étape suivante.

Remarque : en AS2 le drag and drop ne peut-être utilisé que sur un symbole bouton.

2. Mise en place du Drag and Drop

Drag and drop en as2 image 2 Notre scène étant prête nous pouvons maintenant entrer dans le vif du sujet : le "drag and drop".

Cliquez sur le bouton puis ouvrez le panneau AS et insérez-y le code suivant :
Code-source actionscript
  1. on(press)
  2. {
  3. 	startDrag("");
  4. }
  5.  
  6. on(release)
  7. {
  8. 	stopDrag();
  9. }
 
Vous pouvez maintenant publier votre animation afin d'en tester le bon fonctionnement.

La suite de ce tutoriel vous propose d'aller un peu plus loin en réalisant un petit puzzle.
Vous y verrez notamment comment utiliser le drag and drop sur plusieurs éléments.

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

Afin de mettre en pratique ce que nous avons vu dans les chapitres ci-dessus nous allons donc réaliser un petit puzzle.

Cette partie vous permettra de bien comprendre l'utilisation de la fonction startDrag() avec plusieurs éléments.

Drag and drop en as2 image 3 La découpe des pièces du puzzle n'étant pas le sujet de ce tutorial je considère que vous savez comment obtenir ces différents éléments.

Pour cette première étape, importez et placez les pièces de votre puzzle sur la scène.

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

Comme nous travaillons maintenant avec plusieurs éléments il nous faudra les nommer afin de pouvoir les différencier.

Drag and drop en as2 image 4 Ainsi, convertissez en symbole bouton chaque pièce de votre puzzle sans oublier de lui donner un nom d'occurrence.
Soyez rigoureux dans les noms que vous attribuez où vous risquez de ne plus vous y retrouver !!

Il ne manque plus qu'un peu de code pour faire fonctionner tout ça.
Nous allons donc utiliser à peu de chose prés le code étudié dans les 2 premiers chapitres :
Code-source actionscript
  1. on(press)
  2. {
  3. 	startDrag("nom_de_l_occurrence");
  4. }
  5.  
  6. on(release)
  7. {
  8. 	stopDrag();
  9. }
 
Ce code doit être placé sur chaque bouton en prenant soin de bien remplacer "nom_de_l_occurrence" par le nom utilisé pour l'occurrence concernée.

Voilà c'est terminé !!
Vous pouvez maintenant essayer de faire votre puzzle pour vérifier que tout fonctionne correctement.  
  • Rédiger un commentaire
  • Afficher les commentaires (0)
Vous devez être identifié pour poster un commentaire
Aucun commentaire