Un album photo commandé par XML

Cet album photo est organisé par groupes de photos. Un menu permet de choisir le groupe et deux boutons de navigation permettent de naviguer en avant et en arrière dans ce groupe.

Essayer l'animation

Structure du fichier XML

La capture d'écran ci-dessous montre la structure du fichier. Le noeud racine albumphoto comporte un attribut titre que l'on peut utiliser pour ajouter un titre sur l'animation. Ce noeud contient une collection de noeuds enfants appelés groupe. Chaque groupe comporte un attribut bouton qui contient le texte du bouton correspondant dans le menu.

La structure d'un groupe est une collection d'éléments photo.

Chaque élément photo comporte 2 attributs largeur et hauteur et deux noeuds enfants contenant respectivement le chemin vers le fichier photo et une légende.

Organisation de l'animation

Tout le code est regroupé sur le calque Actions dans la première image-clé du scénario principal.

Les éléments visibles de l'animation sont répartis sur 3 calques :

Le menu est un clip contenant une simple forme rectangulaire dont le point d'ancrage est le coin supérieur gauche. Son nom d'occurrence sur la scène est menu_mc.

Pour naviguer dans un groupe de photos on utilise les boutons En arrière et En avant

Un indicateur de chargement est positionné sous les boutons de navigation

L'indicateur de chargement est formé de deux calques contenant respectivement le fond et la barre de progression.

La barre de progression est un une occurrence du clip mc:barre nommée barre_mc

Navigation dans le fichier XML

Initialisation

Les premières lignes du programme sont maintenant bien connues : il faut activer l'utilisation de la page de code (ligne 1), déclarer un nouvel objet XML (ligne 2), ignorer les caractères blancs (ligne 3), charger le fichier XML (ligne 4) et déclarer une fonction de rappel pour l'événement onLoad (ligne 5). Encore une fois, remarquez qu'il n'y a pas de parenthèses après le nom de la fonction, car il ne s'agit pas d'appeler la fonction mais d'indiquer quelle fonction sera appelée lorsque se produira l'événement onLoad.

La fonction de rappel est définie aux lignes 10-14. Elle est nommée chargement et reçoit en paramètre une valeur booléenne (vrai/faux) contenant le statut de l'opération de chargement (réussi/pas réussi). On sait que le nom de ce paramètre est sans importance. Dans ce cas-ci, nous avons choisi de le nommer ok. La ligne 11 vérifie que l'opération a réussi. Si c'est le cas, la ligne 12 appelle la fonction construireMenu().

Les lignes 6-9 déclarent quatre variables globales (connues de toutes les fonctions). Ces variables contiennent la liste des groupes et la liste des photos du groupe courant (le groupe actif dans l'animation) ainsi que le numéro du groupe courant et le numéro de la photo courante.

Construction du menu

Cette fonction commence par extraire la liste des groupes de photos. En examinant la structure de l'arbre XML ci-dessus, on comprend que cette liste est formée des noeuds enfants du premier enfant de l'arbre, d'où la ligne 16.

Une fois la liste extraite, il est facile de la parcourir à l'aide d'une boucle for (ligne 17) et de construire le menu. La ligne 18 importe dans l'occurrence menu_mc une occurrence du symbole bouton (nom de liaison dans la fenêtre de liaison), elle lui donne le nom automatique "b"+i et elle la place au niveau de profondeur i (cf infra pour la construction du bouton). La méthode attachMovie renvoie une référence sur l'occurrence ainsi créée. Cette référence (b_mc) permet de positionner le bouton (lignes 19-20) et d'en modifier l'étiquette, le texte de cette étiquette étant fourni par l'attribut bouton du groupe. La valeur de l'attribut est fournie par le tableau associatif attributes["bouton"] (ligne 21).

La ligne 22 crée dans l'occurrence du bouton une variable numéro qui reçoit la valeur de i, le compteur de boucles. Cette variable numéro (le nom n'a pas d'importance) devient ainsi une propriété de l'occurrence de bouton. Elle existera encore après l'exécution de la boucle et elle pourra donc être utilisée par la fonction de rappel affectée à l'événement onPress du bouton.

A la ligne 23 commence l'écriture du gestionnaire d'événement onPress de l'occurrence du bouton. Il est écrit sous forme d'une fonction anonyme (sans nom) : on affecte à l'événement le mot function() suivi d'une paire de parenthèses et on commence directement l'écriture du code dans les accolades. Une autre solution consiste à donner le nom d'une fonction définie par ailleurs dans l'animation : c'est la technique que nous utilisons habituellement pour l'événement onLoad.

La ligne 24 fait passer dans la variable groupeCourant la valeur de la propriété numéro que nous avions pris soin de créer à la ligne 22. On est sûr également qu'il s'agit bien du numéro de l'occurrence du bouton enfoncé, car nous travaillons sur this.

La ligne 25 crée la liste des photos du groupe courant en extrayant la collection des noeuds enfants de l'élément listeGroupes[groupeCourant].

En mettant à 0 la variable photoCourante (ligne 26), on se positionne sur la première photo du groupe. La ligne 27 extrait le chemin vers le fichier photo : il faut d'abord sélectionner la photo courante dans la liste des photos, d'où l'expression listePhotos[photoCourante]. L'examen de la structure d'un élément photo montre que le chemin est formé par le premier enfant (le contenu) du premier enfant (l'élément lien).

