CAPTULO 9: BOTONES

Captulo

Botones
9.1 Qu es un botn?

os botones son clips de pelculas interactivos de 4 fotogramas. Cuando se selecciona el comportamiento botn para un smbolo, Flash crea un smbolo con una lnea de Tiempo de 4 fotogramas. Cada fotograma tiene una funcin especfica: Reposo: aspecto del botn cuando el puntero no est sobre l. Sobre: aspecto del botn cuando el puntero se encuentra sobre l. Presionado: cuando se hace clic sobre el mismo Zona activa: define el rea que responder al clic del ratn. Es un rea invisible.

Generalmente las imgenes de cada fotograma son pequeas variaciones de una misma imagen. La lnea de tiempo no se reproduce realmente. El botn es sensible a las acciones del puntero del ratn saltando al fotograma correspondiente.

Figura 9.1 Estados Reposo, Sobre, Presionado y Zona activa de un botn

9.2 Usar un botn de una Biblioteca comn

1. 2. 3. 4. 5.

6.

Selecciona Ventana > Biblioteca Comn > Curso En la ventana Biblioteca-Curso realiza doble clic sobre la carpeta Botones para abrirla. Pincha y arrastra al escenario el botn ejemplo botn. Control > Probar pelcula para estudiar su comportamiento. Cierra la ventana de reproduccin para regresar al diseo. Para editarlo y ver su estructura haz clic derecho sobre su instancia y selecciona Editar en contexto . Flash cambia al modo edicin de smbolos. La cabecera de la Lnea de Tiempo cambia para mostrar los cuatro fotogramas consecutivos. Al hacer clic sobre el encabezado de cada fotograma se visualiza en el escenario el aspecto del botn en cada estado.

Diseo Flash de recursos web y multimedia para la enseanza

91

CAPTULO 9: BOTONES

7.

Para abandonar el modo edicin de smbolo hacer clic sobre el nombre de la escena (Escena 1) en la parte inferior de la Lnea de Tiempo.

Figura 9.2 Edicin de ejemplo botn

9.3 Crear un botn

1. 2.

Selecciona Insertar > Nuevo smbolo. En el cuadro de dilogo Crear un nuevo smbolo, escribe un nombre para el smbolo , por ejemplo, botn y como comportamiento elige Botn. Clic en Aceptar.

Figura 9.3 Introduce nombre y comportamiento para crear un botn

3.

4.

5. 6.

Flash cambia al modo de edicin de smbolos. La cabecera de la Lnea de tiempo cambia para mostrar cuatro fotogramas consecutivos denominados: Reposo, Sobre, Presionado y Zona Activa. El primer fotograma, Reposo, es un fotograma clave vaco. Para crear la imagen del botn del estado Reposo, activa la herramienta de dibujo Rectngulo (R). Selecciona el color azul como relleno y como trazo. Activa el modificador Radio del rectngulo redondeado e introduce 30 como valor del radio. Clic en el botn Aceptar. Pincha y arrastra para dibujar el rectngulo de esquinas redondeadas que formar el botn en su estado de Reposo. Selecciona la herramienta Flecha. Doble clic sobre el rectngulo para seleccionarlo. Abre el panel Ventana > Info. Para situar el objeto en el centro, clic en el selector centro de la parrilla que se muestra en el panel Info e introduce los valores 0 en las casillas X e Y. Para darle un tamao adecuado, introducir los valores 160 y 40 en anchura (An) y altura (Al)

Diseo Flash de recursos web y multimedia para la enseanza

92

CAPTULO 9: BOTONES

respectivamente. No olvides pulsar <enter> para concluir. Clic en cualquier parte del escenario para deseleccionar.

Figura 9.4 Introduce X e Y para situar con precisin el objeto

7.

8.

Selecciona la herramienta Texto (T). Sobre el Inspector de Propiedades define previamente como tipo de fuente: Arial, tamao: 24 puntos y color del texto: blanco. Activa el botn B de las negritas. Clic en el escenario encima del botn y escribe "Reposo". Selecciona la herramienta Flecha. Clic sobre el cuadro de texto. En el Inspector de propiedades introducir los valores 0 en las casillas X e Y para centrar este texto en relacin con el rectngulo. Pulsa la tecla <enter> para concluir.

