Interactivité et occurrences dynamiques

Nous allons maintenant ajouter de l'interactivité à l'animation : en cliquant sur une miniature, l'utilisateur fait apparaître une grande photo et les différentes informations relatives au président.

Essayer l'animation

Des miniatures cliquables

Gestionnaire d'événement dans le panneau Actions

Lorsque l'on affecte à un clip, via le panneau actions, un gestionnaire d'événement on(press), ce clip devient cliquable et se comporte comme un bouton : le curseur de la souris devient une main avec un index tendu. En programmant convenablement le gestionnaire d'événement, on peut ajouter toute l'interactivité voulue.

Evénements de MovieClip

Comme les miniatures sont créées dynamiquement, il n'est pas possible d'ajouter le gestionnaire d'événement via le panneau actions. Nous allons donc devoir recourir aux événements de l'objet MovieClip, introduits par Flash MX en 2002. Pour connaître la liste détaillée de ces événements, il est utile de consulter le dictionnaire ActionScript, à l'entrée MovieClip.on... . Dans le cas présent, nous allons utiliser l'événement onPress.

Clips vides imbriqués

Toutefois, avant de nous lancer dans l'opération, nous devons légèrement transformer la structure d'une miniature. Actuellement, chaque miniature est une simple image jpg chargée par un clip vide qu'elle neutralise. Or une image jpeg n'est pas cliquable dans Flash. La solution que allons utiliser consiste à créer un clip vide qui va lui-même créer un autre clip vide qui importera l'image.

Dans le fragment de code ci-dessous, la ligne 46 génère un nom automatique, la ligne 47 crée un clip vide sur la scène principale (puisque le code appartient à l'image 1 de la scène principale, this désigne bien la scène principale) et finalement, la ligne 48 crée un nouveau clip vide à partir du clip précédent, référencé par la variable miniature_mc. Il n'y a pas besoin de nom automatique, car il n'y a pas d'ambiguïté vu que chaque clip enfant est contenu dans son propre clip parent.

Création des chemins

Les images sont conservées en deux séries dans deux dossiers différents : les grandes images de 140 de large dans le dossier w140 et les petites de 25 pixels de large dans le dossier w025. Les noms des photos miniatures ont le suffixe _t (tiny) tandis que ceux des photos de 140 ont le suffixe _s (small). Il est alors facile de construire les chemins et de charger la miniature.

Création du gestionnaire d'événement

La création du gestionnaire d'événement va se résumer à l'affectation d'une fonction de rappel à l'événement, comme nous l'avons déjà fait plusieurs fois pour l'événement onLoad de l'objet LoadVars ou de l'objet XML. Voici encore une fois la syntaxe :

Mémoriser le nom de la grande photo

Une fois que nous serons sortis de la boucle et que l'animation sera en cours d'exécution, le nom de la photo de 140 pixels ne sera plus connu. Nous devons donc associer de manière permanente à chaque miniature le nom de sa grande photo en lui attachant une propriété. A la ligne 55 ci-dessous, on attache la propriété photo140.

Affichage de la grande photo

L'affichage de la grande photo se fait dans un clip formé d'un simple rectangle gris de dimensions adéquates et contenant un clip vide qui chargera la photo. Le clip vide est positionné en 10,10 dans le clip parent de manière à laisser une bordure. Comme la photo fait 140 pixels de large, le cadre devrait mesurer 160 pixels de large pour laisser une bordure de 10 pixels. L'occurrence du cadre est nommée cadre_mc et le clip vide s'appelle photo_mc.

Voici le code complet de la fonction.

Activités complémentaires

Affichage progressif

On peut reprocher à l'animation son affichage instantané. En égrenant les miniatures une à une, on pourrait peut-être renforcer l'impression historique, le temps qui passe, etc. Le résultat n'est pas certain, mais il vaut la peine d'examiner la technique.

Essayer

La première idée qui vient à l'esprit est de ralentir la boucle, ce qui est peut-être faisable mais techniquement maladroit. Pour réaliser ce genre d'effet, Flash nous propose la fonction setInterval() qui reçoit en paramètre le nom d'une fonction à exécuter à intervalle régulier et la durée de cet intervalle et renvoie un objet qu'il suffit de détruire par la fonction clearInterval(). La capture ci-dessous nous montre une façon d'utiliser la fonction. On remarque que les variables i, k, x, y sont globales et initialisées. Elles sont ainsi connues de toutes les fonctions. La ligne 20 appelle une fonction affichage() qui crée l'objet interval en appelant la fonction afficherListe() tous les 500 millièmes de seconde en lui transmettant le paramètre liste.

La fonction afficherListe() appelle à son tour la fonction afficherPresident() en lui transmettant le ième élément de la liste (liste[i]). Elle se charge ensuite de calculer les coordonnées x,y d'affichage du prochain président et finalement, elle se charge de détruire l'intervalle lorsque i atteint la longueur de la liste (lignes 39-40).

La fonction afficherPresident() appelle deux fonctions qui affichent respectivement le nom et la miniature.

La fonction afficherNom() génère d'abord un nom automatique "p"+i pour créer un clip vide à la profondeur i (ligne 49). Elle positionne ensuite ce clip vide en x+25 (largeur d'une miniature). Ce clip vide appelle ensuite la fonction createTextField() (ligne 52) pour créer un champ de texte à la profondeur 0 et aux coordonnées 0,0 (les coordonnées sont toujours calculées par rapport au clip parent). Finalement, elle extrait le nom hors de l'arbre XML et affecte la donnée à la propriété text puis applique le format en appelant la méthode setTextFormat() (ligne 54).

Le fonction afficherMiniature() fonctionne de la même manière que la fonction afficherLesMiniatures() expliquée ci-dessus, mais sans la boucle et en invoquant une fonction de rappel externe (zoom()) pour l'événement onPress.

La fonction zoom() doit faire apparaître une bordure autour du nom du président sélectionné, charger la grande photo dans le cadre puis afficher les informations dans le cartouche.

La sélection courante est stockée dans la variable courant. Au démarrage de l'application, il n'y a encore aucune sélection et courant est indéfini. On peut donc se servir de ce critère pour savoir s'il faut effacer la bordure autour de l'ancienne sélection. La ligne 77 vérifie si courant est différent de undefined. Si c'est le cas, la ligne 78 évalue le nom du clip contenant le champ texte. Ce nom est de la forme "p"+i et a été créé à la ligne 48 ci-dessus. La variable p_mc contient donc une référence sur un clip contenant une zone de texte nommée tf_txt (créée à la ligne 52 ci-dessus). Il suffit donc d'activer la propriété border de cette zone de texte (ligne 79). On atteint alors la ligne 81 où on construit une référence vers le clip que l'on vient d'activer. Chaque clip se souvient de son numéro parce que l'on a pris soin de stocker ce numéro dans la variable numéro à la ligne 62 ci-dessus. A la ligne 83, on stocke ce numéro dans la variable courant qui est donc maintenant définie.

Le chargement de l'image et des textes est évident

Il reste à traduire en clair l'abréviation du nom du parti : r = républicain, d=démocrate, etc. Pour cela nous allons utiliser une instruction switch dont la syntaxe vous paraîtra évidente. La seule difficulté est qu'il faut savoir que les propriétés que l'on affecte à un objet, comme nous l'avons fait aux lignes 62 à 66 ci-dessus, sont elles-mêmes des objets. Pour pouvoir évaluer chaque branche du switch, il faut convertir l'objet p.parti en un string (cf. ligne 89).