Les événements de clip

Les événements de clip, comme vous allez le voir, ressemblent beaucoup aux événements de boutons, mais leur syntaxe est quelque peu différente, et les effets également.

Avant de commencer ce didacticiel, il est nécessaire d'avoir a sa disposition une animation toute prête : ici

onClipEvent

Alors que les boutons possédaient l'événement on (on(press), on(rollOut), ...), les clips exigent les événements onClipEvent. Ce ne sont pas exactement les mêmes.

Il y a 3 genres d'événements pour les clips :

  1. Les événements automatiques : C'est à dire qu'ils se déclenchent indépendamment d'une quelconque action de l'utilisateur : load (au l'apparition), unload(à la disparition), et enterFrame (une fois par image)
  2. Les événements de souris : dès que l'utilisateur manipule la souris en présence d'un clip visible dans l'animation
  3. Les événements de clavier : dès que l'utilisateur presse une quelconque touche de son clavier en présence d'un clip visible dans l'animation

Les événements automatiques

onClipEvent(load)

Cet événement se produit lors du chargement de l'animation. C'est à dire tout de suite. En l'occurrence, juste après l'Actionscript qui se trouve dans la première image du calque Actions.

Ajoutez ce code

onClipEvent(load)
  {
  _root.TXTResultat = _root.TXTResultat + "load" + chr(13);
  }

sur le clip :

Constatez que ce n'est pas TXTResultat = quelque chose, mais _root.TXTResultat. _Root veut dire "Racine", c'est à dire que comme nous sommes dans le clip, même si on a pas cliqué 2 fois dessus, il faut, pour assigner une valeur à TXTResultat, préciser qu'il s'agit bien de TXTResultat de l'animation principale.

L'événement load est exécuté lors de l'apparition du clip dans l'animation. En l'occurrence, c'est tout de suite, mais si on avait laissé quelques images vides avant, comme ceci : , nous aurions dû attendre quelques instants avant de voir apparaître "load". J'ai ajouté une numérotation des images pour mieux se rendre compte de l'ordre d'apparition des textes ()

onClipEvent(unload)

Ajoutez le code suivant en dessous du onload :

onClipEvent(load)
  {
  _root.TXTResultat = _root.TXTResultat + "load" + chr(13);
  }

onClipEvent(unload)
  {
  _root.TXTResultat = _root.TXTResultat + "unload" + chr(13);
  }

Cet événement s'exécutera à l'instant ou le clip disparait de l'écran, ici : . Comme ceci :

onClipEvent(enterFrame)

onClipEvent(load)
  {
  _root.TXTResultat = _root.TXTResultat + "load" + chr(13);
  }
onClipEvent(unload)
  {
  _root.TXTResultat = _root.TXTResultat + "unload" + chr(13);
  }
onClipEvent(enterFrame)
  {
  _root.TXTResultat = _root.TXTResultat + "enterFrame" + chr(13);
  }

Juste après l'événement load, enterFrame s'exécute une fois par image d'apparition du clip. Ici, le clip apparait de l'image 7 à l'image 14 : . J'ai fait exprès de modifier le temps d'apparition du clip, car comme il fait 10 images, ne ne voulaire pas qu'il apparaisse exactement sur 10 images pour lever toute amiguité. enterFrame va s'exécuter très exactement 7 fois : sur les images 8,9,10,11,12,13 et 14. Mais pas sur la 7.La première image ou apparait le clip ne déclenche par enterFrame contre toute attente :

Donc :

Les événements de souris

Pour mieux nous rendre compte des événements de souris, laissons les deux événements

onClipEvent(load)
  {
  _root.TXTResultat = _root.TXTResultat + "load" + chr(13);
  }
onClipEvent(unload)
  {
  _root.TXTResultat = _root.TXTResultat + "unload" + chr(13);
  }

Mais enlevons enterFrame qui s'exécute trop souvent, et empêche une bonne compréhension.

onClipEvent(mouseDown)

Comme on pourrait s'y attendre, cet événement s'exécute à l'instant ou l'utilisateur appuie sur le bouton de sa souris. Mais il faut bien comprendre qu'à l'inverse des événements de boutons, l'utilisateur peut cliquer n'importe ou dans l'animation, du moment que c'est lorsque l'animation est apparente (donc entre load et unLoad), l'événement mouseDown sera exécuté. Et si l'utilisateur clique sur un bouton auquel est également rattaché un événement mouseDown (ou plutôt press pour être précis, dans les boutons), et bien l'événement du clip s'exécute et ensuite l'événement du bouton (et pas l'inverse).

onClipEvent(mouseDown)
  {
  _root.TXTResultat = _root.TXTResultat + "mouseDown" +chr(13);
  }

Essayez :

onClipEvent(mouseMove)

onClipEvent(mouseMove)
  {
  _root.TXTResultat = _root.TXTResultat + "mouseMove" +chr(13);
  }

Les commentaires sur mouseDown sont les mêmes que pour mouseMove. Attention, mouseMove s'exécute à chaque déplacement de la souris, c'est à dire que si vous déplacez la souris juste d'un demi centimètre sur l'animation, mouseMouve à le temps de s'afficher déjà une dizaine de fois (c'est donc un événement encore bien plus "intensif" que mouseDown ou enterFrame). Que vous déplaciez la souris au dessus du clip ou ailleurs dans l'animation ne change rien.

Note aux programmeurs habitués autrement : même si vous cliquez manifestement ailleurs que dans l'animation Flash, style vous sélectionnez CE MOT par exemple, nul besoin de cliquer d'abord dans l'animation avant de tester le mouseMove : il suffit vraiment de la survoler.

onClipEvent(mouseUp)

L'utilisation de mouseUp est la même que mouseDown, sauf que cette fois, c'est quand le bouton de la souris est relâché que cet événement est exécuté. Pour mieux comprendre, nous allons enlever mouseMove, pour laisser seulement les événements suivants :

onClipEvent(load)
  {
  _root.TXTResultat = _root.TXTResultat + "load" + chr(13);
  }
onClipEvent(unload)
  {
  _root.TXTResultat = _root.TXTResultat + "unload" + chr(13);
  }
onClipEvent(mouseDown)
  {
  _root.TXTResultat = _root.TXTResultat + "mouseDown" + chr(13);
  }
onClipEvent(mouseUp)
  {
  _root.TXTResultat = _root.TXTResultat + "mouseUp" + chr(13);
  }

Essayez :

S'il existe à la fois les événements mouseDown et mouseUp, les deux événements seront FORCEMENT exécutés. Il n'est pas possible de faire sexécuter l'un sans l'autre : Même si vous cliquez dans l'animation, et que vous sortez de l'animation pour lâcher la souris ailleurs : le mouseUp sera détecté (a contrario du fait que si vous cliquez en dehors de l'animation, vous laissez appuyé et vous lâchez la souris dans l'animation, aucun des deux événements ne sera détecté). Ah si, il y a un moyen : cliquer dans l'animation entre load et unload, et attendre avec la souris appuyée que unload apparaisse dans la liste, puis alors seulement relâcher. Là, il n'y aura pas de mouseUp.

Si vous cliquez sur le bouton effacer : Il écrit mouseDown dans la liste, mais immédiatement il efface la liste (puisque c'est sur on(press) du bouton), et quand vous lâchez la souris, il y aura un mouseUp d'indiqué dans la liste (pour autant que vous relachez le bouton quand le clip est visible)

Constatez que les événements souris sont moins riches que dans les boutons : en effet, ici, seuls les MouseMove, mouseDown et mouseUp existent, tandis que dans les boutons, nous avons press, release, releaseOutside, rollOver, rollOut, dragOut et dragIn.

Les événements de clavier

Il n'y en a que deux, aussi, nous allons les grouper :

onClipEvent(keyDown)
onClipEvent(keyUp)

Comme on pourrait s'y attendre, keyDown s'exécute quand on appuye sur une touche, et keyUp quand on relâche la touche. Si on laisse le doigt appuyé sur une touche (entre load et unLoad comme toujours), tout plein de keyDown seront affichés, mais il y a toujours un seul keyUp (a moins qu'on relâche la touche après le unLoad)

onClipEvent(keyDown)
  {
  _root.TXTResultat = _root.TXTResultat + "keyDown" + chr(13);
  }
onClipEvent(keyUp)
  {
  _root.TXTResultat = _root.TXTResultat + "keyUp" + chr(13);
  }

Attention, car contarirement à l'événement mouseMove qui s'exécute quand on passe la souris par dessus l'animation auparavant, pour les keyDown et keyUp, il est nécessaire de cliquer d'abord dans l'animation pour l'activer. Essayez :

Toutes les touches provoquent à la fois l'événement keyDown et keyUp, SAUF la touche ESC qui ne provoque QUE keyUp.

Attention aux touches de fonction F1 à F12, qui appellent des fonctions de votre navigateur internet.

Attention également sir vous appuyez par exemple sur SHIFT a, pour obtenir A majuscule, vous obtiendrez dans l'ordre :

  1. keyDown (pour le SHIFT)
  2.   keyDown (pour le A)
  3.   keyUp (pour le A)
  4. keyUp (pour le SHIFT

Il est possible ainsi de récupérer le code ASCII de la touche ainsi enfoncée (par exemple, a est égal au code 97), ou même le caractère correspondant, comme ceci :

onClipEvent(keyUp)
  {
  // Le code ASCII :
  _root.TXTResultat = _root.TXTResultat + "ASCII : " + Key.getAscii() + chr(13);
  // Le caractère correspondant :
  _root.TXTResultat = _root.TXTResultat + "Caractere : " + chr(Key.getAscii()) + chr(13);
  }

Essayez :

Attention : si vous essayez d'appuyer sur un caractère non imprimable, tel que Flèche gauche, Flèche droite, CTRl, F5, etc. Le code ASCII renvoyé est systématiquement 0. SI vous avez besoin de récupérer la valeur ASCII d'un de ces caractères, mieux vaut utiliser key.getCode

Remarquez que cette manière de faire est très différentes que la gestion des touches de clavier dans les boutons

---