Les événements de bouton

Lorsque vous créez un bouton, il est possible d'assigner du code ActionScript à celui-ci. Mais on peut jouer très finement avec ces boutons : en effet, il est possible de déclencherune action lorsqu'on clique sur le bouton, mais également lorsque la souris passe par dessus le bouton, lorsqu'on drag-n-drop le bouton, ou même lorsqu'on saisit des caractères au clavier.

Vous pouvez télécharger le .FLA original ici

Pour commencer

Pour montre les différentes possibilités liées aux boutons, j'ai créé une petite animation comme suit :

Toutes les actions intéressantes que je veux montrer sont concentrées sur le bouton "Testez-Moi". Il y a donc deux boutons : "Testez-moi", sur lequel il y aura plein d'événements, et "Effacer", qui remet la zone bleue à vide.

Parce qu'en fait, tous les tests que nous allons effectuer vont renvoyer un texte explicite dans la zone bleue. Plus exactement, il s'agit d'une zone de texte dynamique créée sur le calque Resultat, derrière laquelle j'ai mis un fond bleu (un rectangle bleu clair dessiné à la main sur le même calque) :

Dans la première image, comme action, je me suis contenté d'initialiser la zone de texte à vide : . Le bouton "Effacer" remet également la zone de texte à vide en cas de besoin (quand elle est trop pleine) : . Ce qui permet déjà de comprendre comment fonctionne le clic sur un bouton : on(press).

Voyons un peu plus en détail ce que fait on(press). Sur le bouton "Testez-moi", inscrivons-y le code suivant :

C'est à dire que lorsqu'on va "presser" sur le bouton avec la souris, TXTResultat (la zone en bleue) sera égale à elle-même avec en plus (+=) le texte entre guillemets "on(press)", suivi d'un retour chariot (pour passer à la ligne; c'est à dire le code ASCII 13).

on(press)

En d'autres mots, chaque fois que vous cliquerez sur le bouton, il va ajouter un "on(press)" dans la zone bleue. Essayez :

on(release)

Ajoutez ce bout de code à votre bouton :

Essayez :

on(releaseOutside)

Ajoutez ce code :

on(releaseOutside)
  {
  TXTResultat += "on(releaseOutside)" + chr(13);
  }

Essayez maintenant de cliquer dans le bouton et d'essayer de le faire glisser vers l'extérieur, ou carrément sur le bouton Effacer. Vous n'y arriverez pas, mais lorsque vous relâcherez le bouton de la souris, le on(releaseOutside) va s'afficher :

on(rollOver)

Ajoutez ceci :

on(rollOver)
  {
  TXTResultat += "on(rollOver)" + chr(13);
  }

Cette fois, le simple fait de survoler le bouton sans même cliquer va exécuter cet événement. Essayez :

on(rollOut)

on(rollOut)
  {
  TXTResultat += "on(rollOut)" + chr(13);
  }

Cette fois, c'est une fois que la souris a survolé le bouton mais qu'elle s'en va (sans cliquer) que rollOut est exécuté :

on(dragOut)

on(dragOut)
  {
  TXTResultat += "on(dragOut)" + chr(13);
  }

Le dragOut se situe à mi-chemin entre rollOut et releaseOutside. C'est à dire que si vous clqiuez sur le bouton et que vous essayez de le faire glisser ailleurs, dès que la souris va se trouver en dehors du bouton, mais que vous avez bien le doigt pressé sur le bouton, dragOut va apparaître dans la liste :

C'est tout pour les événements de souris. Il y a maintenant les événements-clavier. En effet, la simple présence d'un bouton sur une animation suffit à pouvoir utiliser le clavier. C'est donc un événement-bouton sans être un événement bouton...

on (keyPress "<Left>")

Premier essai de clavier : la touche flèche gauche : ajoutez ce code sous les autres codes de souris:

on (keyPress "<Left>")
  {
  TXTResultat += "keyPress '<Left>'" + chr(13);
  }

Pour tester, vous devez cliquer dans l'animation qui suit ce paragraphe. Le simple fait de déplacer la souris sur le bouton suffira a déclencher l'événement rollOver, mais l'appui sur la touche "flèche gauche" restera sans effet. Par contre, si vous cliquez dans l'animation, MEME SUR UNE ZONE AILLEURS QUE SUR LE BOUTON, et qu'ensuite vous appuyez sur la touche "flèche gauche", vous verrez l'événement s'ajouter dans la liste :

Les autres touches de clavier

Il est inutile de donner un exemple différent à chaque touche, car le principe est toujours le même. Les touches gérables sont :

* Ne fonctionne qu'en situation réelle et pas avec un test effectué dans Flash avec CTRL-ENTER

Un exemple :

on(keyPress "<Home>")
  {
  TXTResultat += "keyPress '<Home>'" + chr(13);
  }

Vous pouvez tester toutes ces touches dans l'animation suivante. Vous constaterz qu'on ne peut donc pas tester avec cette technique toutes les touches du clavier (a, 6, %, ?, etc...)

Remarques

Si on met deux gestionnaires d'événement identiques, seul le premier sera exécuté (dans le cas d'un événement clavier):

on (keyPress "<Space>")
  {
  TXTResultat += "On verra ce texte" + chr(13);
  }
on (keyPress "<Space>")
  {
  TXTResultat += "Mais pas celui ci" + chr(13);
  }

Mais dans le cas d'un événement souris, les deux scripts seront exécutés :

on(rollOver)
  {
  TXTResultat += "On verra ce texte" + chr(13);
  }
on(rollOver)
  {
  TXTResultat += "Et celui-ci aussi" + chr(13);
  }

C'êst étrange, mais c'est comme ça. Je crois qu'il vaut mieux éviter de tels cas de figure, même si aucune erreur n'est générée. Testez : passez simplement la souris au dessus du bouton, et les deux textes seront affichés. Appuyez sur la barre d'espace, et seul le premier sera visible :

Plusieurs boutons avec plusieurs événements on(keyPress "<Home>")

Que se passerait-il si j'avais deux boutons apparents en même temps avec chacun une gestion de la touche Home. Tiens ben le bouton effacer par exemple, je lui rajoute :

on(keyPress "<Home>")
  {
  TXTResultat += "Home bouton vert" + chr(13);
  }

Eh bien, ce code est purement et simplement ignoré ! Pourquoi celui ci et pas l'autre ? je ne sais pas.. Pourtant dans mon exemple, le bouton vert est plus haut dans ma pile de calques...

Mais si je supprime l'autre on(keyPress "<Home>") - Ou que je le met en commentaires, alors celui ci est bien exécuté !

Il faut donc éviter d'avoir plusieurs boutons avec des événements de clavier identiques.

Et pour conclure :

---