17.1 Rollover. Imágenes de sustitución

Una de las utilidades importantes de las divisiones es que se pueden dotar de interactividad, es decir, la división o zona, responde a ciertas actuaciones del usuario como puede ser el pasar el ratón por encima (evento onMouseOver).Sepa que debe distinguir, entre evento o algo que ocurre (por ejemplo pasar el ratón por encima de una imagen) y acción o respuesta del sistema (por ejemplo cambia la imagen que se ve).

La palabra Rollover significa rodar o pasar por encima. El efecto producido al pasar el ratón por encima de una división se denomina efecto rollover. El paso del ratón actúa como detonante de una acción como puede ser la sustitución de una imagen por otra (rollover simple).

Un fotograma está formado por una imagen. Los fotogramas, en Fireworks, se utilizan normalmente para crear animaciones y rollovers. A través del panel fotogramas podemos añadir o seleccionar los fotogramas. Cuando se añade un fotograma, aparece vacío. Una vez creado, puede rellenarlo importando una imagen.

Todos los rollovers funcionan del mismo modo. Una imagen hace que aparezca otra en pantalla cuando se sitúa el puntero sobre ella. El elemento activador siempre es un objeto Web: una división o una zona interactiva.

El rollover más sencillo intercambia una imagen situada en el Fotograma 1, con una imagen que se encuentra justo debajo en el Fotograma 2. También puede crear rollovers más complejos. Los rollovers pueden intercambiar una imagen de cualquier fotograma; los rollovers desunidos intercambian imágenes de una división diferente de la división de activación.

Comenzaremos con el caso más sencillo que es la creación de un rollover simple.

17.2 Creación de un rollover simple o imagen de sustitución

Un rollover simple intercambia el fotograma que se encuentra justo debajo del fotograma superior y requiere sólo una división. El objeto de activación, la imagen, debe estar en una capa independiente, es decir, no compartida por otros objetos.

17.3 Ejercicio

Descargue las imágenes necesarias en su carpeta de trabajo: celulas.zip

1. Cree un lienzo de 550 x 400 con resolución 72 que es apropiada para crear una página Web.
2. Despliegue el panel fotogramas y observe como se asigna automáticamente el Fotograma 1 a la Capa 1.
3. Importe la imagen celula1.jpg sobre el lienzo y procure que esté más o menos centrada.
4. Seleccione la imagen.
5. Lo primero es crear una división. Haga clic en Edición > Insertar > División rectangular, para crear una división sobre la imagen. La división se sitúa en la capa Web.
6. Observe que en el centro de la división aparece un icono que llamamos tirador de comportamiento .
7. Con la capa 1 seleccionada, cree un nuevo fotograma en el panel Fotogramas. Para ello haga clic en el botón Fotograma nuevo , situado en la parte inferior del panel fotogramas, junto al icono papelera. El fotograma aparece con el nombre Fotograma 2 en el panel fotogramas. La imagen desaparece y la selección abandona la Capa 1 y se sitúa en la capa Web. Verá un rectángulo verde. El fotograma está vacío. Sólo verá la división, que se comparte en los dos fotogramas (Las divisiones se comparten en todos los fotogramas). Las imágenes no se comparten, cada una se sitúa en el fotograma seleccionado.
8. Con el nuevo fotograma 2 seleccionado, importe la segunda imagen celula2.jpg y colóquela en el mismo espacio que ocupaba la celula1, es decir, sobre el rectángulo verde. Observe que la nueva imagen se sitúa en la Capa 1. Si hace clic sobre fotgrama1 verá que cambia, tanto en el lienzo como en la capa. De modo que en la capa tendrá un objeto imagen al que se le han asignado dos forogramas, cada uno con su imagen. Observe también que la capa Web sólo muestra el objeto división. Por lo tanto puede tener varios fotogramas para una misma división de la capa Web. Una animación mostrará los sucesivos fotogramas. En nuestro caso solo utilizamos dos fotogramas, porque se trata de crear un Rollover simple o imagen de sustitución.
9. Como hemos dicho, las divisiones son visibles en todos los fotogramas. Trabajaremos sobre el Fotograma 1. Seleccione el Fotograma 1 que contiene la imagen original. Haga clic sobre la división en la capa Web para ver el tirador de comportamiento de la división .
10. Coloque el puntero sobre el tirador de comportamiento . El puntero cambia a una mano .
11. Haga clic en el tirador de comportamiento. Aparece un menú. Elija Añadir comportamiento de Rollover simple.
12. Podemos tener una vista previa del comportamiento utilizando los controles situados encima del inspector de propiedades y que permiten pasar de un fotograma a otro . Para probar, también puede seleccionar la ficha Vista previa . Sin embargo, es mejor probar utilizando el navegador de Internet. Pulse F12 para probar en un navegador

