Galeria de fotos con fade auto administrable

3 febrero, 2007 by LeoBaraldi | 43 Comments

Este tutorial surge por la necesidad de un amigo Maximiles que esta incurriendo en los ámbitos de flash, y su consulta es como hacer una galería de imágenes con una transición entre cada foto automáticamente. A la misma sumarle la posibilidad de que con solo tirar las imágenes a una carpeta esta construya la galería sin incurrir en códigos extras como XML.
Bueno para dicho trabajo vamos a usar obviamente flash y un poquito de PHP que será el encargado de recorrer nuestra carpeta de imágenes y generar un XML con las fotos a mostrar. Manos a la obra y mucha atención alumno Maximiles!!!! :P

Ante que todo creamos un php que recorrerá la carpeta que tiene nuestras imágenes y con ellas creara un archivo XML con la info de las mismas.
No vamos a explicar esta porción de código PHP por una razón que nos iríamos del tema, pero no es complicado, y de última así como esta funciona jeje.

Clic para ver Texto Plano

PHP:

<?php
$No=array(".","..","lista.php", "borrar.php", "Thumbs.db");
$fp=opendir(".");
echo "<?xml version='1.0' encoding='iso-8859-1'?".">";
echo "<files>";
while (false!==($file=readdir($fp))){
if ((!in_array($file,$No))&&(is_readable($file))){
echo "<file name='".utf8_encode($file)."' tamanio='".filesize($file)."' />";
}
}
closedir($fp);
echo "</files>";
?>

Este PHP guárdelo donde están las imágenes, creen una carpeta “img” y dentro de ella colóquelo.

Ahora pasemos a flash:
En nuestro primer frame de nuestra linea de tiempo principal vamos a colocar el código que vamos a crear.

Clic para ver Texto Plano

Actionscript:

//Aqui indicamos que use codificasión, por si hay caracteres como ñ, acentos o cosas raras
System.useCodepage = true;
//la carpeta que tiene nuestras fotos, con un nombre medio cambiado por si ya tenemos otra
//carpeta llamada imagenes
var fotos:String = "images/";
//velocidad del efecto entre fotos
var fade:Number = 20;
//primera foto a cargar
var iniciarFoto:Number = 0;
//tiempo que se va a mostrar
var tiempo:Number = 100;
//contador fade
var controlFade:Number = 0;
//contador de tiempo
var controlTiempo:Number = 0;
//creamos un objeto xml porque en definitiva el php nos devolvera un xml
miXML = new XML();
miXML.ignoreWhite = true;
miXML.onLoad = function(ok) {
if (ok) {
misFotos_array = this.firstChild.childNodes;
_root.createEmptyMovieClip("contenedor1_mc", 10);
_root.createEmptyMovieClip("contenedor2_mc", 20);
contenedor1_mc.loadMovie(fotos+misFotos_array[iniciarFoto].attributes.name);
iniciarFoto++;
contenedor2_mc.loadMovie(fotos+misFotos_array[iniciarFoto].attributes.name);
contenedor2_mc._alpha = 0;
curr_mc = 1;
onEnterFrame = function () {
if (curr_mc == 1) {
controlTiempo++;
if (controlTiempo>=tiempo) {
curr_mc = 2;
cambio = "IN";
}
}
if (curr_mc == 2) {
if (cambio == "IN") {
contenedor2_mc._alpha += 100/fade;
if (contenedor2_mc._alpha>=100) {
contenedor2_mc._alpha = 100;
cambio = "FIJO";
controlTiempo = 0;
iniciarFoto++;
if (iniciarFoto == misFotos_array.length) {
iniciarFoto = 0;
}
contenedor1_mc.loadMovie(fotos+misFotos_array[iniciarFoto].attributes.name);
}
}
if (cambio == "FIJO") {
controlTiempo++;
if (controlTiempo>=tiempo) {
cambio = "OUT";
}
}
if (cambio == "OUT") {
contenedor2_mc._alpha -= 100/fade;
if (contenedor2_mc._alpha<=0) {
contenedor2_mc._alpha = 0;
curr_mc = 1;
controlTiempo = 0;
iniciarFoto++;
if (iniciarFoto == misFotos_array.length) {
iniciarFoto = 0;
}
contenedor2_mc.loadMovie(fotos+misFotos_array[iniciarFoto].attributes.name);
}
}
}
};
}
};
//la url de nuestro PHP que crea un xml
miXML.load(fotos+'lista.php');
//

NOTA: Recuerden que esta galeria requiere un servidor de php, asi que sino tienen uno de tipo localhost, subalon a su sitio o a un sitio que soporte php.
Las imágenes van en la carpeta images y dentro de el va el archivo php, el swf va fuera de esa carpeta.

ver ejemplo descargar archivos

Share|

Author: LeoBaraldi

Diseñador gráfico y programador en Web, con experiencia profesional en el rubro desde 1998. Experto en diseño de interfaces Frontend y Backend, para sitios, portales y dispositivos móviles. Experto en estándares, CSS y HTML, conocimientos en CEO. Desarrollador de sitios multi plataformas en, HTML5, CSS3 y JQuery. Experto programador en Adobe Flex, AIR y ActionScript 3.0. Conocimientos en lenguajes como PHP, Javascript y bases de datos MySQL. Profesor de Diseño III y Diseño Web en la Escuela Superior de Diseño Aguas de la Cañada, asesor y colaborador para medios gráficos, editoriales y revistas afines. Actualmente Jefe de Producción en Manifesto solutions.

Recursos y ejemplos de actionscript, Flash, AIR, Flex, CSS y HTML. Tutoriales de actionscript 2 y actionscript 3

Galeria de fotos con fade auto administrable

Author: LeoBaraldi

43 Comments

Deja un comentario Cancelar respuesta