Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

XML : chargement d'une liste d'images (2)

Compatible ActionScript 1 et 2. Cliquer pour en savoir plus sur les compatibilités.

Article écrit le 26/05/2004 15:38.
Par chipaldance.

Ce tutorial qui dérive du précédent est beaucoup plus complet, on trouve entre autres une fonction pour vérifier le chargement des images, correction de bugs, choix entre affichage par lignes ou colonnes, nombre de ligne/colonnes personnalisable, espacement entre les images et resize de celles-ci pour qu'elles occupent une zone précise…

Objectif :
Charger des jpeg depuis un fichier XML
Placer ces images en ligne de n colonnes.

Impératif : les jpeg NE doivent PAS être enregistrées en “progressif”

Fichier XML
<gallerie>
 
  <desc nom="1.jpg" />
 
  <desc nom="2.jpg" />
 
  <desc nom="3.jpg" />
 
  <desc nom="4.jpg" />
 
  <desc nom="5.jpg" />
 
  <desc nom="6.jpg" />
 
</gallerie>
Flash

Image 1

gallerieXml = new XML();
 
gallerieXml.ignoreWhite = true;

Image 2
On charge le xml:

gallerieXml.load("gallerie.xml");

Image 3 vide

Image 4:
On fait un test pour voir si le xml est chargé:

if(!gallerieXml.loaded)
 
gotoAndPlay(3);

jusque là, pas de changements…

Image 5

</* tous les paramêtres suivants gagneraient à être transmis par le xml également, de la même façon que pour les urls des images ou les champs de texte de l'autre tutorial */
 
 
 
 
 
// les images vont s'inscrire dans un carre de coté:
 
_root.zoneTaille = 80;
 
// espacement entre les images:
 
_root.zoneEspace = 10;
 
_root.affichage = "Colonnes";
 
// ou "Lignes" , avec la majuscule
 
_root.nbColonnes = 3;
 
// la variable ci-dessous de sera donc pas prise en compte, dans cet exemple
 
_root.nbLignes = 3;
 
 
 
//Recupération des donnees du fichier xml
 
_root.galleriev = gallerieXml.firstChild.childNodes;
 
_root.lon = galleriev.length; //nombre d'image à placer
 
for (i = 0; i<_root.lon; i++) {
 
  var nom = galleriev[i].attributes.nom; //recupére le nom du fichier
 
  // Création d'un clip vide:    
 
  _root.createEmptyMovieClip("bitmap_mc"+i, i+10);
 
  _root["bitmap_mc"+i].loadMovie(nom); //charge le jpeg
 
}
 
_root.picsLoaded = true;

Image 6 vide

Image 7
pour voir si toutes les images sont chargées:

_root.picsLoaded=true;
 
for(i=0;i<_root.lon;i++){
 
if(_root["bitmap_mc"+i].getBytesLoaded() !=_root["bitmap_mc"+i].getBytesTotal())
 
_root.picsLoaded=false;
 
}
 
if(_root.picsLoaded == true)
 
_root.gotoAndPlay(8);
 
else
 
_root.gotoAndPlay(6);

Image 8 Ici on construit la gallerie, c'est à dire qu'on redimensionne les images et ensuite on les déplace.

for(i=0;i<_root.lon;i++){
 
_root.facteur=Math.max(_root["bitmap_mc"+i]._width,_root["bitmap_mc"+i]._height)/_root.zoneTaille;
 
  _root["bitmap_mc"+i]._xscale = _root["bitmap_mc"+i]._yscale /=_root.facteur;
 
//réduit l'image originale pour  qu'elle rentre dans la zone
 
}
 
 
 
// Déplacement et redimensionnement du clip conteneur:
 
_root.a = 0; //colonnes ou lignes (colonnes dans l'exemple)
 
_root.b = 0; //lignes ou colonnes
 
for (i=0; i<_root.lon; i++) {
 
  if (_root.a == _root["nb"+_root.affichage]) {
 
     _root.a = 0;
 
     _root.b++;
 
  }
 
 
 
//maintenant on dispose les images à partir de x=0 et y=0
 
  _root["bitmap_mc"+i]._x =(_root.affichage=="Colonnes"? _root.a : _root.b)*(_root.zoneTaille+_root.zoneEspace);
 
  _root["bitmap_mc"+i]._y =(_root.affichage=="Colonnes"? _root.b : _root.a)*(_root.zoneTaille+_root.zoneEspace);
 
 
 
 
 
  a++;
 
}
 
 
 
