• inicio
  • tutoriales flash
  • trucos flash
  • faq's flash
  • enlaces flash
  • suscribirse al feed RSS

tutoriales ( todos | principiante | medio | avanzado | AS 1.0 | AS 2.0 | AS 3.0 | top )

Tutorial FLASH - Tutorial para hacer una galería de imágenes con carga dinámica en Flash. (Revisión 2)

| | Más
Versión Flash: 8 y superiores   |   Compatible con ActionScript 2.0   |   Nivel: Avanzado   |   Hits: 891544

En este recurso vamos a aprender a hacer una galería fotográfica. En ella se mostrarán las miniaturas de las imágenes y cuando hagamos clic en alguna de ellas se mostrará en grande. Todo ello se hará cargando dinámicamente las imágenes.

Fotografías cortesía de Gustavo Sanabria.

COMO HACERLO.
Como veremos más delante, este tutorial es el resultado de juntar varios tutoriales existentes en tutoriales-flash.com.

Lo primero que hay que hacer es crear las miniaturas en nuestro programa de manipulación de imágenes preferido. Tanto las miniaturas como los originales deben estar en formato JPEG no progresivo, PNG o GIF, de lo contrario Flash Player no podrá cargarlas.

Una vez que tengamos listos todos los JPEG, los metemos en dos directorios llamados originales y minis. Es importante que cada imagen tenga el mismo nombre de archivo en el original y en la miniatura.

Después de esto, preparamos el archivo XML que nos va a dar la lista de fotos. Este documento se puede crear de dos maneras: de modo estático o de modo dinámico.

Creación del documento XML de modo estático.
Podemos crearlo en nuestro programa de edición de texto preferido, por ejemplo en Bloc de notas en sistemas Windows o en TextEdit en sistemas Mac OS. El documento tiene que incluir los nombres de los archivos de las imágenes que hemos creado anteriormente manteniendo la misma sintaxis que este documento XML. En cada línea <archivo nombre='xxxxx.jpg' size='xx' /> hay que reemplazar el xxxxx por cada nombre de archivo de nuestros JPEG. Es conveniente evitar el uso de caracteres especiales en los nombres de archivo. Para este ejemplo no es necesario completar el valor del atributo size.

Creación del documento XML de modo dinámico.
Si disponemos en nuestro alojamiento de alguna tecnología de servidor como ASP o PHP, podremos automatizar la creación del documento XML de modo que se componga leyendo los archivos que hay en el directorio en tiempo de ejecución. Si empleamos este método cuando se elimine o se añada una foto en la carpeta originales automáticamente se generará el XML correcto. Si empleamos el modo estático cuando se elimine o se añada una foto en la carpeta originales habrá que abrir el documento XML en el editor y modificarlo borrando o añadiendo líneas <archivo nombre='... al documento.

Si disponemos de PHP en nuestro servidor aquí se explica como crear el archivo.
Como leer los archivos que hay en una carpeta del servidor con PHP.

Si disponemos de ASP en nuestro servidor aquí se explica como crear el archivo.
Como leer los archivos que hay en una carpeta del servidor con ASP y pasarlo a Flash.

Independientemente del método elegido estático o dinámico, para aprender como enviarle a Flash un XML con la lista de archivos de determinado directorio tenéis disponible este tutorial.
Recepción de datos externos en Flash. La clase XML.

Para el resto del tutorial no saldremos de Flash. Todo el código del ejemplo va en el primer fotograma salvo unas pequeñas acciones en los botones de pasar página. Vamos a ir poniendo el código de este primer fotograma en bloques para comentarlos.

// acciones en fotograma 1
stop();
System.useCodepage = true;
XML.prototype.ignoreWhite = true;
import mx.transitions.Tween;
// separacion-> distancia entre las imágenes
// tanto horizontal como vertical

var separacion:Number = 116;
// vbles para pasar de página
var pagina_actual:Number = 1;
var num_paginas:Number;
// array donde metemos los elementos del XML
var IMG_array:Array;
// objeto XML que carga la lista de miniaturas

Hasta aquí hemos definido una serie de ajustes iniciales.

