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

Number of View: 2972

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.

Bookmark and Share

Post relacionados

Tags: , ,

2 Responses to “Crear un galería de imágenes con AS3 y XML”

  1. ZMichael dice:

    Oye Buena!! me funciona bien Gracias

  2. Alexander Barahona dice:

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

Leave a Reply