Los botones son realmente clips de película interactivos de cuatro fotogramas. Cuando se selecciona el comportamiento del botón para un símbolo, es decir, se entra en la pantalla de edición de botones Flash crea una Línea de tiempo con cuatro fotogramas. Los tres primeros fotogramas muestran los tres posibles estados del botón; el cuarto fotograma define el área activa del botón. La Línea de tiempo no se reproduce realmente; simplemente reacciona a los movimientos y acciones del puntero saltando al fotograma correspondiente.
 |
Fotograma Reposo
Aspecto gráfico del botón cuando no está pulsado, ni tiene el cursor del ratón encima.
Fotograma Sobre
Aspecto gráfico del botón cuando el cursor del ratón se encuentra sobre él.
Fotograma Presionado
Aspecto gráfico del botón cuando se hace “clic” sobre él con el ratón.
Zona Activa
Lugar donde definimos la zona activa del botón, es decir, aquella que será sensible a los clics del ratón o al paso de este por encima.
El alumno aprenderá a crear botones mediante el programa Flash.
El alumno aprenderá a diferenciar los diferentes tipos de botones que pueden generarse en el programa Flash.
El alumno aprenderá a crear botones estáticos, dinámicos y animados.
El alumno aprenderá a utilizar la zona activa de un botón.
El alumno aprenderá a aplicar acciones a los botones.
El alumno aprenderá a crear botones invisibles.
El alumno aprenderá a aplicar los botones sobre una escena.
Para la creación de un botón seleccionamos [Insertar > Nuevo símbolo] o bien, Ctrl. + F8 y nos aparecerá el cuadro dialogo Propiedades de Símbolo donde elegiremos el comportamiento de Botón y le asignaremos un nombre.
Inmediatamente después, Flash cambia al modo de edición de símbolos. La cabecera de la Línea de tiempo cambia para mostrar los cuatro fotogramas consecutivos que determinarán el botón (Fig.12.1). El primer fotograma, Reposo, al que se apunta por defecto, es un fotograma clave vacío. Y en cada uno de ellos deberemos dibujar el aspecto del botón que deseemos, bien dibujando desde Flash o importando imágenes vectoriales o bitmaps.
Es recomendable situar siempre la imagen centrada en la cruz que aparece en la zona de trabajo de modo que nos sirva de referencia para situar los dibujos correspondientes a los otros estados del botón.
También se recomienda convertir los elementos dibujados en Flash y que le darán un aspecto a nuestro botón, en símbolos, de este modo cuando deseemos centrarlo mostrará una crucecita que será fácilmente alineable con la que aparece en la ventana de edición de símbolos.
Creado el aspecto del botón en el primer fotograma, pasaremos a crear el aspecto del segundo (Sobre) y del tercero (Presionado) para ello deberemos seleccionarlos uno a uno y convertirlos en Fotograma Clave (pulsar F6) para luego dibujar o importar el aspecto que presentarán cada uno de ellos.
 |
El hecho de convertir estos fotogramas en Fotogramas Clave nos permite modificar fácilmente el aspecto del botón sin perder la referencia del centro y del tamaño, puesto que el nuevo fotograma clave empieza, por defecto, con una replica del anterior fotograma clave.
Definido el aspecto de los tres primeros fotogramas del botón nos centraremos en el fotograma correspondiente a la zona activa, donde marcaremos el área de respuesta del botón a los eventos del ratón.
Todos los botones que creemos pasarán automáticamente a formar parte de la biblioteca, con lo cual podremos incluir en el escenario tantas instancias de los mismos como deseemos y actuar sobre ellas como ya vimos en capítulos anteriores. De igual modo se podrán seleccionar estas instancias de forma individual y asignarles a las mismas las acciones que deseemos.
Durante la edición los botones no muestran sus diferentes estados, así pues para poder ver su efecto, deberemos probar la película con Ctrl. + Intro, o bien F12.
 |
 |
