Continuamos el tutorial desde el punto en el que lo dejamos ayer. Nos habíamos asegurado de que accedíamos correctamente a la información almacenada en el xml mediante dos trace():

trace(imagen)
trace(descripcion)

Estos trace(), una vez han cumplido su propósito los vamos a sustituir por la llamada a una función que nos cargue la primera imagen de nuestra galeria:

CargarPrimeraImagen();

Con lo que el script nos quedaría

function cargarXML(cargado) {
if (cargado) {
xmlNodo = this.firstChild;
imagen = [];
descripcion = [];
total = xmlNodo.childNodes.length;
for (i=0; i<total; i++) {
	imagen[i] = xmlNodo.childNodes[i].childNodes[0].firstChild.nodeValue;
	descripcion[i] = xmlNodo.childNodes[i].childNodes[1].firstChild.nodeValue;
}
CargarPrimeraImagen();
} else {
trace("algo ha fallado");
}
}
xmlAlbum = new XML();
xmlAlbum.ignoreWhite = true;
xmlAlbum.onLoad = cargarXML;
xmlAlbum.load("imagenes.xml");

Ahora deberemos definir la función CargarPrimeraImagen();, para ello antes definimos una variable que nos servirá para irnos moviendo por los arrays:

posarray=0
//generamos la funcion
function CargarPrimeraImagen() {
//cargamos en el clip de película "contenedor_mc"
//con el primer valor del array imagen
contenedor_mc.loadMovie(imagen[0]);
//Ponemos como texto de "titulo_txt"
//el primer valor del array descripcion
titulo_txt.text = descripcion[0];
//Obtenemos la imagen que nos encontramos respecto al total
//Con lo que siempre deberemos sumar 1 a la posicion de la array.
posicion_txt.text = posarray+1+" / "+total;
}  

A continuación necesitaremos crear sendas funciones para ir a la siguiente imagen o a la anterior.

///SIGUIENTE IMAGEN////////
function  SiguienteImagen()  {
//Si al menos queda una imagen para llegar al total
if (posarray<(total-1)) {
//Ponemos el alfa del contenedor a cero
contenedor_mc._alpha = 0;
//Sumo 1 a posarray
posarray++;
//Cargamos la imagen
contenedor_mc.loadMovie(imagen[posarray]);
//Cargamos el título
titulo_txt.text = descripcion[posarray];
//Obtenemos la posicion
posicion_txt.text = posarray+1+" / "+total;
}
}
////ANTERIOR IMAGEN//////
function  AnteriorImagen()  {
//Si no es la primera imagen
if (posarray>0) {
//Ponemos el alfa del contenedor a cero
contenedor_mc._alpha = 0;
//Resto 1 a posarray
posarray--;
//Cargamos la imagen
contenedor_mc.loadMovie(imagen[posarray]);
//Cargamos el título
titulo_txt.text = descripcion[posarray];
//Obtenemos la posicion
posicion_txt.text = posarray+1+" / "+total;
}
}

Ahora únicamente nos queda asignar las acciones a los botones que habíamos creado

////ACCIONES DE LOS BOTONES/////////
this.adelante_btn.onRelease = function(){
	SiguienteImagen();
}
this.atras_btn.onRelease = function(){
	AnteriorImagen();
}

Dejo para mañana la inclusión de una precarga en las imágenes.

Descargar ejemplo » »