Scour Design. Tutoriales de Flash, ActionScript, CSS, Photoshop, ImageReady...

Galería de imágenes con XML

Autor: Toni Lopez - After Hours

Aquí os pongo este código de Toni Lopez, autor de blog de flash After Hours, donde crea una sencilla galería de imágenes externas, cargándolas a flash mediante xml.

Archivo xml (Copiar y Pegar cambiando los nombres de las imágenes por las pertinentes:

<?xml version="1.0" encoding="iso-8859-1"?>
<imagenes>
<imagen id="/articulos/tutoriales/flash/img01.jpg"/>
<imagen id="/articulos/tutoriales/flash/img02.jpg"/>
<imagen id="/articulos/tutoriales/flash/img03.jpg"/>
<imagen id="/articulos/tutoriales/flash/img04.jpg"/>
<imagen id="/articulos/tutoriales/flash/img05.jpg"/>
<imagen id="/articulos/tutoriales/flash/img06.jpg"/>
<imagen id="/articulos/tutoriales/flash/img07.jpg"/>
<imagen id="/articulos/tutoriales/flash/img08.jpg"/>
<imagen id="/articulos/tutoriales/flash/img09.jpg"/>
</imagenes>

Coloca éste código en el primer fotograma de la película flash.

// -- posición donde se cargará la primera imagen
x = 3;
y = 3;
// -- ancho y alto de la imagen más 5 pixeles de espacio
ancho = 105;
alto = 80;
// -- numero de columnas
num_columnas = 3;
// -- creo un nuevo objeto XML
miXML = new XML();
// -- ignorar espacios
miXML.ignoreWhite = true;

// -- proceso si la carga tuvo éxito
miXML.onLoad = function(succes) {
        if (succes) {
                // -- por cada nodo hijo del nodo principal...
                for (var i = 0; ithis.firstChild.childNodes.length; i++) {
                        // -- delaro una variable que recoje el atributo 
                        // -- del nodo (nombre de la imagen)

                        galeria = this.firstChild.childNodes[i].attributes.id;
                        // -- creo un clip de película vacio
                        _root.createEmptyMovieClip("diapo"+i, i+100);
                        // --  cargo la imáen el clip vacio

                        item = _root["diapo"+i];
                        item.loadMovie(galeria);
                        // -- indico posición x - y
                        item._x = x;
                        item._y = y;
                        // -- incremento el valor de x para la siguiente imágen

                        x += ancho;
                        // -- incremento en 1 el número de columnas
                        columna += 1;
                        // -- ruptura de control, control de número de columnas
                        if (columna == num_columnas) {
                                columna = 0;
                                x -= (ancho*num_columnas);
                                y += alto;
                        }
                }
        }
};
// -- cargar XML
//miXML.load("/articulos/tutoriales/flash/imagenes.xml");
miXML.load("/articulos/tutoriales/flash/imagenes.xml");

Si lo deseas, puedes descargarte el archivo del ejemplo aquí.

Un saludo.