Botón y Rollover Desunido

En este ejercicio añadiremos un botón. Como sabe el botón tiene asociado un comportamiento onMouseOver. Añadiremos otro comportamiento de forma que con un evento onMouseOver se intercambie una imagen en una zona de la pantalla. Se trata por lo tanto de asociar al botón un Rollover desunido.

Descargue las siguientes imágenes en una subcarpeta de su carpeta de trabajo: circuitosf1.zip. Contine imágenes de los circuitos de fórmula 1 y una badera de los países en forma de botón.

  1. Cree un lienzo 800 x 550, resolución 72, color blanco.
  2. Haga clic en Edición > Insertar > Nuevo botón. Aparece la ventana del editor de botones.
  3. Importe un botón de la biblioteca de Fireworks. Haga clic en Importar botón y seleccione el último de la lista.
  4. Despliegue la ficha de los diferentes estados. Observe que es un botón con cuatro estados. Despliegue el Área activa. Como ve es un botón completo con sus cuatro estados y una división para su área activa.
  5. Observe en el panel fotogramas, que tiene cuatro fotogramas, uno por estado. Si selecciona el Fotograma 2, se abre el estado Sobre. Por lo tanto moverse por los fotogramas es equivalente a moverse por los estados. Hay un fotograma por cada estado.
  6. Haga clic en Ventana > Comportamientos para ver el panel comportamientos. Observe que aparece un evento onMouseOver y una Acción Establecer Imagen. El icono en forma de candado indica que el evento está bloqueado para impedir que se pueda borrar. Cierre la ventana Comportamientos.
  7. Si hace clic sobre el texto del botón, verá que tiene un texto asociado que podrá cambiar cuando cree diferentes instancias del botón. En el inspector de propiedades aparecen las propiedades de ese texto.
  8. Haga clic en Listo. Una instancia del botón se sitúa en el lienzo. Sitúela en la posición X 70, Y 0. En el Inspector de propiedades sustituya el texto button por el nombre del país: Australia. La casilla situada a la izquierda, al lado de la imagen en miniatura, permite poner nombre al botón. Llámele 01Australia y no olvide pulsar Intro o perderá el nombre. Esto de poner nombre es interesante porque se evitan confusiones.
  9. Haga clic en Vista previa para ver el botón. Pruebe sus estados.
  10. Queremos añadir un nuevo comportamiento al botón. El evento onMouseOver debe mostrar una imagen del circuito de Fórmula 1 correspondiente al Gran Premio de Australia. Se trata por lo tanto de incorporar un Rollover desunido. Cuando paso el ratón por el botón (onMouseOver), se intercambia una imagen en algún lugar de la pantalla. Así que aparte del funcionamiento normal del botón incorporamos un Rollover desunido.
  11. Despliegue el panel Fotogramas. Necesitamos un nuevo fotograma para incorporar la imagen que debe aparecer. Duplique el Fotograma 1 (menú opciones del panel ). Aparece un nuevo fotograma con el nombre Fotograma 2. Este nombre es poco afortunado porque podemos confundirlo con el fotograma 2 del botón que también tiene ese nombre. Haga doble clic sobre Fotograma 2 y cambie el nombe por 01Australia. Seleccione el Fotograma 01Australia.
  12. Conviene que la nueva imagen se sitúe en otra capa. haga clic en el botón Nueva capa. Aparece la Capa 2. Con la Capa 2 y el Fotgrama 01Australia seleccionados, importe la imagen del circuito de Australia.
  13. Ajuste el tamaño de la imagen a 92 x 80 píxeles y sitúela en la posición X 650, Y 30. Ponga nombre a la imagen utilizando el inspector de propiedades. Llámele 01Australia y no olvide pulsar Intro.
  14. Necesitamos una división sobre la imagen como destino de una línea de comportamiento. Con la imagen seleccionada haga clic en Edición > Insertar > División rectangular.
  15. Sólo queda añadir el comportamiento. Lo haremos mediante un arrastre. Seleccione el fotograma 1. Haga clic en el botón para que aparezca el tirador de comportamiento . Si coloca el cursor sobre el tirados aparece una mano . Si pincha la mano sin soltar, aparece con el puño cerrado . Sin soltar muéva el puño y verá una línea azul de comportamiento lo que indica que va establecer un Rollover. Suélte sobre la división que contiene la imagen con el circuito de Australia. Aparece la ventana Intercambiar imagen con el Fotograma 01Austrlaia (2) seleccionado. El (2) indica el número de orden del fotograma.
  16. Si hace clic en Más opciones se amplian las posibilidades. Asegúrese de tener marcada la casilla Restablecer la imagen onMouseOut, es decir, cuando se retire el ratón se restablece el Fotograma 1. Vea que también pudo importar una imagen en lugar de saltar a otro fotograma. Haga clic en Aceptar.
  17. Vea en el panel comportamientos que se ha añadido un comportamiento onMouseOver, Intercambiar imagen.
  18. Haga clic en un punto libre del lienzo. Pruebe en Vista previa y con el navegador pulsando F12.
  19. Guarde el trabajo con el nombre btnrollover.png