Figura 9.5 Diseo del estado Reposo del botn

9.

10.

11.

12.

Clic en el segundo fotograma, Sobre, y elige Insertar > Fotograma clave. Flash inserta un fotograma clave que duplica el contenido del fotograma Reposo. Modifica la imagen del botn para el estado Sobre. Doble clic sobre el cuadro de texto para escribir Sobre. Activa de nuevo la herramienta Flecha. En el Inspector de Propiedades introduce 0 para los valores de X e Y. Pulsa <enter> para que Flash asuma el valor tecleado en la casilla. De esta forma el cuadro de texto se centrar sobre el fondo. En el estado Sobre tambin se puede cambiar el color del contorno del botn. Selecciona la herramienta Flecha y pincha en cualquier parte del escenario para deseleccionar el cuadro de texto. Selecciona la herramienta Bote de Tinta y el color negro como color de trazo. En el Inspector de propiedades selecciona un ancho de 3

Diseo Flash de recursos web y multimedia para la enseanza

93

CAPTULO 9: BOTONES

pixeles para el trazo. Clic sobre el contorno del botn situado en el escenario en el fotograma Sobre.

Figura 9.6 Diseo del estado Sobre del botn

13.

14.

15.

Clic en el tercer fotograma, Presionado, y elige Insertar > Fotograma clave. Flash inserta un fotograma clave que duplica el contenido del fotograma Sobre. En este nuevo fotograma el botn aparecer seleccionado. Clic fuera para deseleccionar y pulsa sobre el relleno solamente. A continuacin cambia el color de relleno en el Cuadro de Relleno del cuadro de herramientas seleccionando un color azul claro. Activa la herramienta Flecha y haz doble clic sobre el texto para teclear Press. Vuelve a escoger la herramienta Flecha y sobre el Inspector de Propiedades se puede definir el color negro como color del texto. Centra el cuadro de texto introduciendo 0 como valores X e Y.

Figura 9.7 Diseo del estado Press del botn

16.

17.

18.

Clic en el cuarto fotograma, Zona Activa, y elegir Insertar > Fotograma clave. Flash inserta un fotograma clave que duplica el contenido del fotograma Presionado. Con la herramienta Flecha activada, haz clic en cualquier parte del escenario para deseleccionar. A continuacin haz clic slo sobre el cuadro de texto en el fotograma Zona activa. Pulsa la tecla <Supr> para eliminarlo. Clic sobre el relleno y cambia el color a negro en la Caja de Herramientas o el Inspector de Propiedades. De esta forma la Zona activa es un rectngulo de esquinas redondeadas del mismo tamao que el resto de estados del botn. El fotograma Zona Activa no est visible en el Escenario, pero define el rea del botn que responde al ratn. Asegrate de que la imagen del fotograma Zona Activa es una rea slida lo bastante grande para abarcar todos los elementos grficos de los fotogramas Reposo, Sobre y Presionado. Tambin puede ser ms grande que el botn visible. Si

Diseo Flash de recursos web y multimedia para la enseanza

94

CAPTULO 9: BOTONES

no se especifica un fotograma Zona Activa, se utilizar la imagen para el estado Reposo como fotograma Zona Activa.

Figura 9.8 Aspecto de todos los estados del botn

19.

20. 21. 22.

Para asignar un sonido a un estado del botn, selecciona el fotograma de dicho estado en la Lnea de tiempo. Por ejemplo el estado Presionado. A continuacin abre la Biblioteca comn Curso mediante Ventana > Bibliotecas Comunes > Curso. Pincha y arrastra un sonido, por ejemplo, Clic plstico desde la carpeta Sonidos hasta el escenario. Clic sobre el fotograma Presionado. Advierte que en el Inspector de Propiedades de este fotograma aparece este sonido en la lista desplegable Sonido. Para eliminarlo bastara con seleccionar Ninguno en esta lista. Tras crear el botn, elige Edicin > Editar documento. Arrastra desde la Biblioteca del documento actual hasta el escenario el smbolo del botn para crear una instancia del smbolo en la pelcula. Para probar el botn, Control > Probar pelcula. Para abandonar el test cierra la ventana de reproduccin.