Es el más sencillo de crear puesto que no se mueve, aún así, mostraremos en un sencillo ejemplo un botón que cambia de color como reacción a los eventos del ratón. 1.- Insertamos un Nuevo símbolo y le damos el comportamiento de botón. 2.- Dibujamos un rectángulo con esquinas redondeadas y lo convertimos en símbolo, asignándole un comportamiento de Gráfico. 3.- Superpongamos su centro con la cruz que aparece en la ventana de edición. 4.- Dibujemos cada uno de los fotogramas del botón idénticos pero de diferente color. Al ser instancias, cambiaremos su color mediante el panel efecto. 5.- Ahora deberemos arrastrar el botón creado desde la biblioteca al escenario y posteriormente probar la película para comprobar su efecto. |
Para la creación de un botón dinámico seguiremos los mismos pasos que para uno estático, con la diferencia de que cambiaremos tamaño, forma, posición u otras características.
1.- Partiendo del botón estático anterior, haremos “doble clic” sobre el icono de su nombre en la biblioteca de símbolos para entrar de esta forma en su modo de edición.
2.- Escalaremos, por ejemplo, el gráfico correspondiente al fotograma Sobre. Y cambiaremos la forma y el color del fotograma Presionado.
3.- Probaremos los resultados.
Aunque lo visto hasta el momento resulte muy sencillo, esta es la forma de trabajar con los botones. Su diseño ya es una cuestión de mera imaginación.
|
Estos botones, poseen animación en uno o más de sus estados, para ello en el fotograma correspondiente al estado del botón que deseemos animar deberemos incluir un clip de película en lugar de un gráfico. A continuación mostraremos en un ejemplo como crear un sencillo botón de estas características.
1.- En primer lugar crearemos tres símbolos gráficos que usaremos como base para cada uno de los estados, esto nos proporcionará una cierta libertad en la edición de los mismos. 2.- Lo centraremos en la pantalla (posición 0,0) para lo que activaremos el punto de referencia central en el panel Info. 3.- Crearemos el triángulo que gira a partir de un cuadrado sin contorno y usando la herramienta Subseleccionar. 4.- Situaremos el triángulo sobre el círculo apuntando a las 12.00h y agruparemos el conjunto como un todo. 5.- Deberemos crear los otros dos símbolos gráficos para los otros estados del botón. 6.- El fotograma Reposo no contiene animación y el fotograma Sobre introducirá un cambio de color y la flecha girada 90º, por lo que lo definiremos como Clip de película en el momento de su creación. 7.- Arrastramos el elemento correspondiente al fotograma Clip Sobre, sobre a la ventana del botón haciendo coincidir los símbolos correspondientes a ambos fotogramas. 8.- Editamos el objeto Clip Sobre desde la biblioteca (doble clic) y creamos una interpolación de movimiento hasta el fotograma 10 donde rotará 90º. De igual modo le asignaremos la acción Stop para que se detenga. 9.- Crearemos el elemento “Clip presionado” también con un comportamiento de clip de película desde la escena principal. Realizaremos una interpolación de movimiento con un giro horario de 1 vuelta. 10.- Añadiremos este nuevo elemento al fotograma Presionado del botón y ajustaremos las cruces de los tres símbolos. 11.- El botón creado se añadirá a la escena principal y se probará. Ctrl + Intro En este ejemplo, lo hemos realizado todo a la vez y con ello me refiero a la creación del botón y de los diferentes símbolos que lo componen. Como práctica habitual, se recomienda crear previamente los símbolos que conformarán el botón para posteriormente crear el mismo e ir añadiéndoselos a sus diferentes estados. 
Fig.12.4 Cada uno de los aspectos que mostrará el botón en sus diferentes estados. |
Hasta el momento con los botones creados anteriormente, no hemos empleado el fotograma Zona Activa para nada, pues al ser estos redondos o rectangulares, el área activa de los mismos era toda su superficie.
Supongamos que deseamos añadir un menú de opciones en forma de texto junto al botón de forma que las opciones cambien en función del estado del mismo. Pues bien, Flash considerará al texto como parte del botón con lo cual también será sensible a los eventos del ratón. La forma de evitar esto, es definir la Zona activa del botón mediante el cuarto fotograma.
- Convertimos este fotograma en Clave.
- Dibujamos la zona que deseemos que sea activa sin preocuparnos por lo dibujado, puesto que no se verá luego en la escena.
- En el ejemplo anterior, dibujando un círculo del mismo diámetro que el botón conseguiremos que la zona activa se reduzca exclusivamente al botón.
 |
