ROLLOVERS

El método rollover de arrastrar y colocar permite incorporar interactividad en las divisiones.

Gracias a este método puede crear rápidamente efectos de rollover y de intercambio de imágenes
en el espacio de trabajo. Los comportamientos asignados pueden verse en el panel
Comportamientos y es posible crear elementos interactivos más complejos mediante este panel.

Edición de divisiones

En Fireworks un diseño de divisiones se manipula como una tabla en un procesador de textos.

Cuando arrastra una guía para cambiar el tamaño de una división, todas las divisiones
rectangulares adyacentes también cambian automáticamente de tamaño. Además, puede utilizar
el panel Herramientas para cambiar el tamaño y transformar divisiones como lo haría con los
objetos de vectores y de mapa de bits.

Desplazamiento de guías para editar divisiones

Las guías de división definen el perímetro y la posición de las divisiones. Las guías de división que
se extienden más allá de los objetos de división definen como se dividirá el resto del documento
durante la exportación. La forma de un objeto de división rectangular puede cambiarse
arrastrando las guías que lo rodean. No es posible cambiar el tamaño de los objetos de división no
rectangulares al mover las guías de división.

Cambio del tamaño de un objeto de división arrastrando sus guías

Nota: Cuando se arrastran las guías de división que rodean un botón de Fireworks en la ventana
de documento, se cambiará el tamaño de la división que define el área activa (o división) de dicho
botón.

Si se ha alineado varios objetos de división a lo largo de una única guía de división, podrá
arrastrar dicha guía de división para cambiar el tamaño de todos los objetos de forma simultánea.
 Cambio del tamaño de varios objetos de división arrastrando una guía

Además, si arrastra una guía a lo largo de una coordenada determinada el resto de las guías en la
misma coordenada se moverá con ella.

Para eliminar una guía de división:

Utilice la herramienta Puntero o Subselección para arrastrar la guía de división fuera del borde del
lienzo.

Para desplazar guías de división adyacentes:

1. Arrastre, manteniendo pulsada la tecla Mayús, una guía de división a lo largo de otras
guías de divisiones adyacentes.
2. Libere la guía de división en la ubicación que desee.

Todas las guías de división que ha arrastrado se desplazarán hasta esta ubicación.

Sugerencia: Puede cancelar esta operación liberando la tecla Shift antes de soltar el botón
del ratón. Todas las guías de división que ha seleccionado se ajustarán en sus posiciones
originales.

Uso de herramientas para editar objetos de división

Utilice las herramientas Puntero, Subselección y Transformar para modificar la forma o el tamaño
de una división. Puede recortar, escalar, inclinar y distorsionar divisiones.

Nota: Al utilizar estas herramientas para cambiar el tamaño y la forma de las divisiones es
posible que se creen divisiones superpuestas, debido a que el tamaño de los objetos de división
adyacentes no se ajusta automáticamente. Si las divisiones se superponen, la división superior en
el orden de apilamiento tendrá prioridad al utilizar funciones para interactividad. Para evitar la
superposición de divisiones utilice las guías para editar las divisiones.

Adición de interactividad en las divisiones

Los elementos básicos para la creación de interactividad en Fireworks son los objetos de división.
Fireworks ofrece dos métodos para añadir interactividad en las divisiones:

• La forma más sencilla es el método rollover de arrastrar y colocar. Con sólo arrastrar el
tirador de comportamiento de una división y colocarlo en una división destino podrá crear
rápidamente una interactividad sencilla.
 • El panel Comportamientos permite crear una interactividad más compleja. Además, el
panel Comportamientos contiene diferentes comportamientos interactivos que puede
incluir en las divisiones. Si incluye varios comportamientos en una única división, podrá
crear interesantes efectos.

Los comportamientos de Fireworks MX son compatibles con los de Macromedia Dreamweaver MX.
Cuando exporta un rollover de Fireworks a Dreamweaver, puede editar los comportamientos de
Fireworks mediante el panel Comportamientos de Dreamweaver.

De forma específica, el método de rollover de arrastrar y colocar permite determinar lo que