var miniaturasXML:XML = new XML();
miniaturasXML.onLoad = mostrarMiniaturas;
miniaturasXML.load("/asp/verMiniaturas.asp"); // ó verMiniaturas.xml para modo estático
// funcion que se ejecuta al cargar el XML
function mostrarMiniaturas():Void {
// contadores de columna y fila para
// disponer las miniaturas

var fila:Number = 0;
var col:Number = 0;
// paso los datos del XML al array
IMG_array = this.firstChild.childNodes;
// como caben 12 fotos por página podemos
// saber el núm de páginas necesarias para
// mostrar todas las fotos

num_paginas = Math.ceil(IMG_array.length/12);
// creo el clip donde meteremos todas las miniaturas
var lienzo:MovieClip = _root.createEmptyMovieClip("lienzo_miniaturas", _root.getNextHighestDepth());
// lo posiciono donde nos conviene
lienzo._x = 19;
lienzo._y = 100;
// y lo enmascaro con el clip situado en la
// capa mascara. se enmascara para hacer el deslizamiento del
// clip cuando tengamos muchas miniaturas y no entren todas a
// la vez en pantalla (nuestro caso)

lienzo.setMask(mascara_mc);
// recorro el array que contiene la lista con los nombres de
// los archivos de las miniaturas e invoco la función crearMiniatura
// que es la que carga la imagen, la recoloca, le pone un pequeño
// marco y le asigna las acciones para verla ampliada

for (var k:Number = 0; IMG_array[k]; k++) {
// extraigo la ruta del archivo de imagen
//var ruta:String = "minis/"+IMG_array[k].attributes.nombre;
// como sólo tengo tres columnas, cuando llegue a
// la tercera, avanzo una fila y retorno a la primera

if (col>2) {
col = 0;
fila++;
}
// creo la miniatura. extraigo la ruta del archivo de imagen
// y la paso como tercer parámetro

crearMiniatura(col, fila, IMG_array[k].attributes.nombre);
col++;
}
}

En el bloque anterior hemos definido el objeto XML que va a recibir los datos y también la función encargada de procesarlos.

function crearMiniatura(columnaF:Number, filaF:Number, ruta:String) {
// bajo_clip es el clip que contendrá el marco de la miniatura
var bajo_clip:MovieClip = lienzo_miniaturas.createEmptyMovieClip("bajo_"+filaF+"_"+columnaF, lienzo_miniaturas.getNextHighestDepth());
// clip contendrá la imagen
var clip:MovieClip = lienzo_miniaturas.createEmptyMovieClip("foto_"+filaF+"_"+columnaF, lienzo_miniaturas.getNextHighestDepth());
// para cargar la miniatura definimos un objeto MovieClipLoader
// y un objeto detector de eventos

var mi_mcl:MovieClipLoader = new MovieClipLoader();
var miListener:Object = new Object();
mi_mcl.addListener(miListener);
clip.valor = "aaa";
// cargamos la imagen
mi_mcl.loadClip("/minis/"+ruta, clip);
miListener.onLoadStart = function(target_mc:MovieClip) {
// cuando comienza la carga de la imagen
// ponemos al _alpha a 0

target_mc._alpha = 0;
};
miListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
// aquí podéis poner acciones para mostrar una precarga,
// este caso no lo hemos considerado oportuno

};
// cuando ya se ha completado la carga y tenemos disponible el clip
miListener.onLoadInit = function(target_mc:MovieClip) {
// recolocamos la imagen (todavía está oculta, con _alpha=0)
target_mc._x = (separacion*columnaF)+(100-target_mc._width)*0.5;
target_mc._y = (separacion*filaF)+(100-target_mc._height)*0.5;
// recolocamos el marco que rodea a la foto
bajo_clip._x = target_mc._x-5;
bajo_clip._y = target_mc._y-5;
// dibujamos el marco
with (bajo_clip) {
beginFill(0xffffff);
lineStyle(1, 0xEEEEEE, 100);
lineTo(target_mc._width+10, 0);
lineTo(target_mc._width+10, target_mc._height+10);
lineTo(0, target_mc._height+10);
lineTo(0, 0);
endFill();
}
// al pinchar sobre el área del marco,
// mostramos la foto grande con la función
// verFotoGrande

bajo_clip.onRelease = function() {
verFotoGrande(ruta);
};
// muestro la miniatura animando el _alpha hasta 100
var myTween:Tween = new Tween(target_mc, "_alpha", mx.transitions.easing.Regular.easeOut, 0, 100, 2, true);
};
}

Hasta aquí hemos definido la función que crea cada una de las miniaturas. En este tutorial tenéis material de apoyo.

Carga de clips externos en Flash. La clase MovieClipLoader.

