onClipEvent(enterFrame)

Le gestionnaire d'événement

Disponible depuis la version 5 de Flash, onClipEvent est un gestionnaire d'événement "pour une occurrence de clip spécifique" (Dictionnaire ActionScript). Cela veut dire que les actions qu'il déclenche s'appliquent à une occurrence de clip bien précise. Par conséquent, il doit absolument être utilisé dans le panneau Action d'une occurrence de clip. L'erreur la plus fréquente lorsque l'on débute en programmation ActionScript est d'utiliser onClipEvent sur une image-clé.

Il faut préciser à onClipEvent l'événement qu'il doit gérer. Dans le cadre de ce chapitre, nous nous occupons de l'événement enterFrame. Cet événement se produit à la cadence de l'animation, soit tous les 1/12 de seconde lorsque la valeur de la cadence n'a pas été modifiée. Rien ne peut empêcher l'événement enterFrame de se produire et l'instruction stop(), qui pourtant sert à arrêter le scénario, est impuissante devant l'inéluctabilité de cet événement.

Une horloge analogique

Rien ne peut empêcher l'événement enterFrame de se produire et l'instruction stop(), qui pourtant sert à arrêter le scénario, est impuissante devant l'inéluctabilité de cet événement.

Pour réaliser cette magnifique horloge analogique, il faut créer un symbole clip mc:aiguille en veillant à ce que l'aiguille soit bien verticale et en plaçant le point d'ancrage à la base de l'aiguille. Placer ensuite 3 occurrences de ce symbole sur la scène principale en les nommant respectivement heures_mc, minutes_mc, secondes_mc. Ajuster la longueur de chaque aiguille dans l'inspecteur de propriété. Dans le panneau Actions de chacune des occurrences, placer les scripts ci-dessous.

secondes_mc

Ce script crée un objet Date et utilise la méthode getSeconds() pour extraire le nombre de secondes. En modifiant la propriété _rotation, il applique ensuite à l'occurrence, désignée par la référence this, un angle égal au nombre de secondes * 6. (A chaque seconde, l'aiguille parcourt un soixantième de circonférence).

onClipEvent (enterFrame) {
var s = new Date().getSeconds();
this._rotation = s * 6;

}

minutes_mc

Ce script crée un objet Date et utilise la méthode getMinutes() pour extraire le nombre de minutes. En modifiant la propriété _rotation, il applique ensuite à l'occurrence, désignée par la référence this, un angle égal au nombre de minutes * 6. (A chaque minute, l'aiguille parcourt un soixantième de circonférence).

onClipEvent (enterFrame) {
var m = new Date().getMinutes();
this._rotation = m * 6;
}

heures_mc

Ce script crée un objet Date et utilise la méthode getHours() pour extraire le nombre de secondes. En modifiant la propriété _rotation, il applique ensuite à l'occurrence, désignée par la référence this, un angle égal au nombre d'heures * 30. (A chaque heure, l'aiguille parcourt un douzième de circonférence). Pour déplacer l'aiguille des heures proportionnellement au nombre de minutes, on calcule qu'elle doit se déplacer de 1 soixantième de 30 degrés fois le nombre de minutes.

onClipEvent (enterFrame) {
var h = new Date().getHours();
var m = new Date().getMinutes();
if (h > 12) {
h -= 12;

}
this._rotation = (h * 30) + (m * 30 / 60);

}

Un clip horloge

On voudrait maintenant créer une animation qui affiche 3 horloges indiquant l'heure dans 3 capitales.

 

Plutôt que de dessiner trois fois la même horloge, il est plus intéressant de créer un symbole clip mc:horloge.

Ce symbole possède une zone de texte dynamique dans laquelle on affiche le nom de la capitale.

 

Pour afficher l'heure locale, le clip aura besoin de connaître le décalage. On prend donc soin de créer sur la première image du scénario du symbole une variable décalage.

Les aiguilles sont regroupées dans un symbole clip nommé mc:mécanisme. C'est une occurrence de ce clip qui contiendra le gestionnaire onClipEvent. Cette solution est plus élégante que la solution précédente dans laquelle chaque occurrence d'aiguille disposait de son propre gestionnaire. Les occurrences d'aiguille dans le symbole clip mc:mécanisme sont nommées heures_mc, minutes_mc et secondes_mc. L'occurrence du symbole mc:mécanisme est nommée mécanisme_mc.

Dans le panneau Actions de cette occurrence, on écrit le code suivant :

Remarquez l'instruction

h += _parent.décalage ;

Elle précise bien que la variable décalage appartient à l'horloge, qui est bien le clip parent du mécanisme.

 

Il reste à se demander comment initialiser les noms des capitales et les valeurs des décalages dans les occurrences d'horloge. C'est très simple, nous allons faire appel à un événement qui ne se produit qu'une seule fois dans la vie d'un clip, l'événement load que nous gérons avec onClipEvent().

Interactivité : direction la souris

L'événement enterFrame est particulièrement utile lorsque l'on veut ajouter de l'interactivité à l'animation. Dans l'animation ci-dessous, la bille s'oriente automatiquement vers la souris. Le calcul est déclenché par enterFrame.

L'animation est formée de deux clips. Le symbole mc:disque est un simple cercle sur lequel est posée une occurrence du symbole mc:bille.

 

La bille est un cercle accroché à une tige dont une extrémité est fixée au point d'ancrage.

Les gestionnaires onClipEvent sont créés dans le panneau Actions de l'occurrence du disque. On utilise l'événement load pour calculer les coordonnées de la bille. N'oublions pas que celle-ci est "attachée" à la tige et que ses coordonnées sont donc celles du point d'ancrage de la tige.

 

L'événement enterFrame déclenche le calcul de l'angle d'orientation

Animer un regard

L'animation ci-dessous utilise la même technique pour orienter le regard du personnage vers la souris.

*****