Galería con Flash

[Shion_Dan_Aries]

Estoy haciendo una web en la que necesito insertar una galería.. Había pensado en una galería flash, de estas que haces click en la imagen y ésta se agranda a la vez que el resto de la página se pone negro, como en esta web http://www.barbroutedesign.com/oakwood/index.html

Si alguno sabe como hacerla o conoce algún script o algo de eso parecido, pues me vendría muy bien jeje

Muchas gracias!

[Solid]

Ahí tenés basicamente 3 cosas.

1º - La galería desarrollada en Flash + AS
2º - Una implementación de JScript estilo ThickBox (me refiero a lo del fondo negro y demás)
3º - Mostrar la imagen dinámicamente (una vez más, Flash + AS).

La cosa sería más o menos así entonces...

La galería
Mi recomendación, trabajar con XML o un archivo con variables en formato de URL para levantar los datos desde Flash ya sea con el LoadVars o el objeto para XMLs.
Una vez que tengas la información "por escrito" de las URLs, nombres y lo que sea de datos que quieras mostrar, lo que tenés que hacer es generar la galería propiamente dicha.

Para esto te recomiendo que te crees un MC modelo para las miniaturas que en algún lugar tenga otro MC que vas a usar para cargar ahí dentro la miniatura propiamente dicha.

Entonces lo que haces es un ciclo de tantas vueltas como fotos tengas que mostrar y vas "clavando" dinámicamente tu MC modelo pasándole los datos correspondientes, algo más o menos así:

Código PHP:

  var nueva_x = 0;
var nueva_y = 0;
var spacer_x = 100;
var spacer_y = 100;
columnas = 5;
contador = 0;
 
for(x=1;x<datos["cantidad_imagenes"]+1;x++)
{
    attachMovie("thumb_modelo","thumb_" + x,this._getNextHighestDepth(),{_x:nueva_x, _y:nueva_y});
    this["thumb_" + x].id = x;
    this["thumb_" + x].titulo = datos["imagen_" + x + "_titulo"];
    this["thumb_" + x].otro_dato = datos["imagen_" + x + "_dato1"];
    this["thumb_" + x].mas_datos = datos["imagen_" + x + "_dato2"];
    this["thumb_" + x].cargador.loadMovie("galeria/thumbs/" + datos["imagen_" + x + "_url"];
 
    nueva_x += spacer_x;
    contador += 1;
    if(contador > columnas)
    {
         contador = 0;
         nueva_y += spacer_y;
    }
} 
   

Creo que no me olvido de nada en el código...
Con ese código ya más o menos tendrías armada la galería de miniaturas. Notar que es una galería bastante cutre, osea, nada de páginado ni cosas raras, con ese código mostrás todas las miniaturas de una sola vez.
También te agregué unas variables como para organizar en pantalla las miniaturas y que no estén una arriba de la otra.

Pero en todo caso recuerda, es solo un ejemplo.
Y una última cosa, en ese código se asume que la información viene por un loadvars en formato:

Código PHP:

  &cantidad_imagenes=20&imagen_1_titulo=titulo.... 
   

Una última cosa, fijate que uno de los datos que paso es ID (en este caso, el valor de X dentro del ciclo), ese valor lo tendrías que usar en algún botón transparente en tu MC modelo con algún link tipo:

Código PHP:

  getURL("javascript:abrir_foto(" + this.id + ")"); 
   

El pop-up (no es un pop-up en realidad...pero se entiende)
Esto está hecho con JavaScript, usando (muy seguramente) una implementación de ThickBox (o alguno similar), asique te recomiendo que primero googlees eso, consigas la galería y te fijes en la documentación como usarla.

En cualquier caso, deberías tener una función javascript llamada abrir_foto(id) (siguiendo el ejemplo dado) que (obviamente) haga la llamada correspondiente a ThickBox llamando a una URL determinada que es donde tendrás tu película Flash que abre las imagenes propiamente dichas.

Asique supongamos que ese archivo se llama mostrar_imagen.html, entonces con ThickBox tendrías que abrir el archivo "mostrar_imagen.html?id=" + id (comillas y demás según como vengas en tu script, pero tienes que pasar si o si la variable ID con la que Flash llama a esta función.

Ahora bien, aquí vale la pena hacer una distinción. Si ya sabes de antemano que tus imagenes NUNCA superan dimensiones máximas predeterminadas (por ejemplo 800x600 pixeles) basta con llamar al ThickBox con esas dimensiones y listo, si no fuera el caso, entonces lo mejor que puedes hacer es cambiar un poco tu llamada getURL del Flash a algo así...

Código PHP:

  getURL("javascript:abrir_foto(" + this.id + "," + this.img_width + "," + this.img_height + ")"); 
   

Para lo cual en tu archivo de variables tendrás que incluir los datos de ancho y alto de cada imagen (en tamaño completo) y cuando incrustes el MC modelo pasar esas variables también.

Entonces ahora tu función JScript recibe además ancho y alto de la imagen, asique ya puedes pasar anchos y altos variables al ThickBox! ;)



La imagen a tamaño completo
Nada más sencillo que un archivo que embedee una película Flash pasándole como variable la ID de la imagen. Entonces desde tu película Flash haces basicamente lo mismo que en tu galería solo que esta vez vas derecho al índice que te interesa (tomándolo de tu variable ID).

Después para realizar efectos como los de el marco dinámico que se agranda hasta las dimensiones de cada imagen y demás...es otra historia, animación por código basándote en las dimensiones de la imagen que estás cargando (para lo cual te recomiendo usar statements del tipo

Código PHP:

  marco.onEnterFrame = function()
{
     //tu codigo de animacion
} 
   

o bien recurrir a alguna de las tantas APIs para tweening que hay dando vueltas por internet...


----


Creo que eso cubre basicamente todos los elementos de esa galería. Asique ahora lo único que te queda es ponerte a jugar con el código y ver que puedes hacer y cualquier cosa, preguntas ;)