Depuis que Flash peut charger dynamiquement des fichiers JPEG et les exploiter au sein d'applications, les développeurs peuvent créer des galeries occupant beaucoup moins de kilo-octets que s'ils avaient dû intégrer toutes les images au sein du SWF, obligeant ainsi les visiteurs à attendre que toutes les photos se chargent.
Ajoutons à cela le meilleur support du format XML, qui permet à n'importe qui sachant utiliser le Bloc-Note de mettre à jour les données de l'animation, et nous obtenons la possibilité de créer une galerie à la fois légère et souple. C'est ce que nous allons créer ici.

Mise en place
Nous partons du principe que nous avons déjà une série de photos (numérotées ou non) mise à la même taille, au format JPG, et rangées dans un dossier photos/.
Nous voulons exploiter un fichier XML qui soit de cette forme :

<?xml version="1.0" encoding="ISO-8859-1"?>
  <images>
    <image num="1" fichier="photos/ming.jpg" desc="Ming" />
    <image num="2" fichier="photos/flash.jpg" desc="Flash" />
[...]
  </images>

Construisons maintenant l'interface dans Flash. En plus d'un Movie-Clip (ou MC) où s'affichera la photo, nous avons besoin de flèches pour passer d'une photo à l'autre, d'un compteur pour indiquer la progression, et d'un emplacement où s'inscrira la description.

Commençons par créer les différents calques : renommez le calque existant en scripts, et créer un calque affichage dessous, un calque boutons et un calque textes. Puis créez sur la scène un nouveau MC ayant la taille de nos images (ici, 240*240). Ctrl/pomme-F8 fait apparaître la fenêtre de création de nouveau symbole, nommez-le ecran. Dans la scène de ecran, tracez un rectangle (peu importe la couleur, il sera remplacé par la photo). Mettez-le à la taille voulue via la panneau Propriétés, et placez le centre de la scène en haut à gauche de la bordure (Ctrl/pomme-K). De retour sur la scène principale, placez ecran où vous le voulez, et donnez-lui le nom d'occurrence ecran.
Créez deux symboles (Ctrl/pomme-F8) de boutons sur le calque boutons, et nommez leurs occurrences suivant et precedent.
Enfin, sur le calque textes, placez un champ-texte dynamique dont vous nommerez la variable textes.
L'ensemble de notre application doit tenir sur une seule image (frame).

ActionScript
Passons au plus intéressant : la programmation elle-même. Nous avons déjà vu les base de la manipulation XML avec Flash MX, nous ne reviendrons donc que peu sur les fonctions qui y ont été étudiées...
Tout notre code sera placé sur la première image-clé (key-frame) du calque scripts.

photos_xml = new XML();
photos_xml.ignoreWhite = true;
photos_xml.onLoad = function(ok) {
  if (ok) {
    noeuds = photos_xml.firstChild.childNodes;
    nbrPhotos = noeuds.length;
    premierePhoto = this.firstChild.firstChild;
    dernierePhoto = this.firstChild.lastChild;
    enCours = premierePhoto;
    affichePhoto(enCours);
  }
};
photos_xml.load("photos.xml");

function affichePhoto(photo) {
  loadMovie(photo.attributes.fichier, ecran);
  textes = photo.attributes.num + "/" + nbrPhotos + " : " + photo.attributes.desc;
}

suivant.onRelease = function() {
  if (enCours.attributes.num == nbrPhotos) {
    enCours = premierePhoto;
  } else {
    enCours = enCours.nextSibling;
  }
  affichePhoto(enCours);
};

precedent.onRelease = function() {
  if (enCours.attributes.num == 1) {
    enCours = dernierePhoto;
  } else {
    enCours = enCours.previousSibling;
  }
  affichePhoto(enCours);
};

Le code est expliqué page suivante...

Page 1 | 2