Foto Galeria en Flash usando XML

Hoy se va a estrenar la seccion de AS lenguaje de programación orientado para diseñadores  usado para el entorno Flash.

Aqui se va a mostrar como hacer una fotogaleria en flash que recopile las imagenes desde un archivo XML, se preguntarán los experimentados por que en XML y no llamarlo directamente como un grafico, la respuesta es sencilla. Para añadir más posteriormente!.

Ahora bien lo primero que haremos sera crear nuestro nuevo archivo en flash (yo use AS2 FLASH8  pues no tengo los recursos ni la falta de etica para bajarme el CS4)

Despues de eso, vamos a hacer nuestro archivo XML indicando basicamente las siguientes dos cosas:

1. Que imagenes Mostrar
2. Nombre de las imágenes

Mi XML se ve asi: y creo que las etiquetas usadas son bastante sencillas de interpretar.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<images>
    <pic>
        <image>http://kernelerror.net/editables/flashgaleria/kfc.jpg</image>
        <caption>Tengo hambre</caption>
    </pic>
    <pic>
        <image>http://kernelerror.net/editables/flashgaleria/bking.jpg</image>
        <caption>Si.. Talvez</caption>
    </pic>
    <pic>
        <image>http://kernelerror.net/editables/flashgaleria/mcdnlds.jpg</image>
        <caption>Rata no gracias</caption>
    </pic>
    <pic>
        <image>http://media.w00t.in/2009/05/ie56.jpg</image>
        <caption>Screenshot #2</caption>
    </pic>
</images>

Ahora lo guardamos como imagenes.xml

Ahora sigamos con nuestro archivo en Flash.
Les dejare esta plantilla usada en el tutorial, para acelerar un poco las cosas.

Deberían tener algo asi:

Ahora bien, explicare básicamente cada instancia usada.

picture = Define a partir de donde se va a dibujar la imagen

preloader = Carga la imagen del XML

desc_txt = Mustra la descripción de la imagen escrita en el XML

pos_txt = Indicador de numero de imagen

previous_btn = Botón para cargar la imagen anterior del XML

next_btn = Botón para cargar la siguiente imagen en el XML

Ahora bien, agreguemos el código.

Para esto seleccionamos la layer “acciones” y empezamos a escribir en el panel de ActionScript

Ahora bien, la primera parte del código es cargar el XML.

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
trace("file not loaded!");
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("imagenes.xml");

En la variante If verifica si el XML fue cargado y hace lo que se especifica en la lineas 16-19 y enumerar los nodos (imagenes):
En la línea 16 se especifica que se va a crear/cargar un nuevo XML
En la línea 17 se pone la propiedad de ignorar espacios en blanco, para evitar problemas
En la linea 18 se carga el XML para versiones anteriores de AS.
En la linea 19 le pido a xmlData que cargue el archivo xml creado anteriormente

Ahora la siguiente parte del Action Script, la cual consiste en algo muy sencillo, añadir soporte para las teclas izquierda y derecha.

listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);

Ahora añadimos soporte a los botones

previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};

Ahora definimos los textos dinámicos, primero el numero y posición de imágenes.

function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}

Ahora definimos los botones de anterior y Siguiente

Primero el de Siguiente:

function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
}

Aqui carga la siguiente image, le pone transparencia nula, y carga su descripción

Ahora el Botón de atras:

function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}

Es exactamente lo mismo excepto por la linea 3 que lo que Hace es que decrece en 1 el nivel en vez de aumentarlo.

Y la función de FistImage, que carga la imagen desde la cual partir.

function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
}
}

Y asi quedaria el Código Finalmente:

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
content = "nada cargado";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("imagenes.xml");

listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};

p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
}
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}

Y pues con eso acabamos.

El ejemplo aqui
El source aqui

• 

Posts Relacionados

• Preloader en Flash Pues en esta entrada se explicará como hacer un preloader...
• Crear Userbars en Fireworks Usando fundido Pues en este pequeño tutorial se mostrará como hacer una...
• Instalar drivers NVIDIA en Debian usando apt Pues este metodo tiene considerables ventajas sobre usar el instalador...
• Instalar drivers ATI/AMD en Debian usando apt En este metodo es continuación de mi entrada anterior sobre...
• Lista de países usando c# Hola! Ayer hablaba con Llyn sobre este tema, debido a...
• Guardar Imagenes en bases de datos usando c# Hola. Después de una prolongada ausencia debido a la culminación...
• Balanceo de expresiones usando pilas en c++ Buenas El balanceo de expresiones (no se con que otro...