Consulté 67,859 fois

Déplacer un élément avec la souris (action DRAG)

Modification du pointeur ou du curseur en Flash - Illusion avec la méthode Mouse.hide et startDrag

Django (Oznog) Blais, Trucsweb (10 décembre 2003)

Cette technique permet de simuler un design de curseur ou des comportements plus complexes comme celui de la cible d’un jeu. Bien qu’elle soit excessivement simple, elle s’avère instable. Le résultat n’est pas toujours probant car le curseur du système n’est pas réellement substitué par le movieClip mais plutôt caché.

C’est en fait une illusion qui consiste à cacher le curseur tout en appliquant la méthode « startDrag » à l’instance d’un movieClip. De cette façon, puisque le clip glisse sur une souris invisible, il semble s’être substitué à elle.

Glisser un objet (drag)
La méthode « startDrag » attache un objet à la souris qui semble le déplacer. Elle se contente de donner au clip les coordonnées X/Y de la sourris. Déposez un "clip" sur la scène, donnez-lui le nom d’instance "neoCurseur" et entrez ce code dans l’action de ce movieClip.

onClipEvent (load) {
  // Glisse le clip sur la souris
  startDrag (this, true);
}

Il suffit d’enlever la souris pour donner l’illusion d’un nouveau curseur.

onClipEvent (load) {
  // Cache la souris
  Mouse.hide();
  // Glisse le clip sur la souris
  startDrag (this, true);
}

Pour complexifier un peu la chose, créer un bouton sur la scène et forcer le réaffichage de la souris par défaut, soit la main puisque c’est un bouton. L’idée est de capturer les événements « rollOver » et « rollOut » de façon à afficher le curseur par défaut mais aussi d’effacer le nouveau curseur.

on (rollOver) {
  // Réaffiche le curseur par défaut
  Mouse.show();
  // Efface le nouveau curseur
  _root.neoCurseur._visible = false;
}
on (releaseOutside, rollOut, dragOut) {
  // Efface la souris
  Mouse.hide();
  // Réaffiche le nouveau curseur
  _root.neoCurseur._visible = true;
}

Une petite variante, changer de curseur sur un bouton, sans devoir réafficher la souris par défaut, il suffit de changer le clip à "glisser". Il faut ajouter un deuxième clip curseur sur la scène, et lui donner le nom "curseur2". Puis sur un bouton de la scène, ajouter ce code :

on (rollOver) {
  _root.neoCurseur._visible = false;
  _root.curseur2._visible = true;
  _root.curseur2.startDrag(true);
}
on (releaseOutside, rollOut, dragOut) {
  _root.curseur2._visible = false;
  _root.neoCurseur.startDrag(true);
   _root.neoCurseur._visible = true;
}

Voilà l’essentiel sur le sujet, et cet exemple à télécharger twFlashCurseur.zip:

Partager |

Dernière mise à jour : 2010-12-29