9.4 Asociar una accin a un botn

Para que el usuario realice una tarea al hacer clic sobre la instancia de un botn, es necesario asignarle una accin. Las dems instancias del smbolo no se vern afectadas:
1. 2. 3. 4.

5.

Abre un documento Flash nuevo mediante Archivo > Nuevo. Selecciona Ventana > Bibliotecas comunes > Curso y mediante doble clic abre la carpeta Botones > Crystal Pincha y arrastra al escenario una instancia del smbolo botn verde. Observa que el botn se encuentra seleccionado. A continuacin vamos a asignarle una accin. En este caso podra ser que al hacer clic sobre l (evento clic) se visualice el navegador por defecto del sistema para mostrar una determinada direccin URL (accin) Elige Ventana > Acciones para visualizar el panel Acciones-Botn si no est abierto todava. Tambin este panel es accesible desde el botn Editar el script ... que aparece a la derecha del Inspector de propiedades una vez que has seleccionado previamente el objeto.

Figura 9.9 Botn para editar el script del objeto seleccionado

Diseo Flash de recursos web y multimedia para la enseanza

95

CAPTULO 9: BOTONES

6.

7.

En el marco izquierdo del panel Acciones-Botn, haz clic sobre el icono con forma de libro correspondiente a la categora Acciones para abrirla. Repite la operacin sobre la subcategora Navegador/Red para abrirla. Doble clic sobre la opcin getURL. (Indicar al navegador web que navegue a la URL especificada).

Figura 9.10 Asignacin de la accin getURL a un botn

8.

En la parte derecha de este panel destacan dos casillas para configurar el enlace: URL: introduce la direccin URL que se desea visitar al hacer clic sobre el botn. En este caso http://www.educastur.princast.es Ventana: permite especificar para el navegador web si esa direccion se mostrarn en el mismo marco(_self), en una nueva ventana (_blank), en toda la pgina (_top) o bien en el marco primario (_parent).

Observa que a medida que defines los parmetros de estas casillas, en el marco inferior derecha va apareciendo el cdigo del script que se genera (Modo normal)
9.

Al seleccionar la accin getURL se selecciona por defecto el evento de ratn Release (liberar). No obstante haciendo clic sobre la linea de cdigo script: On (release), aparecer, en la parte superior derecha del panel, la seccin Evento donde se puede elegir un evento de teclado o de ratn que desencadene la accin: Presionar: desencadena la accin al presionar el botn del ratn mientras el puntero se encuentra sobre el botn.

Diseo Flash de recursos web y multimedia para la enseanza

96

CAPTULO 9: BOTONES

Liberar: es el evento predeterminado. Desencadena la accin al liberar o soltar el botn del ratn mientras el puntero se encuentra sobre el botn. Esto configura el comportamiento estndar de hacer clic. Liberar fuera: desencadena la accin al liberar el botn del ratn cuando el puntero ya no se encuentra sobre el botn. Presin de tecla: desencadena la accin al presionar la tecla especificada. Si se selecciona esta opcin, debe situarse el cursor en la casilla Presin de tecla y a continuacin pulsar la correspondiente tecla. No acepta las teclas de funcin. Situar sobre objeto: desencadena la accin al colocar el puntero sobre el botn. Situar fuera de objeto: desencadena la accin al colocar el puntero fuera del botn. Arrastrar sobre: desencadena la accin al presionar el botn del ratn mientras el puntero se encuentra sobre el botn, se desplaza fuera del botn y, a continuacin, vuelve a desplazarse sobre el botn. Arrastrar fuera: desencadena la accin cuando el botn del ratn se presiona con el puntero sobre el botn y, a continuacin, el puntero se desplaza fuera del botn.

Figura 9.11 Configuracin del evento que activar el script

Flash admite la seleccin mltiple de eventos, de tal forma que la accin especificada se desencadenar cuando el usuario realice alguno de los eventos contemplados. Adems para un objeto tambin es posible definir varias acciones que se ejecutan una detrs de otra cuando el usuario realiza el evento previsto.
10.

Puedes experimentar con las distintas opciones explicadas en los pasos 8 y 9 y comprueba el resultado usando Control > Probar pelcula.

Diseo Flash de recursos web y multimedia para la enseanza

97