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:
- Un archivo .fla el cual contiene dos botones (anterior_btn y siguiente_btn) y una caja de texto dinámico (descripcion_txt).
- Una carpeta llamada imagenes que naturalmente contiene las fotos que usamos en el ejercicio.
- 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.
July 28, 2010
ZMichaelOye Buena!! me funciona bien Gracias
July 28, 2010
Alexander BarahonaExcelente ejemplo! La verdad esta muy sencillo de entender y modificar para ajustarlo a mi slideshow… Muchas Gracias
October 29, 2010
oginnamhmmm 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.
March 4, 2011
doniNo funciona, lo quiero en un frame especifico de un mc pero no me funcionó y tampoco en el frame 1 de una pelicula nueva.
May 13, 2011
andreswebExelente 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 ShalitoEscelente mejora, queda andando de pelos 🙂 (pulgar arriba)
May 17, 2011
Dianame marca error de sintaxis en el línea donde aparace: i-;
como lo solucion???
gracias 🙂
May 4, 2012
ramondonde dice ” i-; ”
coloca ” i=i-1; ”
o en su defecto i–;
May 21, 2012
José Alejandro RealzaMuy buen tutorial. Solo agrego que yo agregaria la Libreria Tweener para un mayor nivel de animacion e interaccion. Saludos