Animaciones

Una animación es un conjunto de imágenes estáticas que se reproducen cíclicamente. Crear un archivo GIF animado es realmente sencillo, con una aplicación específica como Ulead Gif Animator o con programas de tratamiento general, como Photoshop o el popular Gimp.

En Photoshop, basta con superponer dos o más imágenes en capas o incluso duplicar un mismo motivo, aplicando en cada capa alguna modificación: un desplazamiento, un escalado, un cambio de color o de opacidad, un desenfoque o cualquiera de los abundantes filtros disponibles.

A continuación, se abre la paleta Animación, que ya incluye el programa y que está disponible en ImageReady en versiones antiguas. En la parte derecha se encuentra un pequeño triángulo que despliega diferentes comandos, entre ellos Crear cuadros a partir de capas.

Cada capa da lugar a un cuadro o fotograma. Se puede reordenar, duplicar, eliminar y también establecer la duración de cada uno. Finalmente, la animación se puede exportar con el comando Guardar para web, en formato GIF o PNG.

El GIF está limitado a 8 bits. El PNG, por su parte, tiene la ventaja de guardar imágenes en color de 24 bits, pero ya hemos comentado que Internet Explorer suele interpretar mal sus zonas transparentes.

Nuestro primer ejemplo es un GIF animado con dos fotogramas, en uno de los cuales la capa está oculta:

La paleta Animación, con los fotogramas y la duración asignada a cada uno.

En este otro caso, realizamos una selección elíptica y la giramos con el comando Transformar selección del menú Selección, hasta seis veces en 30 grados. Tras cada giro, copiamos parte de la capa de fondo y la pegamos como capa nueva. Después de crear los fotogramas por capas, se elimina el fotograma de la capa de fondo, que muestra la imagen completa:

Los seis fotogramas en la paleta Animación.

En las capas para la siguiente animación, se aplica a un objeto circular unos simples escalados verticales y horizontales con el comando Transformación libre:

En esta última muestra, se superponen fotografías diferentes. De cada una se hacen otras dos capas duplicadas y desplazadas a la izquierda. Tras crear los cuadros a partir de las nueve capas, tenemos que situarnos en cada fotograma desplazado para activar la visibilidad de la capa que contiene la foto anterior a cubrir:

Imágenes de sustitución

Al componer páginas web, se puede asignar a una imagen un vínculo para acceder a otra página o a otro lugar de la misma pulsando sobre ella. Una forma frecuente de mostrar al lector que esa imagen contiene el vínculo es hacer que ésta reaccione al paso del cursor.

En este ejemplo, hay en realidad dos imágenes de igual tamaño en píxeles. Al pasar el cursor por encima, una de las fotos es automáticamente reemplazada por la otra. Se puede hacer con el comando Imagen de sustitución de Dreamweaver, simplemente indicándole dónde están las dos versiones.

Aquí se ha hecho realmente desde la paleta Comportamientos, con el comando Intercambiar imagen y la opción OnMouseOver (traducible por "con el ratón encima"), que permite hacerlo sin que la imagen contenga obligatoriamente un vínculo:

Al pasar el cursor sobre la imagen, descubrimos los efectos del comando Intercambiar imagen.

Efectos "rollover" y sectores

Otras dos opciones interesantes son los efectos "rollover" y los sectores. Los estados de "rollover" hacen que la imagen pueda responder según lo que hagamos con el cursor: pasar por encima, dejar de pasar, hacer clic o doble clic… Los sectores, por su parte, permiten hacer una división en la imagen, de manera que cada una de las zonas -o solamente alguna de ellas- responda al cursor.

La siguiente imagen ha sido dividida en cuatro zonas con la herramienta Sector del Photoshop, y más concretamente con el botón Dividir de la barra Opciones.

En ImageReady, se ha asignado a cada sector dos estados de "rollover": uno para mostrar la versión en color cuando el cursor pasa por encima, y otro para mostrar la versión invertida mientras el cursor está pulsado:

Para esto, ha sido necesario, en primer lugar, que la imagen tuviese tres capas: una primera en grises, la segunda en color y la tercera invertida. Estas dos últimas permanecen ocultas:

Después, la imagen se divide en sectores -como ya se ha explicado- y se abre en ImageReady:

Seleccionando un sector (1, en la siguiente imagen), se crean estados de "rollover" con el penúltimo icono de la paleta Contenido de Web (2). Haciendo doble clic en el nombre del estado (3) determinamos a qué acción del cursor se responde. Situándonos en cada estado, hemos activado la visibilidad de la capa que queríamos.

En CorelDRAW y PhotoPaint, se asignan estados "rollover" a objetos con los comandos de la ventana acoplable Objetos cambiantes, sin necesidad de definir sectores.

Mapas de imágenes

Para concluir esta pequeña introducción, cabe hacer mención de la opción Mapas de imágenes, que permite asignar un vínculo a una zona irregular de la imagen, mientras que un sector siempre es rectangular.

Se pueden definir áreas, por ejemplo, a partir del contenido de una capa. Sin embargo, no se les puede asociar comportamientos "rollover", si no es transformándolas en sectores rectangulares.

Paulo Porta es profesor de instituto. Imparte plástica y fotografía digital y es autor del manual 'Fotografía e Imaxe Dixital'.