17.4 Rollover desunido

Un rollover desunido intercambia una imagen situada en un objeto Web, cuando el puntero se sitúa sobre otro objeto. En respuesta al evento de colocar el cursor o puntero sobre el área (onMouseOver) o al evento de hacer clic en la imagen de activación (onClick), aparece otra imagen en una ubicación distinta de la página Web. La imagen sobre la que se sitúa el cursor se considera el elemento activador; la imagen que cambia se considera el elemento destino.

Al igual que en el caso de los rollovers simples de sólo una división, primero debe configurar la división del elemento activador y la división de destino con el fotograma en el que reside la imagen de intercambio. Después, debe vincular el área de activación y la división de destino con una línea de comportamiento ( veremos como los comportamientos para un rollover se muestran en el documento como una línea azul que simula el vínculo).

No es necesario que el área de activación de un rollover desunido sea una división, aunque en el ejemplo utilicemos una.

17.5 Ejercicio

1. Cree un lienzo de 800 x 450, resolución 72, con un color de fondo #FFCC99
2. Importe la imagen celula1.jpg y sitúela a la izquierda del lienzo. La imagen se inserta en la Capa 1. En el panel fotogramas aparece Fotograma 1.
3. Como elementos activadores, crearemos sobre esta imagen una división poligonal para cada mitocondria y para el núcleo y una división rectangular para el complejo de Golgi, tal como muestran las zonas verdosas de la figura. Ponga nombre a las divisiones utilizando el inspector de propiedades. Para ello sustituya los nombres por defecto (algo parecido a 0000001_r3_c12) por Mitocondria1, Mitocondria2, Mitocondria3, Núcleo y Golgi respectivamente. Con esto tenemos preparada la imagen de activación con 5 divisiones.
4. En el panel capas cree una nueva capa haciendo clic en el botón nueva capa del panel de capas. La capa aparece con el nombre Capa 2. Aunque no es necesario poner las imágenes en capas diferentes hemos preferido separar en capas la imagen de activación y las imágenes de sustitución. Mantenga seleccionada la Capa 2
5. Cree un nuevo fotograma vacío haciendo clic en el botón Fotograma nuevo del panel Fotogramas.
6. Con la Capa 2 seleccionada y Fotograma 2 seleccionado, importe la imagen mitocondria.jpg que se utilizará como elemento destino. Puede colocar la imagen en cualquier punto de forma que no interfiera con la primera imagen., por ejemplo en la parte inferior izquierda del lienzo, tal como se muestra en la figura.
7. Seleccione la imagen y elija Edición > Insertar > División para incluir una división en la imagen. No es necesario que la división sea igual que la imagen, pero si es más pequeña, recortará la imagen cuando el rollover se ponga a funcionar.
8. Con la Capa 2 seleccionada, añada un nuevo fotograma (Fotograma 3). Importe sobre este fotograma la imagen del núcleo.
9. Utilice un nuevo fotograma en la Capa 2 para la imagen del complejo de Golgi.
10. Durante todo el proceso puede ocultar o mostrar las líneas rojas, guías división, utilizando el menú Ver. También puede ocultar o mostrar las divisiones utilizando los botones de la barra de herramientas, zona Web, Ocultar divisiones o Mostrar divisiones .
11. Reajuste la división y las imágenes de la esquina inferior derecha, para que ocupen el mayor espacio posible sin solapar la imagen del fotograma 1. Las imágenes las puede seleccionar utilizando el panel Capas y las divisiones utilizando el panel Capa Web. Para no deformar las imágenes mantenga pulsada la tecla mayúsculas mientras les cambia el tamaño. La división debe cubrir las imágenes para que éstas no sean recortadas en la activación.
12. En esta segunda fase hemos preparado la división destino. Sólo nos queda establecer los enlaces.
13. Seleccione el Fotograma 1 en el panel Fotogramas para volver al fotograma que contiene la imagen original. Seleccione la división de la Mitocondria 1. Coloque el puntero sobre el tirador de comportamiento . El puntero cambia a una mano. Arrastre el tirador de comportamiento de la zona activa o división de activación a la división de destino. La línea azul de comportamiento se extiende desde el centro del objeto activador hasta la esquina superior izquierda de la división de destino y se abre el cuadro de diálogo Intercambiar imagen.
14. En el menú emergente Intercambiar imagen de, seleccione el fotograma 2 que corresponde a la imagen de la mitocondria. Haga clic en Aceptar.
15. Pulse F12 para ver la marcha del proyecto en el navegador. Pasee el puntero por la primera zona de activación y debe aparecer la imagen de la mitocondria.
16. Establezca el resto de los enlaces y pruebe el resultado en el navegador. En la figura puede ver los enlaces representados por una línea azul y las divisiones representadas por áreas verdes.
17. Para eliminar un rollover de arrastrar y colocar, haga clic en la línea azul de comportamiento que desee eliminar.
18. Guarde el proyecto con el nombre rolloverdesunido.png, en su carpeta de trabajo.
19. Cree una carpeta para exportar el proyecto como página Web teniendo cuidado de marcar la casilla para que las imágenes se exporten en una subcarpeta.
20. Vaya a Windows y abra la carpeta de exportación. haga doble clic sobre la página Web y pruebe los enlaces.

