Galeria de imágenes con XML en Flash CS4 y Actioscript 2.0

DESCARGAR EJEMPLO :

GALERIA DE IMAGENES + XML +FLASH CS4

10 MB

 <----------------------

En este tutorial aprenderemos a crear una simple pero elegante galeria de imágenes dinámica con Adobe Flash, haciendo uso de Actionscript 2 y XML.

Características:

• Carga las imagenes desde un archivo XML
• Botones Prev y Next
• Muestra título de la foto en la parte inferior
• Transición de las imágenes en el cambio de foto.
• Sonido al cambio de las imágenes

Creamos un nuevo archivo flash:

Abrimos Adobe Flash CS3 o CS4  clic en  nuevo Archivo de Flash (AS 2.0), y creamos 4 capas lo renombramos con: "botones,titulos,fondo,actions" de preferencia.

Creamos las capas y los movieclips:

En la capa "fondo" dibujamos un rectángulo de 500 x 309 pixeles,borramos su fondo si lo deseamos y nos quedamos con el borde. Convertimos a este rectángulo en un clip de pelicula presionado F8 lo ponemos el nombre" folder". Después presionamos sobre el clip de película y colocamos el nombre de instacia como "folder".

De igual manera para en contenedor de los títulos dibujamos un rectagulo en la capa "titulos" , lo convertimos en clip de película y lo ponemos como nombre de instancia "cuadro_titulo", demos en él doble click para ir al fondo del movieclip y trazamos un campo de texo dinamico poniendole como instancia "txt_titulo".

Dibujamos los botones:

Finalmente dibujamos 2 triangulos en la capa botones a tu gusto y lo convertimos en simbolo presionado F8 elegimos "boton". Lo nombres de instancias deben ser "prev "y "next" respectivamente. Con un poco de filtros se veria así:

Lo del archivo XML
Creamos un documento xml con cualquier editor, ejemplo Notepad,Dreamweaver,etc. Con esta estructura y lo guardamos conmo imagenes.xml.

 
<?xml version="1.0" encoding="utf-8"?>
<galeria>
 <imagen url="images/futbol.jpg" titulo="Un vector inspirado en un futbolista" />
 <imagen url="images/automovil.jpg" titulo="Elegante automovil amarillo" />
 <imagen url="images/lago.jpg" titulo="Un lindo lago en el campo" />
 <imagen url="images/phoenix.jpg" titulo="Vector con colores muy brillantes" />
 <imagen url="images/vectorgirl.jpg" titulo="Otra creacion de NdesignStudio" />
 <imagen url="images/verde.jpg" titulo="Luz de la maniana en las plantas" />
</galeria>

Atributo Url: Es la ruta de la imagen PNG,JPG,GIF
Atributo Titulo: Pones el titulo o decripción de tu imágen
Programemos un poquito:
En la capa actions vamos a colocar los siguientes codigos Actionscript:

 
//importamos las clases para transicion----
 
import mx.transitions.Tween;
import mx.transitions.easing.*;
 
//cremos los arrays para almacenar datos del xml
var urls:Array = new Array();
var titulos:Array = new Array();
var current:Number;
//Establecer tamaño del movieclip folder
holder._width = 501;
holder._height = 310; 

Aquí parseamos el XML de la forma mas simple:

//----------------------El XML---------------------
var x:XML = new XML();
x.ignoreWhite = true;
x.onLoad = function(success) { 
var photos:Array = this.firstChild.childNodes; 
   for(i=0;i<photos.length;i++) {  
      urls.push(photos[i].attributes.url);  
      titulos.push(photos[i].attributes.titulo); 
   } 
holder.loadMovie(urls[0]); 
cuadro_titulo.txt_titulo.text = titulos[0]; 
current = 0;
}
x.load("imagenes.xml");

Para los botones anterior y siguiente:

 
 //------------PREV Y NEXT-------------
 
previous.onRelease = function() {
 if(current > 0) {
  current--;
  holder.loadMovie(urls[current]);
  cuadro_titulo.txt_titulo.text = titulos[current];
  alphaTw = new Tween(holder, "_alpha", Regular.easeOut, 0, 100, 7, false);
 }
}
 
next.onRelease = function() {
 if(current < urls.length-1) {
  current++;
     holder.loadMovie(urls[current]);
     cuadro_titulo.txt_titulo.text = titulos[current];
  alphaTw = new Tween(holder, "_alpha", Regular.easeOut, 0, 100, 7, false);
 }
 
}

Y por últmo para aclarar y opacar el movieclip del título al pasar el mouse sobre él ,aplicamos un nuevo Tween:

 
//Efecto cuadro del titulo
cuadro_titulo.onRollOver = function(){
 alphaTw = new Tween(cuadro_titulo, "_alpha", Regular.easeIn, 5, 100, 7, false);
 }
cuadro_titulo.onRollOut = function(){
 alphaTw = new Tween(cuadro_titulo, "_alpha", Regular.easeOut, 100, 20, 7, false);
 }

Solo falta un Control + Enter para probar nuestra galería de fotos.

 DEMO | DESCARGAR  

Nota: En el demo no se nota bién la transición entre las fotos debido a que están alojados en googlepages.