Tutorial: Crear una galería de imágenes en flash

Hola a todos!!

Qué tal va por aquí la cosa, pensabais que me olvidaba de vosotros, eh?

Os traigo algo que a más de uno le puede ser de gran ayuda. Se trata de un "soft", por llamarlo de alguna manera, para generar galerías de imágenes en flash. Es tan sencillo que da la risa y los resultados son más que buenos. Y es gratuito!!

Podeis haceros una idea pasando por mi web http://algaba.portallplan.com en la que tengo una nueva galería hecha con éste método.

Sin más preambulos paso al tutorial que he preparado.

Crear una galería de imágenes con Simple Viewer

1: Descarga

http://www.airtightinteractive.com/simpleviewer/SimpleViewer_v17.zip

Descarga y descomprime el archivo en una carpeta.

Te encontrarás con lo siguiente, dentro de la carpeta donde lo hallas descargado.

2. Imágenes

Copia tus imagenes en la carpeta “images”. Deben ser JPGs y guardadas como “no progresiva”.

3. Miniaturas de las imágenes

Tendremos que crear las miniaturas de nuestras imágenes, para ello podremos usar cualquier programa que nos permita redimensionarlas. Estas miniaturas irán dentro de la carpeta “thumbs” y llevarán el mismo nombre que la “foto-full”. No deberán sobrepasar los 45 x 45 píxeles ya que si superan éste tamaño quedarán cortadas.

4: Editando el archivo imageData.xml

Éste es un simple archivo de texto que puede editarse con cualquier procesador de textos. El primer párrafo es el siguiente:

<SIMPLEVIEWER_DATA maxImageDimension="480" textColor="0xFFFFFF"
frameColor="0xFFFFFF" bgColor="0x181818" frameWidth="20"
stagePadding="20" thumbnailRows="2" thumbnailColumns="3"
navPosition="right" navDirection="LTR" title="Example Title"
imagePath="" thumbPath="">

Puedes componer la galería a tu gusto:

•maxImageDimension: dimensión máxima de la imagen por cualquiera de sus lados (en píxeles). Redimensionará las imágenes mayores a éste tamaño con la consiguiente pérdida de calidad.
•textColor: Color del título de la galería y del título de las fotos (valor de color hexadecimal).
•frameColor: Color del marco de la imagen, marco de las miniaturas, etc. (valor de color hexadecimal)
•bgColor: Color del fondo.
•frameWidth: Grosor del marco de la imagen (en pixeles).
•stagePadding: Distancia entre la imagen y las miniaturas (en píxeles).
•thumbnailRows: número de filas de miniaturas.
•thumbnailColumns: número de columnas de miniaturas.
•navPosition: Posición de las miniaturas con respecto a la imagen. Puede ser "top", "bottom","left" or "right", según las quieras arriba, abajo, izquierda o derecha respectivamente.
•navDirection: Dirección de navegación. Puede ser "LTR" (Izquierda a derecha) or "RTL" (Derecha a izquierda)
•title: Título de la galería de imágenes.
•imagePath and thumbPath: Ignorar a menos que estés personalizando la estructura de archivos de Simple Viewer.

Lo siguiente será añadir una etiqueta IMAGE por cada imagen de la galería. (A las etiquetas IMAGE hay que añadirles los simbolitos < y >)

(En un principio sólo modificaremos las que ya existen y a medida que vayamos necesitando más imágenes haremos copy/paste con las ya existentes y le cambiaremos el nombre de la imagen)

IMAGE
<NAME>115-1503_IMG.jpg</NAME>
<CAPTION>Arles old town.</CAPTION>
/IMAGE

•<NAME> es el nombre de la imagen y la miniatura.
•<CAPTION> es un texto opcional para describir la imagen.

El texto opcional puede incluir formato HTML, incluyendo hyperlinks, etiquetas de fuentes, negrita, subrayado, cursivas,… Deberás insertar el texto en formato HTML dentro de la etiqueta CDATA como se ve a continuación:

<CAPTION><![CDATA[<font face="Times" size="20">
Big times text</font><b>bold text </b><u>
<a href="index.html">link text</a></u>]]></CAPTION>

5. Publicar nuestra galería.

Aquí cada uno os las apañais como podais. De momento podreis ver el resultado clicando en el archivo index.html

Espero que os sea de gran ayuda.

Un abrazo a todos 😉