Flash

Fenêtre Flash de type PopUp (twPopUp)

Fenêtre Flash de type PopUp (twPopUp) avec capture du double-clic

Ce movieClip «twPopUp» facile à installer permet de générer une fenêtre de type PopUp avec la capture du double-clic pour l’ouvrir ou la fermer et le déplacement (drag) de la fenêtre. Télécharger le code complet. Le movieClip est constitué de deux cadres (frames). La fenêtre "ouverte" sur le premier cadre et la fenêtre "fermée" sur le deuxième. Et bien sûr l’action stop(); sur chacun des cadres. Un simple gotoAndStop(1); ouvre la fenêtre alors qu’un gotoAndStop(2); ferme la fenêtre. Rien de vraiment complexe. Par contre il n’y a aucun événement en Flash pour détecter le double-clic! C’est là que se complique le code...

• Téléchargez twPopUp.zip

Utiliser «mctwPopUp» dans un nouveau document Flash

1. Ouvrez «twPopUp.fla» puis la librairie [F11].

2. Dans le dossier «twPopUp» de la librairie, il y a le movieClip «mctwPopUp». En Glissant «mctwPopUp», tout le dossier viendra de lui-même.

3. Dans un nouveau document Flash (ou un projet en cours), glisser «mctwPopUp» sur la scène.

4. Vous pouvez vérifier en ouvrant la librairie [F11] du nouveau document, le dossier «twPopUp» devrait être là.

Configurer le popUp

1. Double cliquer sur le popUp pour l’éditer.

2. Au centre, sur le calque "Contenu", changer l’image par celle de votre choix. Vous pouvez sur ce calque ajouter du texte, un movieClip, des boutons etc. Il faut simplement s’assurer de rester sur l’image-clée ou cadre 1 (frame 1). La deuxième c’est pour le popUp en état "fermé".

3. Le fond du contenu peut aussi être changé sur le calque «FondContenu» tout en bas. Cliquer sur la scène pour sélectionner le carré bleu et changer ça couleur dans la fenêtre des propriétés.

4. Le titre du PopUp se change sur le calque «Titre».

Tester votre popUp
1. Tester votre Flash.
2. Déplacer le popUp.
3. Double-cliquer sur la bande du haut.
4. Cliquer sur le bouton en haut à droite.

TUTORIEL Comment capturer un double-clic
Je n’ai aucune idée pourquoi Macromedia n’a pas tout simplement d’événement "onDoubleClick". Il faut pour cela simuler la capture à l’aide d’un movieClip et l’événement "mouseUp". La technique consiste à capturer un clic et d’évaluer le temps ou l’intervalle entre ce clic et le suivant. Déterminant ainsi s’il s’agit d’un simple clic ou d’un double-clic.

La première étape consiste à créer un movieClip (avec un contenu), de le placer sur la scène et d’ouvrir la fenêtre action. Assurez-vous que le movieClip est bien sélectionné.

Il nous faut une variable qui contiendra l’intervalle de temps. Ajouter l’action "onClipEvent (load)" pour initialiser cette variable :

onClipEvent (load) {
  // Initialiser notre variable de test.
  nDernierClic = 0;
}

Pour détecter un clic il y a l’événement du movieClip "mouseUp". L’astuce est de garder l’heure quand l’événement est détecté et de mettre l’heure dans notre variable "nDernierClic". Ainsi nous pourrons tester plus tard si l’intervalle entre le premier clic et le second correspond à un intervalle de double-clic. Noter que l’événement "mouseUp" détecte un clic sur toute la surface de la scène. Pour s’assurer que le clic a bien été fait SUR notre movieClip utiliser un "hitTest". Le "hitTest" indiquera si le clic a bien été fait sur le movieClip (il faut du contenu, une image dans le movieClip pour que le "hitest" fonctionne). Donc, si les coordonnées x/y de la souris lors du clic correspondent à celles du movieClip, c’est le temps de donner comme valeur à notre variable nDernierClic l’heure. Ça indique qu’un premier clic a été capturé. En capturant un second clic et sachant que notre variable nDernierClic contient déjà l’heure d’un premier clic, c’est qu’un double-clic vient d’être fait. Ajouter ce code sous le premier dans la fenêtre action :

onClipEvent (mouseUp) {
  // Tester si le clic a bien lieu SUR le movieClip
  if (_parent.hitTest(_root._xmouse,_root._ymouse, true)) {

    // Si notre variable nDernierClic = 0
    // C’est le premier clic, il faut lui donner la valeur de l’heure
    if (nDernierClic == 0) {
      // nDernierClic = maintenant l’heure du premier clic
      nDernierClic = getTimer();

    // Sinon, Voilà un double-clic!!
    // N’oubliez pas de remettre à 0 notre variable nDernierClic
    } else {
      // nDernierClic = maintenant 0
      nDernierClic = 0;
      // Ajouter l’action a entreprendre lors du double-clic ici
      tracer(’Double Clic’);
    }
  }
}

Maintenant l’intervalle. Pour déterminer un double-clic nous évaluerons la durée entre les deux clics. Si cette durée est moins de 3 secondes, c’est un double-clic, sinon c’est trop long pour un double-clic. Il faut que ce test soit effectué le plus souvent possible, au moins à toutes les secondes. Pour ce faire, l’événement du movieClip "enterFrame" est effectué 12 fois seconde (si votre Flash est cadencé à 12 cadres seconde), ce qui est amplement suffisant. Alors la seule chose à faire, c’est de déterminer si la durée est trop grande pour remettre notre variable nDernierClic à zéro. Ajouter sous les codes précédents ce nouveau code :

onClipEvent (enterFrame) {
  // Tester d’abord si un premier clic a été fait
  // Si nDernierClic est > que 0 c’est qu’elle contient l’heure d’un premier clic.
  if (nDernierClic>0) {

    // Sachant qu’un premier clic a été détecté
    // Ont test la différence entre l’heure actuelle - l’heure du premier clic
    // Si la différence est plus grande que 300 (3 secondes)
    // On annule le premier clic en mettant à 0 notre variable nDernierClic
    if ((getTimer()-nDernierClic)>300) {
      nDernierClic = 0;
    }
  }
}

Conclusion
Voilà, c’est tout. À chaque clic, nous savons maintenant si un autre clic a été détecté lors des 3 dernières secondes. Ça fonctionne asser bien malgré le fait que cette technique ajoute une charge au moteur Flash. 12 fois seconde et à temps plein, ça prend une bonne raison pour utiliser le double-clic dans vos animations Flash.

En résumé, créez-vous un movieClip, avec un contenu! Glissez-le sur la scène et ouvrez la fenêtre action. Sélectionner votre movieClip en cliquant dessus et copier ce code dans la fenêtre action :

onClipEvent (load) {
  nDernierClic = 0;
}

onClipEvent (mouseUp) {
  if (_parent.hitTest(_root._xmouse,_root._ymouse, true)) {
     if (nDernierClic == 0) {
      trace(’Clic’);
      nDernierClic = getTimer();
    } else {
      nDernierClic = 0;
      trace(’Double Clic’);
    }
  }
}

onClipEvent (enterFrame) {
  if (nDernierClic>0) {
    if ((getTimer()-nDernierClic)>300) {
      nDernierClic = 0;
    }
  }
}