TUTORIELS 
Une galerie photo avec Flash MX et XML

Page 1 | 2

Réalisation en Flash d'une application affichant des images externes au format JPEG, à partir d'un fichier XML.
 (8 septembre 2003)
 

Le premier bloc de code correspond assez à celui de notre premier article sur Flash et XML : déclaration d'un objet XML, préparation de l'évènement onLoad qui se charge de déclarer certaines variables à partir du moment où le fichier XML est chargé, et chargement proprement dit du fichier avec la méthode load.

Certaines de ces variables méritent qu'on s'y attarde. Ainsi, la propriété childNodes permet de créer un tableau de tous les noeuds du premier enfant de notre document XML, c'est à dire l'ensemble des noeuds contenus entre les balises <images> et </images>. La méthode length nous permet quant à elle de connaître le nombre de paramètres transmis à une fonction, donc ici le nombre de noeud-enfant, c'est à dire le nombre d'images...
Grâce aux propriétés firstChild et lastChild, nous pouvons définir directement quels sont le premier et le dernier noeud, ce qui nous servira entre autres pour définir la première image à charger dans la variable enCours...

La fonction affichePhoto() est relativement simple, et fait entièrement appel aux attributs du noeud en cours (contenu dans enCours). Ainsi, avec un noeud de cette forme :

<photo num="1" fichier="photos/ming.jpg" desc="Ming" />

...nous voyons que nous avons accès à trois attributs : num (le numéro de l'image), fichier (l'URL de l'image, par rapport au fichier Flash) et desc (un petit descriptif). Nous allons tous les exploiter en quelques lignes.

La fonction loadMovie() nous permet de charger un fichier SWF ou JPG (non-progressif) au sein de notre animation; il prend en paramètres l'URL du fichier et la cible (le Clip) dans laquelle le fichier doit apparaître. Nous obtenons le premier paramètre grâce à nos attributs, auxquels ont accède via la propriétés attributes, qui donne accès aux attributs du noeuds en cours. Le second paramètres est juste le nom de notre MC, ecran. Voilà pour le chargement et l'affichage de la photo.
Pour ce qui est du texte, nous construisons une ligne complète à l'aide de deux attributs et d'une variable que nous avons défini lors de l'initialisation, et nous les affichons simplement dans notre champ textes.

Les deux dernières fonctions sont quasiment identiques : elles nous permettent de passer d'une photo à l'autre. Dans le cas où il n'y aurait plus de photo suivante (nous sommes à la fin) ou précédente (nous sommes au début), une petite boucle if nous permet de renvoyer la "tête de lecture" (en quelque sorte) de l'autre coté du tableau de noeuds. Ainsi, notre galerie fera toujours une boucle... Le passage d'un noeud à l'autre se fait grâce aux propriétés nextSibling et previousSibling, qui font référence au noeuf-frère suivant ou précédent dans le tableau de noeuds. Inutile de dire que pour l'ensemble de notre code, il est primordial que les balises XML soient rangées dans l'ordre croissant de leurs attributs num, au risque de perdre Flash...

XML est un outil formidable, nous vous recommandons de vous entraîner à sa manipulation au sein de Flash MX en modifiant le forme du fichier XML et en adaptant le code. Par exemple :

<photos>
  <photo>
    <num>1</num>
    <desc>Gabuzomeu</desc>
    <fichier>shaddocks/1.jpg</fichier>
  </photo>
  <photo>
[...]
</photos>

Voici nos fichiers-sources, à vous de jouer !

Page 1 | 2

 
[ Xavier Borderie,JDNet
 
Accueil | Haut de page