Quizá llegados a este punto, nos planteemos: ¿ Cómo es posible añadir texto a los botones? ó ¿ Cómo podemos realizar un diseño más espectacular de los mismos? Pues bien, las respuestas las encontraremos cuando comprendamos realmente el concepto de botón, para ello no tenemos más que editar el botón haciendo “doble clic” sobre su icono correspondiente de la biblioteca, o bien sobre el propio objeto en el escenario.
Entonces, nos aparecerá una pantalla con los cuatro fotogramas que nos van a permitir definir un botón, tal y como se ha comentado en puntos anteriores. En esta ventana de edición tendremos la posibilidad de añadir tantas capas como deseemos, con texto u otros elementos que nos permitirán darle a nuestro botón un aspecto más elaborado (Fig.12.6).<
 |
Una de las cosas que debemos tener muy presente en nuestro diseño y que ya hemos comentado en este capítulo, es la correcta definición de la Zona activa del botón puesto que va ha ser ella la que nos determine el campo de actuación del mismo.
Es decir, el área en la cual el botón responderá a los eventos del ratón y por supuesto a las acciones que lleven asociadas estos evetos.
|
Se recomienda practicar con los conceptos explicados en este capítulo, diseñando diferentes tipos de botones, con diversas capas cada uno y prestando especial atención a la delimitación de la zona activa. Cuando compilemos la película (F12) podremos observar todos los detalles referentes a los botones creados y como responden estos en función de la zona activa establecida |
Por norma general cuando nosotros incluimos botones en nuestra película, es por que deseamos que estos realicen algún tipo de acción, bien, cuando se haga “clic” sobre los mismos, o bien, cuando el ratón pase por encima de ellos. Los botones por definición son elementos interactivos que van a permitir que el usuario participe en el desarrollo de la película.
La forma de conseguir esta interactividad, es añadiendo acciones a los botones, acciones que responderán a los diferentes eventos que generemos con el ratón o con el teclado.
Las acciones que pretendemos que lleven a cabo nuestros botones, se incluirán directamente en la instancia representativa del botón sobre el escenario. Al contrario de lo que podíamos pensar: “incluir las acciones en la ventana de edición del botón” El añadir las acciones en la propia instancia del botón tiene una explicación lógica. Nosotros podemos tener un único botón con diferentes instancias en el escenario, y cada una de estas instancias podrá personalizarse y realizar acciones diferentes.
Para incluir acciones en una instancia de un botón de la escena deberemos hacer “clic” con el botón derecho del ratón y elegir en el menú contextual la opción Acciones, o bien, seleccionar el botón y acceder a través de la barra Lanzador. Con cualquiera de estos dos caminos accedemos al Panel Acciones. En él, nos encontraremos con dos ventanas principales una donde dispondremos de las diferentes acciones a asignar y otra en donde se nos mostrará el correspondiente código ActionScript de las mismas.
No obstante, en el próximo Tema, dedicado a las acciones, entraremos con más detalle en el uso de las mismas. Por el momento, y a modo de introducción, nos basta con saber que cada vez que tratamos de asignar una acción a un botón tenemos por defecto la expresión On (release).
Esta expresión se corresponde al evento vinculado al ratón Liberar, es decir, la acción que asignemos se ejecutará cuando soltemos el botón del ratón. Si seleccionamos la misma en la ventana de código, veremos como en la parte inferior de las ventanas de acciones (dedicada a parámetros o argumentos) nos aparecen una serie de casillas con la opción por defecto (Liberar) seleccionada.
Estas casillas nos van a permitir seleccionar la operación que hay que realizar sobre el nuestro Botón para que se ejecute la acción que lleva asignada. En la Fig.12.7 podemos apreciarlo más claramente, pero como por el momento, tampoco vamos a entrar en más detalles, a continuación nos centraremos en describir brevemente los eventos asociados al ratón susceptibles de provocar acciones.
 |