function verFotoGrande(ruta:String) {
clearInterval(intervaloColor);
// creo el clip donde irá la foto grande en una profundidad fija
// para que se reemplace cada vez que pincho en una miniatura

var grande:MovieClip = _root.createEmptyMovieClip("grande_mc", 2*IMG_array.length+11);
// igual con el clip que contendrá el marco
var bajo_grande:MovieClip = _root.createEmptyMovieClip("bajo_grande_mc", 2*IMG_array.length+10);
// posición vertical fija
grande._y = 100;
// para cargar la foto grnade definimos otro objeto MovieClipLoader
// y otro objeto detector de eventos

var grande_mcl:MovieClipLoader = new MovieClipLoader();
var grandeListener:Object = new Object();
grande_mcl.addListener(grandeListener);
// cargo la foto grande
grande_mcl.loadClip("/originales/"+ruta, grande);
grandeListener.onLoadStart = function(target_mc:MovieClip) {
// aplico una transformación de color que deja el clip
// tintado de blanco

myColor = new Color(target_mc);
myColorTransform = new Object();
myColorTransform = {ra:100, rb:255, ga:100, gb:255, ba:100, bb:255, aa:100, ab:0};
myColor.setTransform(myColorTransform);

};
grandeListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
// aquí podéis poner acciones para mostrar una precarga,
// este caso no lo hemos considerado oportuno

};
grandeListener.onLoadInit = function(target_mc:MovieClip) {
// recolocamos la imagen (todavía está oculta)
target_mc._x = 382+Math.round((315-target_mc._width)*0.5);
// recolocamos el marco que rodea a la foto grande
bajo_grande._x = target_mc._x-5;
bajo_grande._y = target_mc._y-5;
// dibujamos el marco
with (bajo_grande) {
beginFill(0xffffff);
lineStyle(1, 0xEEEEEE, 100);
lineTo(target_mc._width+10, 0);
lineTo(target_mc._width+10, target_mc._height+10);
lineTo(0, target_mc._height+10);
lineTo(0, 0);
endFill();
}
// con estas rutinas hacemos la transición de color desde el blanco
var indiceColor:Number = 255;
intervaloColor = setInterval(cambiarColor, 10);
function cambiarColor() {
myColorTransform = {ra:100, rb:indiceColor, ga:100, gb:indiceColor, ba:100, bb:indiceColor, aa:100, ab:0};
myColor.setTransform(myColorTransform);
indiceColor -= 2;
if (indiceColor == -1) {
clearInterval(intervaloColor);
}
}
};
}

Ya hemos creado la foto grande. Para hacer las transición de la foto grande hemos usado el método setTransform de la clase Color. Es este otro tutorial se explica un ejemplo de su uso.

Tutorial para cambiar el color de un clip en Flash, usando ActionScript.

// con esta función desplazo el lienzo de las miniaturas para
// pasar de página

function moverLienzo(posY:Number):Void {
var myTween:Tween = new Tween(lienzo_miniaturas, "_y", mx.transitions.easing.Regular.easeOut, lienzo_miniaturas._y, posY, 1, true);
}
// deshabilito de inicio el botón de volver atrás
// ya que se muestra la página 1

pMenos_btn.enabled = false;
pMenos_btn._alpha = 30;

Por último queda el código de los botones de pasar página.
En página-

on (release) {
// activo el botón página+
pMas_btn.enabled = true;
pMas_btn._alpha = 100;
moverLienzo(100-(pagina_actual-2)*464);
pagina_actual--;
// si llego a la primera página
// ya no puedo retroceder, por tanto
// deshabilito el botón

if (pagina_actual == 1) {
pMenos_btn.enabled = false;
pMenos_btn._alpha = 30;
}
}

En página+

on (release) {
// activo el botón página-
pMenos_btn.enabled = true;
pMenos_btn._alpha = 100;
moverLienzo(100-(pagina_actual*464));
pagina_actual++;
// si llego a la última página
// ya no puedo avanzar, por tanto
// deshabilito el botón

if (pagina_actual == num_paginas) {
pMas_btn.enabled = false;
pMas_btn._alpha = 30;
}
}

En este tutorial os hemos enseñado los pasos para hacer una galería de fotos, ahora es el momento de experimentar con código e introducir vuestras propias variaciones sobre el ejemplo.

Podéis descargaros este mismo ejemplo y ver cómo funciona: galeria.zip

Tutoriales Flash relacionados
| | Más
flash 1flash 1flash 1flash 2flash 1flash 3flash 1flash 4