sucede en una división cuando el puntero del ratón pasa sobre ella. El resultado final se denomina
imagen de rollover. Las imágenes de rollover son gráficos cuyo aspecto cambia en un navegador
web al mover el puntero sobre ellas.

Cuando se selecciona una división aparece un círculo con una cruz en el centro. Se trata del
denominado tirador de comportamiento.

Acerca de los rollovers

Todos los rollovers funcionan del mismo modo. Un gráfico activa la visualización de otro cuando se
sitúa el puntero sobre el primero. El elemento activador siempre es un objeto web: una división,
zona interactiva o un botón.

El rollover más simple intercambia una imagen en el fotograma 1 con una imagen que se
encuentra justo debajo en el fotograma 2. Puede crear rollovers más complejos. Los rollovers
pueden intercambiar una imagen de cualquier fotograma; los rollovers desunidos muestran una
imagen en un punto alejado del cursor.

Cuando selecciona un objeto web de activación en Fireworks que se haya creado mediante un
tirador de comportamiento o el panel Comportamientos, aparecen todas sus relaciones de
comportamiento. De forma predeterminada, una interacción de rollover se representa mediante
una línea azul de comportamiento.

Creación de un rollover simple

Un rollover simple intercambia una imagen con otra en un fotograma bajo el mismo objeto web.
Un rollover simple requiere sólo una división o zona interactiva.

Puede elegir la imagen de intercambio de cualquier fotograma.

Para incluir un rollover simple en una imagen u objeto seleccionado:

1. Asegúrese de que la imagen u objeto no se encuentra en una capa compartida.

2. Elija Editar > Insertar > División para crear una división sobre la imagen u objeto.
3. Cree un nuevo fotograma en el panel Fotogramas haciendo clic en el botón Fotograma
nuevo/duplicado.
4. Cree, pegue o importe una imagen para utilizarla como una imagen de intercambio.

Sitúe la imagen debajo de la división que creó en el paso 2, debe estar visible aunque no
esté en el fotograma 2. Las divisiones son visibles en todos los fotogramas.
5. Seleccione el fotograma 1 en el panel Fotogramas para volver al fotograma que contiene la
imagen original.
6. Seleccione la división y coloque el puntero sobre el tirador de comportamiento. El puntero
cambia a una mano.

Nota: Puede seleccionar la división en cualquier fotograma.

 7. Arrastre el tirador de comportamiento hasta el borde superior de la división.

Una línea azul de comportamiento se extiende desde el centro de la división hasta la esquina superior
izquierda y aparece el cuadro de diálogo Intercambiar imagen.

8. En el menú emergente Intercambiar imagen de, seleccione el fotograma en el que se

encuentra la imagen que desea intercambiar y haga clic en Aceptar.
9. Haga clic en la ficha Vista previa para ver y probar el rollover, también puede pulsar F12
para verlo en un navegador.

Creación de un rollover desunido

Un rollover desunido intercambia una imagen bajo un objeto web cuando el puntero se sitúa sobre
otro objeto web. En respuesta a la acción de colocar el cursor o puntero sobre el área o a la acción
de hacer clic en la imagen de activación, 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.

Nota: No es necesario que el área de activación de un rollover desunido sea una división. Las
zonas interactivas y los botones también tienen tiradores de comportamiento que pueden
utilizarse para crear rollovers desunidos.

Para incluir un rollover desunido en una imagen seleccionada:

1. Elija Editar > Insertar > División para incluir una división en la imagen de activación.

Nota: Este paso no es necesario si el objeto seleccionado es un botón o si ya existe una

división o una zona interactiva en la imagen.
2. Cree un nuevo fotograma haciendo clic en el botón Fotograma nuevo/duplicado del panel
Fotogramas.
3. Coloque una segunda imagen, que se utilizará como elemento destino, en el nuevo
fotograma y en la posición que desee en el lienzo. Puede colocar la imagen en cualquier
punto salvo debajo de la división que creó en el paso 1.
4. Seleccione la imagen y elija Editar > Insertar > División para incluir una división en la
imagen.
5. Seleccione el fotograma 1 en el panel Fotogramas para volver al fotograma que contiene la
imagen original.
 6. Seleccione la división, zona interactiva o botón que cubre el área de activación (la imagen
original) y coloque el puntero sobre el tirador de comportamiento. El puntero cambia a una
mano.
7. Arrastre el tirador de comportamiento de la división de activación con la división destino
que creó en el paso 4.

