Interactividad
 



ImageReady nos permite dar cierta interactividad a nuestras imágenes, así como crear botones, animaciones y crear mapas de imágenes

 

 
Animaciones


Una animación en ImageReady se crea con imágenes en formato GIF en movimiento, para crear este movimiento se recurre a varias imágenes distintas que al reproducirse crean la impresión del movimiento. Las imágenes GIF admiten capas y en cada capa podremos configurar nuestro movimiento.

Así pues, podemos diseñar una imagen por capas y en cada, imagen mostrar u ocultar ciertas capas.



Para empezar crearemos una imagen para hacer una animación.

Abrimos la paleta capas, y vamos a añadir texto, imágenes, etc... en diferentes capas. Podemos duplicar capas y dar efectos de capa o ajustar imágenes(niveles, tono saturación, etc...). Vamos construyendo la imagen y escondiendo las capas que nos molesten.

Cuando hemos terminado la imagen, abrimos la paleta Animación y vamos creando nuevos fotogramas, a la vez mostramos / ocultamos las capas que queramos.

A cada fotograma o cuadro podemos darle un tiempo determinado de exposición, además cada capa la podemos mover por el sitio de la pantalla que queramos. En ImageReady hay cambios que solo afectan a un fotograma y otros que afectan a todos los fotogramas, por ejemplo aplicar un filtro afecta a todas las capas de cada fotograma(en general las opciones de la paleta capas solo afectan al cuadro en el que trabajamos)

Cuando hemos creado todos los fotogramas que necesitemos, pulsamos sobre reproducir en la paleta de animación.

Podemos pues crear una imagen con multitud de capas para ocultar o mostrar las capas o podemos ir creando capas a medida que las necesitemos en cada fotograma, el problema es que cada capa nueva, será visible en todos los fotogramas anteriores y tendremos que ocultarlas manualmente.

No convine introducir demasiadas capas o fotogramas, a nuestra animación ya que revierte en el tamaño de archivo...

 

Rollovers y botones


Un RollOver es un espacio de una imagen que cambia por un evento del ratón(JavaScript). Se utilizan para hacer botones animados.

Los rollover, por tanto, tienen tres estados del botón(aunque se les puede añadir mas), normal, sobre y abajo.

Se puede hacer un rollover en un sector o en un mapa de imagen así como introducir animaciones en cada estado del botón.

En la paleta rollover vemos los estados por defecto solo aparece uno, normal, para añadir estados pulsamos sobre el botón de la paleta de rollover.

 

Mapas de imagen


Como habíamos visto en Dreamweaver un mapa de imagen es una imagen que puede contener varios vínculos, en ImageReady podemos hacer rollover en cada área de un mapa de imagen. A si mismo podemos seleccionar una dirección URL donde vamos a vincular el mapa de imagen.

 

Exportar


Por lo general cuando trabajamos con ImageReady no podemos exportar una imagen con animaciones, rollover o mapas de imagen directamente a Dreamweaver, por lo que tendremos que copiar código y pegarlo a nuestra página.

ImageReady crea una página HTML con el código de las imágenes, por ejemplo, un rollover contiene funciones de JavaScript que habrá que copiar a nuestra página manualmente, esto puede parecer un tanto engorroso, pero ImageReady escribe un código muy limpio y con un poco de practica(las funciones son siempre las mismas) podremos realizar nuestra página con éxito.

Por otro lado desde Dreamweaver podemos hacer un código parecido con Comportamientos, así que podríamos exportar desde ImageReady solo imágenes y desde Dreamweaver, concretamente con las acciones: carga previa de imágenes, intercambiar imágenes y restaurar imagen intercambiada podríamos llegar a lo mismo.