Varios botones y Rollover Desunido sobre un área fija

Trabajamos sobre el proyecto anterior. El proceso es muy sencillo. Añadimos más botones. Añadimos también un fotograma por botón. Importamos las imágenes de los diferentes circuitos sobre los correspondientes fotogramas y establecemos el Rollover para cada botón.

  1. Cargue el proyecto anterior. Guárdelo con el nombre btnsrollover.png
  2. Hay que situar 17 instancias del botón. Una por circuito. Todos los botones estarán en la posición X 70 y la posición Y debe ir aumentando de 25 en 25. Para ello, despiegue el panel Activos, pestaña Biblioteca. Seleccione el botón y arrástrelo sobre el documento. Déjelo junto al borde inferior del documento y algo a la derecha del primer botón y vaya dejando las instancias de abajo arriba. Repita el proceso colocando cada botón justo encima del otro y siempre algo a la derecha del primero hasta tener los 17 botones. Observe en la figura la disposición aproximada de los arrastres. Como caigan las instancias del botón no importa porque los alinearemos después. Lo único importante es que entren los 16 y que queden algo a la derecha del primero. Debe tener claro que lo que hemos situado en el documento son instancias de un botón.
  3. Con la herramienta selección, haga un barrido para seleccionar todos los botones de un golpe. Haga clic en Modificar > Alinear > Izquierda. Ahora todos están en la posición X 30.
  4. Seleccione el segundo botón y utilzando las teclas de desplazamiento póngalo en posición Y 25. Repita el proceso con todos los botones aumentando la posición Y de 25en 25. De esa forma el último botón ocupará la posición X 70, Y 400.
  5. El siguiente paso es poner nombre a las instancias del botón y cambiar el texto. Vaya seleccionando las instancias del botón y utilice el inspector de propiedades. En los nombres de las instancias, eluda la ñ y los acentos. El texto póngalo correctamente y sin número asociado. Ponga los siguientes nombres: 02Malasia, 03 Bahrain, 04Espana, 05Monaco, 06Canada, 07EEUU, 08Francia, 09Runido, 10Alemania, 11Hungria, 12Turquia, 13Italia, 14Belgica, 15 Japon, 16China, 17Brasil.
  6. Vaya a la Capa 1 del panel capas y compruebe que los botones están en orden. Probablemente deba trasladar el botón de 01Australia al primer lugar.
  7. Seleccione Fotograma 1 en el panel fde fotogramas. Utilice el botón de opciones y duplique el fotograma 16 veces, marcando la opción Al final.
  8. Cada fotograma alojará la imagen del circuito. En el panel Fotogramas, haga doble clic sobre el nombre de cada fotograma y vaya cambiándolo por los siguientes: 02Malasia, 03 Bahrain, 04Espana, 05Monaco, 06Canada, 07EEUU, 08Francia, 09Runido, 10Alemania, 11Hungria, 12Turquia, 13Italia, 14Belgica, 15 Japon, 16China, 17Brasil.
  9. El siguiente paso es mantener seleccionada la Capa 2 e ir recorriendo los fotogramas importando las imágenes de los diferentes circuitos. Seleccione la Capa 2 y el fotograma 02Malasia. Importe la imagen 02Malasia.jpg. Sitúela sobre la división situada arriba a la derecha. Las imágenes deben medir 92 x 80 exactamente y su posición debe ser siempre X 650, Y 30. Ponga nombre a la imagen 02Malasia. Pase al siguiente fotograma 03Bahrain. Compruebe que la Capa 2 continúa seleccionada. Importe la imagen 03Bahrain.jpg y ajústela en tamaño y posición. Ponga nombre a la imagen 03Bahrain. Continúe hasta completar la importación de todas las imágenes sobre su fotograma correspondiente.
  10. Seleccione Fotograma 1. Haga clic en el botón 02Malasia, pinche el tirador de comportamiento de la instancia del botón 02Malasia y suéltelo sobre la división asignada a los circuitos. Asígnele el fotograma 02Malasia (3). Haga lo mismo con el botón 03Bahrain y suéltelo asignando el fotograma 03Bahrain (4). Repita el proceso hasta completar todos los botones. Si no hubiera sido por los nombres que hemos puesto, este proceso hubiera resultado complicado y hubiera sido muy fácil confundirse. En la figura puede observar las líneas de comportamiento Rollover
  11. Guarde el trabajo con el nombre btnsrollover.png.
  12. Pulse F12 cpara probar con el navegador.

