Crear un galerí­a de imágenes con AS3 y XML

Este tutorial mostrará cómo crear fácilmente una sencilla galerí­a de imágenes en Flash con ActionScript 3 y XML. Puedes ver el resultado final y descargar el archivo .fla completamente comentado y el archivo XML usado.

Para este ejercicio hemos usado:

  1. Un archivo .fla el cual contiene dos botones (anterior_btn y siguiente_btn) y una caja de texto dinámico (descripcion_txt).
  2. Una carpeta llamada imagenes que naturalmente contiene las fotos que usamos en el ejercicio.
  3. Un archivo XML el cual tiene como atributos de sus etiquetas un id, la ruta de las imagenes (imagen) y una descripción.

<galeria titulo=”titulo galeria”>
<foto id=”1″  imagen=”imagenes/foto1.jpg” descripcion=”texto 1″/>
<foto id=”2″  imagen=”imagenes/foto2.jpg” descripcion=”texto 2″/>
<foto id=”2″  imagen=”imagenes/foto3.jpg” descripcion=”texto 3″/>
</galeria>

En la lí­nea de tiempo principal del .fla se encuentra el script:

var carga:URLLoader = new URLLoader();
var xmlExterno:XML;
var i:Number=0;
var lista:XMLList;
var total:Number;
var fotos = new Loader();
addChild(fotos);
fotos.x = 100;
fotos.y=50;

carga.load(new URLRequest(“galeria.xml”));
carga.addEventListener(Event.COMPLETE,cargarXML);

function cargarXML(evento:Event)
{
xmlExterno = new XML(evento.target.data)
lista=xmlExterno.children();
total=lista.length();
descripcion_txt.text=lista[i].attribute(“descripcion”);
fotos.load(new URLRequest(lista[i].attribute(“imagen”)));
}

siguiente_btn.addEventListener(MouseEvent.CLICK, siguiente);
anterior_btn.addEventListener(MouseEvent.CLICK, atras);

function siguiente(event:MouseEvent)
{
if (i<total-1)
{
i++;
descripcion_txt.text=lista[i].attribute(“descripcion”);
fotos.load(new URLRequest(lista[i].attribute(“imagen”)));
}
}

function atras(event:MouseEvent)
{
if (i>0)
{
i–;
descripcion_txt.text=lista[i].attribute(“descripcion”);
fotos.load(new URLRequest(lista[i].attribute(“imagen”)));
}
}

Tutorial enviado por: Sandra Cano

¿Dudas y preguntas? Visita nuestros foros Xpert.

9 thoughts on “Crear un galerí­a de imágenes con AS3 y XML

  1. July 28, 2010

    ZMichael Reply

    Oye Buena!! me funciona bien Gracias

  2. July 28, 2010

    Alexander Barahona Reply

    Excelente ejemplo! La verdad esta muy sencillo de entender y modificar para ajustarlo a mi slideshow… Muchas Gracias

  3. October 29, 2010

    oginnam Reply

    hmmm no funciona, pegué el codigo en el fotograma 1, hice los dos botones y el cuadro de texto con los nombres como decí­a y me bota error de sintaxis.

  4. March 4, 2011

    doni Reply

    No funciona, lo quiero en un frame especifico de un mc pero no me funcionó y tampoco en el frame 1 de una pelicula nueva.

  5. May 13, 2011

    andresweb Reply

    Exelente tutorial

    Anexo 2 funcione mejoras…

    function siguiente(event:MouseEvent)
    {
    if (i==total-1){
    //si se esta mostrando la penultima foto (cuando i=2) o anteriores
    i = 0;
    }else{
    i++;
    }
    descripcion_txt.text=lista[i].attribute(“descripcion”); //asigna al texto dinamico descripcion_txt el contenido del atributo descripcion
    fotos.load(new URLRequest(lista[i].attribute(“imagen”))); //carga la imagen que se encuentra en la ruta descrita en el atributo imagen

    }

    function atras(event:MouseEvent)
    {
    i–;
    if(i<0){ i=total-1;}

    descripcion_txt.text=lista[i].attribute("descripcion"); //asigna al texto dinamico descripcion_txt el contenido del atributo descripcion
    fotos.load(new URLRequest(lista[i].attribute("imagen"))); //carga la imagen que se encuentra en la ruta descrita en el atributo imagen
    }

    • September 10, 2011

      Juan Shalito Reply

      Escelente mejora, queda andando de pelos 🙂 (pulgar arriba)

  6. May 17, 2011

    Diana Reply

    me marca error de sintaxis en el lí­nea donde aparace: i-;

    como lo solucion???

    gracias 🙂

  7. May 4, 2012

    ramon Reply

    donde dice ” i-; ”
    coloca ” i=i-1; ”
    o en su defecto i–;

  8. Muy buen tutorial. Solo agrego que yo agregaria la Libreria Tweener para un mayor nivel de animacion e interaccion. Saludos

Leave a Reply

Your email address will not be published. Required fields are marked *