Presionar (on press)
- Se ejecuta la acción en el momento descendente del “clic” sobre el ratón
Liberar (on release)
- Se ejecuta la acción en el momento ascendente del “clic” sobre el ratón, es decir, al soltar el dedo.
- Si antes de soltar el dedo, nos alejamos de la zona activa del ratón, no se producirá ningún efecto.
Liberar fuera (on releaseOutside)
- Se ejecuta la acción cuando hacemos “clic” dentro de la zona activa del botón y sin soltar liberamos el ratón fuera de la misma.
Situar sobre objeto (on rollOver)
- Se ejecuta la acción cuando el puntero del ratón se encuentra sobre la zona activa del botón.
Situar fuera de objeto (on rollOut)
- Se ejecuta la acción cuando el puntero del ratón se encuentra fuera de la zona activa del botón.
Arrastrar sobre (on dragOver)
- Se ejecuta la acción cuando hacemos “clic” y sin soltar salimos y volvemos a entrar en la zona activa del botón.
Arrastrar fuera (on dragOut)
- Se ejecuta la acción cuando hacemos “clic” y sin soltar salimos de la zona activa del botón.
Una vez vistos los diferentes eventos que podemos asignar a un botón mediante la acción ejercida por parte del ratón sobre el mismo, sólo nos queda por decir que es posible asignar varios de estos eventos a la vez. De esta forma, podremos lograr que el botón ejecute una u otra acción en función de lo que haga el usuario.
A continuación, vamos a realizar un sencillo ejemplo en donde nos introduciremos un poco en el manejo de algunas acciones, y en donde contemplaremos dos de los eventos mencionados anteriormente.
|
El ejercicio a realizar consistirá en crear una interpolación de movimiento controlada por un botón de forma que cuando pulsemos el botón la interpolación comience y cuando situemos el cursor del ratón sobre el mismo se detenga. Como siempre, le animo a invertir unos minutos en tratar de realizar el ejercicio y en caso de no conseguir los resultados esperados, siempre podrá seguir los pasos marcados a continuación: 1.- Cree una interpolación de movimiento en la escena y asigne a su primer fotograma la acción Stop. De este modo conseguimos que la interpolación no arranque de forma automática cuando compilemos la película (Ctrl. + Intro ó F12) 2.- Diseñe el botón en una nueva capa y asígnele la acción Play, seguidamente desactive la casilla Liberar y active Presionar. De esta forma el Botón responderá con la acción Play cuando lo pulsemos. 3.- Después deberá seleccionar la última línea de la lista de acciones (ventana de código) e incluir la acción Stop haciendo “doble clic” sobre la misma. Con esto, conseguimos añadir más código a nuestro botón para que responda ante diferentes situaciones. 4.- Seleccionemos la opción por defecto (on release) en el nuevo código añadido y activemos únicamente la casilla Situar sobre objeto (rollOver). 5.- Reproduzca la película y observe el resultado. |
Se utilizan para dotar de acción a elementos que no son propiamente botones, como puede ser una fotografía, un gráfico, el propio escenario, etc. de forma que al pulsarlos, o al producirse cualquier evento de ratón sobre los mismos reaccionen como un botón.
Con esta herramienta, conseguiremos dotar de total interactividad a nuestra película y conseguir efectos realmente interesantes. Para conseguir los efectos mencionados, ubicaremos un botón invisible en el lugar que nos interese convertir en interactivo.
Un botón invisible, no es otra cosa que un botón que no contiene gráficos o clips de película y en el que únicamente se ha definido el fotograma Zona activa. La forma que hayamos dibujado en este fotograma podrá utilizarse para ejecutar acciones aunque el botón no se vea. Realmente eso era lo que pretendíamos, el elemento que queremos convertir en interactivo deberá disponer de un botón invisible “bajo” él de forma que sea sensible a la zona activa del botón.
De igual modo se podría definir un botón invisible cuya zona de acción contuviera toda le escena, de este modo haciendo “clic” en cualquier lugar de la misma estaríamos en condiciones de ejecutar una acción
|
Trate de crear diversos botones invisibles, tal y como hemos explicado. Uno de ellos que contenga a todo el escenario y reaccione ante los “clics” y otro que este oculto bajo un elemento de texto y reaccione ante diferentes eventos del ratón. |