Tu Portal de Ayudas 404 - Como Crear Una Galeria Fotografica En Flash

Buscar

Resultados por: Mensajes Argumentos
Búsqueda avanzada

Tutorial de como montarte una galería fotográfica utilizando flash. Una forma sencilla y fácil de crearte tus propias galerías en tus paginas con muy poco peso (descarga rápida) muy vistosa y funcional. Agradecemos a AIRTIGHT Interactive por esta estupenda aplicación gratuita denominada SimpleViewer.

Necesitaremos algunos archivos. Nos hemos tomado la libertad de modificarlos a nuestras necesidades y simplificarlos para el uso que nosotros le vamos a prestar, utilizando esta galería Flash en una pagina simple HTML sin necesidad de otros parámetros ( Sin bases de datos, ni PHP, ASP, ni muchas otras opciones y maneras de poder utilizar esta aplicación. Para usuarios de alguno de los leguajes de programación anteriores en la pagina de sus autores tenéis todo lo necesario para poder utilizarla también. PHP, ASP, ColdFusion, Perl.)

Solo con HTML Bajatelos de aquí
Descargar (Archivos comprimidos en zip)

Lo primero necesitaras crearte una carpeta donde descomprimir los archivos que vamos a utilizar para nuestra galería, no estaría de mas que ya te la crees en el directorio de tu Web. (llámala "Mi Galería", por ejemplo) como si montáramos otro apartado o sección de nuestras paginas. Dentro una vez descomprimida encontraremos estos archivos.

Una pagina normal html. Que es donde mostraremos la galería. Podemos utilizar cualquier pagina que necesitemos ( para los que utilizan su misma plantilla ya configurada y diseñada a su gusto ) ya que lo único que tendremos que hacer es incrustarle el archivo SWF para que funcione junto a los otros componentes. ( quiero decir que estén los otros archivos en el mismo directorio que la pagina, se entiende ¿ no ? En realidad esta pagina no será necesaria si utilizas una creada por ti. Te puede servir como pruebas y ejemplo.
El archivo ImageData XML. Que es otra pagina desde donde configuraremos el aspecto de nuestra galería, color de fondo, bordes, tamaño de la imagen principal que se muestra, ,,,,,
Una carpeta THUMBS Donde guardaremos las imágenes miniaturas de la galería. IMPORTANTE estas tienen que ser de 45x45 píxeles.
Una carpeta IMAGES Donde pondremos las fotos originales.
Aclaración: Nosotros utilizamos el XnView un programa gratuito y de insuperables prestaciones para tratamiento de imágenes, lo puedes descargar de AQUÍ y en Español. Entre algunas de sus opciones tienes la de conversión por lotes, eliges la carpeta donde tienes las imágenes grandes IMAGES y te las convierte todas a otro tamaño directamente, las miniaturas por ejemplo, solo le tenemos que decir que la conversión la guarde en la carpeta Thumbs y trabajo listo. Últimamente se dispone de infinidad de programas gratuitos y que realizan esta función, incluido el que te ofrece GOOGLE el Picasa.

La galería Flash. VIEWER.swf Este será el resultado y donde se mostrara nuestro trabajo, solo tenemos que insertar este complemento en nuestra pagina.

Comencemos a trabajar. Si ya lo tienes todo listo y preparado , las imágenes grandes ( originales ) en la carpeta Images, las imágenes pequeñas ( las mismas que las grandes pero en miniatura de 45x45 ) en la carpeta Thumbs la pagina Web donde piensas poner la galería con su hueco preparado para insertarla, empezaremos a configurar nuestra galería.

Editaremos el archivo ImageData.XML
Muy fácil , con el propio bloc de notas, el FrontPage...
Fijémonos en el código: Todo es configurable y lo podemos modificar a nuestra necesidad y gusto.

Código:

<SIMPLEVIEWER_DATA maximageDimension="450" ( Este será el tamaño de la imagen principal que se mostrara en la galería )
textColor="0x0066ff" ( Este será el color en el que aparecerán los textos y flechas de la galería. Modifica a tu gusto después de la x, para que lo entiendas mejor las ultimas 6 cifras )
ROJO = FF0000 VERDE = 00FF00
AZUL = 0000FF NARANJA = FF8000
BLANCO = FFFFFF NEGRO = 000000

Si buscas en google colores HTML encontraras cientos de tablas y sus valores.
frameColor="0x......" ( Este es el color que tendrá el borde que rodea las miniaturas )
bgColor="0x......" ( Este será el color del fondo al cambiar la imagen principal de la galería )
frameWidth=".." ( Este será el borde que tendrá la imagen principal de la galería )
stagePadding=".." ( Esta será la separación que tendrá la imagen principal de las miniaturas )
thumbnailColumns="." ( Aquí defines cuantas columnas de miniaturas quieres en la galería. Verticales.)
thumbnailRows="." ( Aquí cuantas columnas Horizontales ) navPosition="....." ( Aquí si quieres la imagen principal a la izquierda, derecha, arriba, abajo. ) navDirection="..." ( Aquí la dirección. Puedes dejarlo como esta ) title="........" ( Aquí el titulo que quieras ponerle a tu galería ).
Ahora configuramos las imágenes nuestras:

Código:

<IMAGE><NAME>NOMBRE DE TU FOTO</NAME>
<CAPTION>Descripción o titulo de la foto, además puedes incluir código como enlaces al exterior, etc,etc.</CAPTION></IMAGE>

Todo esto, (de la etiqueta "image" a "image") lo podemos repetir cuantas veces sea necesario, según nuestra necesidad y cantidad de fotos que queramos incluir. Automáticamente se crearan las diferentes tablas de miniaturas en nuestra galería.
Recuerda al terminar tu configuración de GUARDAR el archivo con el mismo nombre y en el mismo lugar que lo tenias ImageData.xml
Ahora si abres la pagina index.html tendrías que ver correctamente funcionando tu galería. AQUÍ TIENES UN EJEMPLO de como funciona una de las nuestras.

Para insertar la galería en una pagina diseñada a tu manera y con las características de tu sitio. Lo único que tienes que hacer es insertarle el archivo viewer.swf en el lugar que quieras que aparezca y redimensionarlo a tus medidas. ¿ como ? En FrontPage seria: Desde el menú superior de nuestro editor, Insertar → Componente Web → Controles avanzados → Complemento. ( con el botón examinar localizamos el archivo viewer.swf ) Lo agrandamos a la medida necesitada y listo. Ya tendremos nuestra galería insertada en nuestra pagina. Para cambiar el color de fondo de la galería, una vez insertada en tu pagina mira el código fuente y en atributo dentro de la etiqueta "embed" cambia el valor de este parámetro

Código:

bgcolor="#0000FF">

RECUERDA guardar tu pagina en la misma carpeta donde están los otros archivos.
Puedes guardar la pagina con el nombre que quieras lo importante es que este esta en la misma carpeta que todo lo demás, ahora solo tienes que enlazarla como una pagina mas en tu sitio y a disfrutar.
Puedes crearte tantas carpetas como galerías necesites, pero siempre en carpetas distintas, quiere decir

Fuente HTML

Estilo

Formato

Fuente

Tamaño

en otros subdirectorios. Añade los archivos xml, swf, las carpetas thumbs, images modifica su configuración a tu nueva necesidad y podrás montar otra galería. Bueno espero que esto os sirva de gran ayuda y por supuesto lo disfrutéis tanto como nosotros.