La ligne 28 appelle une fonction qui trace un cadre autour de la photo et la ligne 29 appelle une fonction qui initialise un indicateur de préchargement.

Il ne reste plus qu'à faire charger la photo par l'occurrence portePhoto_mc du clip cadre_mc.

Les boutons de navigation

Les boutons sont des clips commandés par du code placé sur le même calque action de la scène principale que le reste du code. Rappelons que le code aurait pu être placé sur le panneau Actions de l'occurrence du clip. Mais cette pratique est de plus en plus délaissée afin de séparer et confier à des personnes différentes les tâches de programmation et la conception visuelle. En Flash MX 2004, le code doit se trouver dans un fichier séparé d'extension .as.

Programmer un clip depuis la scène principale passe nécessairement par l'affectation d'un gestionnaire d'événement. Pout que le clip se comporte comme un bouton, il suffit de créer un gestionnaire d'événement pour l'événement onPress. C'est ce que fait la ligne 34 en utilisant une fonction anonyme.

La ligne 35 vérifie que la variable listePhotos est définie, ce qui est le cas lorsque l'utilisateur a choisi un groupe de photos et qu'une photo est déjà affichée. Si aucun groupe n'a été choisi, il est bien sûr impossible de naviguer.

La ligne 37 vérifie que la photo courante n'est pas la dernière du groupe, auquel cas il n'est pas possible de naviquer plus avant.

Pourquoi listePhotos.length-1 ?

Le premier élément d'une collection est en position 0. Donc, dans un groupe de 4 photos (par exemple), la dernière est en position 3. Pour pouvoir avancer vers cette photo, il faut nécessairement que la photo courante soit en position inférieure à 3.

S'il est permis de passer à la suivante, on incrémente la variable photoCourante d'une unité (ligne 39).

Les lignes 40 à 43 sont similaires aux lignes 27-30 ci-dessus.

Le gestionnaire d'événement onPress pour le bouton enarrière_mc est également très simple à comprendre. Il suffit de vérifier qu'il est encore possible de reculer. Pour cela, il faut que photoCourante soit supérieure à 0.

Le préchargeur

Initialisation du préchargeur

La fonction initPréchargeur reçoit dans le paramètre chargeur le nom du clip qui chargera la photo (ligne 59). Voyez les lignes 29, 42, 54 qui appellent la fonction initPréchargeur en transmettant cadre_mc.portePhoto_mc en argument.

La ligne 60 initialise l'échelle horizontale de la barre de progression à 0, ce qui a pour effet de la faire disparaître. La ligne 61 crée un intervalle, nommé pid (comme process id), qui appelle la fonction majPréchargeur() tous les 10 millièmes de seconde en lui transmettant le clip chargeur.

Mise à jour du préchargeur

La mise à jour (maj) du préchargeur consiste à faire correspondre la longueur de la barre de progression au pourcentage du volume téléchargé. Pour connaître ce pourcentage, on utilise les méthodes getBytesLoaded() (ligne 64) et getBytesTotal() (ligne 65) de l'objet MovieClip. La ligne 66 calcule le pourcentage et la ligne 67 modifie l'échelle de la barre de progression. La ligne 69 vérifie que l'objet est complètement chargé Si c'est le cas, la ligne 70 annule l'intervalle pid.