stop();

C'est fini, tout marche bien, j'espère que ce script aidera ceux qui veulent monter une petite galerie d'images, vous pouvez très facilement adapter celle-ci à vos besoins.

Version prototype

(fichier source dispo en bas, anim en 100% code toujours)

Voici la syntaxe:

clip.loadGalerieFromXml(file,zoneTaille,zoneEspace,affichage,nombre);

Signification des paramêtres:

file : le nom du fichier xml, par exemple : “fichier.xml”
zoneTaille: les images vont s'adapter à un carré dont il faut spécifier le coté, par exemple : 80
zoneEspace:l'espacement entre ces carrés, par exemple: 10
affichage: “Colonnes” ou “Lignes” suivant ce que vous voulez.
nombre: le nombre d'items dont vous avez choisi la nature ci-dessus.

Finalement, le fichier flash ressemblera à quelque chose comme ça:

image 1:

#include "galerieXmlPROTO.as"
 
_root.createEmptyMovieClip("galerie",1);
 
_root.galerie.loadGalerieFromXml("galerie.xml",80,10,"Colonnes",3);
 
stop();

AUSSI SIMPLE QUE CELA !!!

Bon, il faudrait peut-être que je vous donne le proto, maintenant ;-)

Tout ce code est à copier-coller dans le bloc-notes dans un fichier:
“galerieXmlPROTO.as” (ou sous un autre nom, mais veiller à changer le nom dans le flash aussi, au moment de l'inclusion du fichier :-) )

MovieClip.prototype.loadGalerieFromXml = function(file,zoneTaille,zoneEspace,affichage,nombre){
 
  this.galerieXml = new XML();
 
  this.galerieXml.parent=this;
 
  this.galerieXml.ignoreWhite = true;
 
  this.galerieXml.onLoad = function(){
 
     this.parent.zoneTaille = zoneTaille;
 
     this.parent.zoneEspace = zoneEspace;
 
     this.parent.picsLoaded = true;
 
     this.parent.affichage = affichage;
 
     this.parent["nb"+affichage] = nombre;
 
     this.parent.galeriev = this.firstChild.childNodes;
 
     this.parent.lon = this.parent.galeriev.length;
 
     for (var i = 0; i<this.parent.lon; i++) {
 
        var nom = this.parent.galeriev[i].attributes.nom;    
 
        this.parent.createEmptyMovieClip("bitmap_mc"+i, i+10);
 
        this.parent["bitmap_mc"+i].loadMovie(nom);
 
     }
 
 
 
     this.parent.onEnterFrame=function(){
 
        this.picsLoaded=true;
 
        for (var i = 0; i<this.lon; i++)
 
           if(this["bitmap_mc"+i].getBytesLoaded() !=this["bitmap_mc"+i].getBytesTotal()||this["bitmap_mc"+i].getBytesLoaded()==0)
 
           {this.picsLoaded=false;break;}
 
        if(this.picsLoaded==true){
 
           trace("ok");
 
           this.onEnterFrame=null;
 
           this.a = 0;  
 
           this.b = 0;  
 
           for (var i=0; i<this.lon; i++) {
 
              if (this.a == this["nb"+this.affichage]) {
 
                 this.a = 0;
 
                 this.b++;
 
              }
 
              this["bitmap_mc"+i]._x =(this.affichage=="Colonnes"? this.a : this.b)*(this.zoneTaille+this.zoneEspace);
 
              this["bitmap_mc"+i]._y =(this.affichage=="Colonnes"? this.b : this.a)*(this.zoneTaille+this.zoneEspace);
 
              this.a++;
 
           }
 
           for (var i = 0; i<this.lon; i++) {
 
 
 
              this.facteur=Math.max(this["bitmap_mc"+i]._width,this["bitmap_mc"+i]._height)/this.zoneTaille;  
 
              this["bitmap_mc"+i]._xscale = this["bitmap_mc"+i]._yscale /=this.facteur;  
 
           }
 
        }
 
     }
 
  }
 
  this.galerieXml.load(file);
 
}
fichiers joints