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
|