'Slideshows' Flash para todos

Quedan atrás ya esos tiempos en los que había que bajar al máximo el peso a costa de la calidad de las fotos, debido al poco ancho de banda que teníamos en nuestras casas y lugares de trabajo. Sin embargo, la tónica general hoy día sigue siendo parecida, y por eso ... ¿qué tal si le devolvemos la dignidad a las fotos en internet?

Antes de comenzar, veamos de qué estamos hablando. Esto es lo que vas a poder usar libremente en tu sitio web:

Los detractores de Flash, expertos en usabilidad, de accesibilidad y en S.E.O. (posicionamiento en buscadores) podrían echarnos en cara el usar esta tecnología en lugar de HTML puro y duro, algo que funcionaría directamente en casi todos los navegadores sin necesidad de ningún plugin. Pero no lo hemos hecho así por capricho, ni porque tengamos acciones de Adobe (que no las tenemos :] ). El motivo es que se obtienen las siguientes ventajas:

Ventajas de usar slideshow.swf

1. Modo especial de pantalla completa, donde podemos contemplar cada foto en su máximo esplendor sin distracciones y destinando cada píxel a lo que de verdad importa: la foto. Esta opción combinado con lo descrito en 2., proporcionará unas fotos con una calidad pocas veces vista en internet :)

2. Varios archivos con distintas resoluciones por cada foto. Por ejemplo, a un visitante que vea el álbum en un netbook con una resolución pequeña de pantalla, le mandaremos archivos de 1024x768 píxeles ahorrando tiempo y ancho de banda. En cambio, alguien con una súper-pantalla de 24” le entregaríamos archivos de 1900x1200 píxeles.

3. Precarga en segundo plano de todas las fotos. Una vez cargada la foto solicitada, el visor cargará en segundo plano las siguientes o anteriores, dependiendo del sentido en el que estés viendo las fotos. Así no tendrás que esperar para cargar las demás.

4. Escalado de fotos con algoritmo de interpolación. Gracias a esto, las fotos no se verán pixeladas ni tendrán bordes dentados cuando el alto y el ancho real del archivo no sean exactamente el mismo que al que se está mostrando.

Vale, lo quiero usar sin complicarme mucho la vida

Antes de meternos en faena, tenemos que recordarte algo importante. Necesitas tener un sitio donde alojar todo, un servidor web donde puedas subir todos los archivos. Después de esta aclaración, vamos allá. Para hacer funcionar el álbum necesitas todos estos elementos:

• El archivo Flash slideshow.swf.
• El archivo HTML que contiene al anterior slideshow.html.
• El archivo XML, slideshow.xml, donde meteremos el título del álbum, los pies, etc.
• La carpeta o carpetas que contendrán las imágenes. Como mínimo tendrás dos, una con las fotos en grande y otra con las miniaturas. Lo ideal es que añadas varios tamaños de cada foto para adaptar la calidad a las condiciones del internauta (ver ventaja 2) en la tabla anterior.

Para que todo sea menos abstracto, en el paquete de archivos hay una galería de ejemplo con tres fotos. Sigue los pasos que hay a continuación para juguetear con tu primer álbum:

1. Descárgate este paquete de archivos, descomprímelo y abre la carpeta ejemplos/mi_slideshow
2. Haz doble clic en el archivo slideshow.html. Se abrirá tu navegador favorito con el álbum, echa un vistazo a las fotos, despliega las miniaturas, activa la pantalla completa, etc.
3. Edita el archivo slideshow.xml con tu editor de texto favorito (por ejemplo, Notepad++) y observa todo lo que puedes personalizar mirando la imagen siguiente. Cambia el título, los pies de foto, etc., y observa el efecto recargando la página en el navegador que se abrió antes. Tienes toda la referencia de parámetros en el XML al final de la página.

Para usarlo con tus fotos, sólo tienes que prepararlas con los tamaños que hayas especificado en el XML, copiarlas a las respectivas carpetas y cambiar en el archivo el título, el número de fotos y los pies de foto. Si no necesitas pies de foto, bórralos.

Sabemos que hacer varios tamaños de cada imagen es un engorro. Por eso hay aplicaciones que nos facilitarán bastante esta tarea, por ejemplo para Windows está Multiple Image Resizer. Si sabéis alguno para Mac o para Linux decidlo en los comentarios y lo añadiremos aquí.

Un vistazo a las tripas

Si te apañas programando ActionScript, controlas Adobe Flash, y necesitas modificar o mejorar en algo el comportamiento de la galería, también ponemos a tu disposición todo el código fuente con licencia Creative Commons (by-nc-nd).

Cambios estéticos

Puedes cambiar fácilmente la forma de los botones de las flechas, botones de pantalla completa y miniaturas, animación de precarga, etc. Sólo tienes que abrir el archivo .fla y hacer doble clic en cada uno de los clips que ves en el escenario. No te preocupes por la colocación, el programa los sabrá poner en su sitio.

También puedes cambiar los tipos de letra usados en el título y en los pies. Para ello abre la Biblioteca (Control+L) y busca fuentecuerpo y fuentetitulo. Haz doble clic y elige en la lista desplegable la fuente que quieras, así de fácil.

Dónde está el código

• En el _root de la película, capa CargaXML, tienes el código fuente que carga y procesa el XML.
• En la capa Foto hay un movieclip llamado Foto, dentro en la única capa que hay está el grueso del programa.

A continuación tienes un esquema de cómo están organizados los clips y el orden de contención de cada uno.

Hasta dónde puedes llegar

Además de lo que hemos visto hasta ahora, puedes especificar más opciones en el XML. Tienes todas las opciones posibles en la siguiente tabla.

Ejemplo de XML con todas las opciones

<?xml version="1.0" encoding="UTF-8" ?>
<slideshow>
<titulo>Título del álbum de fotos</titulo>
<ruta>http://www.miweb.com/ruta/los/archivos/</ruta>
<nombrearchivo>foto</nombrearchivo>
<tamanos>
<horizontales>650,1280,1600,1900</horizontales>
</tamanos>
<numerofotos>9</numerofotos>

<opciones>
<colorfondo>0x000000</colorfondo>
<colortinta>0xFFFFFF</colortinta>

<tamanofuentetitulo>25</tamanofuentetitulo>
<tamanofuentepiepantallanormal>12</tamanofuentepiepantallanormal>
<tamanofuentepiepantallacompleta>18</tamanofuentepiepantallacompleta>
<aparicionsuave>0</aparicionsuave>
<miniaturasvisiblesinicio>1</miniaturasvisiblesinicio>
<avisopantallacompleta>1</avisopantallacompleta>
<miniaturasactivadas>1</miniaturasactivadas>
<opcionpantallacompleta>1</opcionpantallacompleta>
<precargasegundoplano>1</precargasegundoplano>
<miniaturasancho>200</miniaturasancho>
<miniaturasalto>160</miniaturasalto>
</opciones>
<margenes>
<superior>50</superior>
<inferior>30</inferior>
<izquierda>30</izquierda>
<derecha>30</derecha>
</margenes>

<fotos>

<foto>
<firma>Ramón Pérez</firma>
<pie> Pie de texto de la foto 1</pie>
</foto>

<foto>
<firma>Ana Gómez</firma>
<pie> Pie de texto de la foto 2</pie>
</foto>
</fotos>

</slideshow>


Nada más, esperamos que te sea de utilidad, y si tienes alguna pregunta, corrección u observación, hazlo en los comentarios. También nos encantaría que, si lo usas en tu sitio, nos lo digas en los comentarios y nos pases el enlace.