La línea de comportamiento se extiende desde el centro del objeto activador hasta la

esquina superior izquierda de la división destino y se abre el cuadro de diálogo
Intercambiar imagen.

8. En el menú emergente Intercambiar imagen de, seleccione el fotograma que creó en el

paso 2 y haga clic en Aceptar.
9. Haga clic en la ficha Vista previa para ver y probar el rollover desunido.

Aplicación de varios rollovers a una división

Es posible arrastrar más de un tirador de comportamiento desde una división para crear varias
interacciones de rollover. Por ejemplo, es posible activar un rollover normal y otro desunido a
partir de la misma división.

Una división que activa un comportamiento de rollover y un comportamiento de rollover desunido

Nota: También puede añadir varios comportamientos mediante el panel Comportamientos.

Para aplicar más de un rollover a una división seleccionada:

 1. Arrastre un tirador de comportamiento desde la división seleccionada hasta el borde de la
misma división o sobre otra división.

Al arrastrar el tirador hasta el borde superior izquierdo de la misma división se crea un

rollover simple, si lo arrastra hasta otra división se crea un rollover desunido.
2. Seleccione el fotograma de la imagen de intercambio y haga clic en Aceptar.
3. Cree más rollovers repitiendo los pasos 1 y 2 tantas veces como lo desee.

Eliminación de un rollover de arrastrar y colocar

Puede eliminar fácilmente un rollover de arrastrar y colocar de una división, zona interactiva o
botón.

• Haga clic en la línea azul de comportamiento que desee eliminar.

• Haga clic en Aceptar para eliminar la interacción de rollover.

Uso del panel Comportamientos para añadir interactividad en las divisiones

Además de los rollovers, es posible incluir otros tipos de interactividad en las divisiones utilizando
el panel Comportamientos. Puede crear sus propias interacciones personalizadas si edita los
comportamientos existentes.

En Fireworks están disponibles los siguientes comportamientos:

Rollover simple añade un efecto de rollover a la división u objeto web seleccionado utilizando el
Fotograma 1 como estado Arriba y el Fotograma 2 como estado Sobre. En realidad, la opción
Rollover simple es un grupo de comportamientos que contiene los comportamientos Intercambiar
imagen y Restaurar imagen de intercambio.

Intercambiar imagen reemplaza el contenido de la división especificada por el de otro

fotograma de la misma división o el de un archivo externo.

Restaurar imagen intercambiada torna el rollover a su aspecto predeterminado del fotograma 1.

Establecer el texto de la barra de estado permite definir texto que aparecerá en la barra de
estado de la parte inferior de las ventanas de la mayoría de los navegadores.

Asociación de comportamientos

Gracias al panel Comportamientos puede asociar un comportamiento a una división. También es

posible asociar más de un comportamiento.

Para asociar un comportamiento a una división seleccionada mediante el panel

Comportamientos:

1. Haga clic en el botón Añadir comportamiento del panel Comportamientos.

2. Seleccione un comportamiento en el menú emergente Añadir comportamiento.

Edición de comportamientos

El panel Comportamientos también ofrece la posibilidad de editar comportamientos existentes.

Puede especificar el tipo de evento (como la acción de hacer clic) que activa los efectos.
Nota: No es posible cambiar el evento de Rollover simple ni de Establecer imagen de barra de
navegación.

Para cambiar el evento de ratón que activa el comportamiento:

1. Seleccione la división de activación que contiene el comportamiento que desee modificar.

2. Seleccione el comportamiento que desee editar en el panel Comportamientos.
3. Haga clic en la flecha que se encuentra junto al evento y elija un nuevo evento en el menú
desplegable:

onMouseOver activa el comportamiento cuando el puntero se encuentra sobre el área de

activación.

onMouseOut activa el comportamiento cuando el puntero abandona el área de activación.

onClick activa el comportamiento cuando se hace clic en el objeto de activación.

onLoad activa el comportamiento cuando se carga la página web.

Puede utilizar una imagen externa al documento actual de Fireworks como imagen original para
un estado de rollover. Es posible utilizar archivos GIF, GIF animados, JPEG y PNG. Si elige un
archivo externo como origen del rollover, dicho archivo se intercambia con la división destino
cuando se activa el rollover en un navegador web.

El archivo debe tener la misma altura y anchura que la división en que se va a colocar. En caso
contrario, el navegador acomoda el archivo para encajarlo dentro del objeto de división. Este
cambio de tamaño puede reducir la calidad, especialmente si se trata de un GIF animado

Para seleccionar un archivo de imagen externo como origen de un estado de rollover:

1. Elija Archivo de imagen y haga clic en el icono de carpeta en los cuadros de diálogo
Intercambiar imagen, Bar Nav Sobre o Bar Nav Abajo.

Nota: Si no aparece esta opción en el cuadro de diálogo Intercambiar imagen, elija Más
opciones y realice el paso 1.

2. Localice el archivo que desee utilizar y haga clic en Abrir.

3. Si fuera necesario, no seleccione la casilla Precargar imágenes (si el archivo externo es un
archivo GIF animado).
 El caché previo puede interrumpir la visualización de los archivos GIF animados como
estados de rollover. No seleccione la casilla Precargar imágenes cuando defina el rollover
para evitar este problema.

Preparación de las divisiones para la exportación

Mediante el Inspector de propiedades es posible crear divisiones interactivas a las que puede
asignar valores URL y marcos de destino. Asimismo puede especificar texto alternativo que
aparecerá en un navegador conforme se carga una imagen. También puede elegir un formato de
exportación de archivo para optimizar una división seleccionada.

Utilice el Inspector de propiedades o el panel Capas para asignar diferentes nombres a las
divisiones. Fireworks utiliza el nombre que especifique para asignar nombres a los archivos que se
generarán a partir de la división durante la exportación. Si no introduce un nombre de división en
el Inspector de propiedades, Fireworks asignará de forma automática nombres para las divisiones
durante la exportación.

Durante la exportación de un documento con divisiones de Fireworks se crea un archivo HTML y

varios archivos de imagen.

Para asignar un vínculo URL a una división seleccionada:

Introduzca un valor URL en el cuadro de texto Vínculo del Inspector de propiedades.

Introducción de texto alternativo

El texto alternativo o Alt aparece en el marcador de posición de la imagen mientras ésta se

descarga de la web. También aparece en lugar de una imagen que no se descargue
correctamente.

Para especificar texto alt en una división seleccionada:

En el inspector Propiedades, escriba el texto en el cuadro de texto Alt.

Para especificar un destino de una división seleccionada en el Inspector de propiedades:

Introduzca un nombre de marco HTML en el cuadro de texto Destino o elija un destino reservado
en el menú emergente Destino.

Asignación de nombres para las divisiones

La división corta una imagen en varios trozos. Cada porción de cada fotograma se exporta como
un archivo independiente que debe tener un nombre.
Fireworks asigna un nombre a cada archivo de división durante la exportación. Puede aceptar los
criterios de denominación predeterminados, cambiar estos criterios, o especificar un nombre
específico para cada división.

Para introducir un nombre personalizado de división, siga uno de estos procedimientos:

• Seleccione la división en el lienzo, introduzca un nombre en el cuadro Nombre de objeto

del Inspector de propiedades y pulse Intro.
• Haga doble clic en el nombre de la división de la capa de web, escriba un nuevo nombre y
pulse Intro.

Para asignar de forma automática un nombre a un archivo de división:

Cuando exporte la imagen con divisiones, especifique un nombre en el cuadro de texto Nombre de
archivo (Windows) del cuadro de diálogo Exportar.