17.6 Panel Comportamientos

En el ejercicio anterior ha realizado un práctica de creación de un rollover desunido. Como sabe, la activación del efecto rollover se produce cuando pasea el ratón por encima el área de activación. es posible cambiar el comportamiento para que se active el área con un clic del ratón y no automáticamente al pasar por encima de ella.

Gracias al panel Comportamientos puede asociar un comportamiento o más de uno a una división.

1. Utilice el proyecto del ejercicio anterior.
2. Seleccione la división correspondiente al núcleo.
3. Abra el panel comportamientos seleccionando el menú Ventana > Comportamientos.
4. En la lista aparece el Evento OnMouseOver (pasar el ratón por encima). La acción es intercambiar imagen. En la columna Eventos tiene un botón desplegable que le permite mostrar otros Eventos. Seleccione Onclick. Ahora para desencadenar la acción debe hacer clic sobre la división.
5. Pulse F12 y pruebe el resultado. Mientras las áreas con eventos onMouseOver muestran la imagen al pasar el ratón sobre ellas, la división correspondiente al Núcleo de la célula sólo mostrará la imagen al hacer clic sobre ella. Esto es así porque hemos establecido, mediante el panel comportamientos, que el evento desencadenante de la acción es onClick.
6. Puede añadir comportamientos con el botón + del panel comportamientos y los puede eliminar con el botón menos.

Resumiendo:

1. onMouseOver activa el comportamiento cuando el puntero se encuentra sobre el área de activación.
2. onMouseOut activa el comportamiento cuando el puntero abandona el área de activación.
3. onClick activa el comportamiento cuando se hace clic en el objeto de activación.
4. onLoad activa el comportamiento cuando se carga la página Web.