Varios botones y varios Rollover por botón, desunidos y sobre áreas diferentes

Trabajamos sobre el proyecto anterior. Queremos que además de la imagen del circuito aparezca debajo el nombre del circuito y junto al botón, una pequeña bandera del país.

  1. Utilice el proyecto del apartado anterior. Guárdelo con el nombre btnsrollovers.png.
  2. Despliegue el panel fotogramas. Haga clic en el botón Papel cebolla situado en la parte inferior del panel. Seleccione la opción Ver todos los fotogramas. Esto mostrará una imagen atenuada de los fotogramas distinto al seleccionado.
  3. Despliuegue el panel Capas. Seleccione la Capa 2. Vea que en la parte inferior del panel aparece un botón con el nombre del fotograma actual. Haga clic en ese botón y verá la lista de fotogramas. Seleccione el fotograma 01Australia.
  4. Utilice la lupa para aumentar y ver mejor la zona de botones. Importe la imagen 01Australia.gif  que representa una bandera en forma de botón. Sitúe la imagen a la izquierda del botón de Australia. El tamaño debe ser 25 x 25 y la posición: X 30, Y 0. Llame a la imagen 01bAustralia.
  5. Seleccione el fotograma 02Malasia. Compruebe que tiene Capa 2 seleccionada. Importe la imagen 02AMalasia.gif  que representa una bandera en forma de botón. Sitúe la imagen a la izquierda frente al botón de Malasia. El tamaño debe ser 25 x 25 y la posición X 30. Llame a la imagen 02bMalasia.
  6. Continúe completando el trabajo para todos los fotogramas.
  7. Tenemos que añadir una división que incluya todas las banderitas. Cuando termine haga clic en Ver > Ajustar todo. Mediante un barrido con el puntero negro seleccione todas las banderitas. Haga clic en Edición > Insertar > División rectangular. El sistema pregunta si desea una sola división para todos los objetos o Varias. marque la opción Una sola división. Haga clic en aceptar.
  8. 8. Seleccione Fotograma 1. Haga clic sobre la instancia del primer botón 01Australia. Arrastre el tirador de comportamiento sobre la división que cubre las banderitas y suelte. En la ventana de diálogo seleccione el forograma 01Australia (2).
  9. 9. Asegúrese de tener seleccionado Fotograma 1. Haga clic en la segunda instancia de botón 02Malasia. Arrastre el tirador de comportamiento dsobre la división de las banderitas y asigen el fotograma 02Malasia (3). Continúe asi hasta completar el comportamiento de todas las instancias de botón.
  10. Guarde el trabajo y pruebe el resultado en el navegador (F12).