M�todos Avanzados / A�adiendo un Bot�n de Control

A�adiendo un Bot�n de Control
(Adding a Control Button)

Vamos a hacer una cosa mas para ilustrar la clase de cosas que puedes hacer: con un bot�n para controlar la animaci�n que acabaste de crear. Deseamos que este sea un bot�n bueno que provee retroalimentaci�n positiva al usuario, as� que vamos a hacer el cambio del color del bot�n cuando el rat�n es puesto sobre el, y cambiarlo a otro color cuando el rat�n es oprimido sobre el .

En Flash, practicamente, puedes convertir cualquier cosa en un bot�n. Usaremos un simple circulo para nuestro ejemplo, pero la misma t�cnica puede ser aplicada a cualquier imagen o texto. Primero, creas una capa nueva en el timeline para sujetar nuestro bot�n y seleccionar "Insert" > "Layer" del men� (u oprimir sobre el encasillado blanco con un s�mbolo de "+" sobre el en la parte inferior izquierda del timeline). Si deseas, puedes darle un nombre a tu capa, o simplemente dejarlo con el nombre por omisi�n asignado por el programa (como "Layer 2"). Una vez seleccionado esa capa, ve a la pantalla y usa la herramienta del circulo y dibuja un circulo lleno de un color a tu gusto y otro color para la orilla. Usa la herramienta para crear texto de la herramienta de paleta para poner la palabra "Go" centrada en el circulo.

Ahora, vamos aconvertir nuestro circulo en un bot�n. De hecho, esto es bastante f�cil. B�sicamente, tenemos que hacer dos cosas. Primero, tenemos que definir que los estados del bot�n "states" parezcan. Segundo, tenemos que asignar un bot�n de "acci�n". El primero lo hace parecer un bot�n y el segundo lo hace actuar como un bot�n. Comencemos definiendo los estados del bot�n.

Definiendo los Estados de los Botones
(Defining the Button States)

Selecciona un circulo (aseg�rate de incluir la orila externa y la etiqueta del texto) que va a convertirse en nuestro bot�n con la herramienta de la flecha y escoje "Insert" > "Convert to Symbol" del men� principal. En el encasillado de dialogo resultante, marca "Button" (aseg�rate de seleccionar "Button" y no una delas otras opciones) y dale un nombre al s�mbolo como "mi bot�n", pero la opci�n es tuya. Oprime doblemente sobre el circulo y en el di�logo resultante selecciona la divisi�n "Definition". Oprime el s�mbolo del l�piz en el parte inferior del encasillado de di�logo para editar el bot�n que tu acabas de crear. Una nueva etapa y timeline, espec�fica al s�mbolo del bot�n que acabas de crear debe de aparecer. Por el hecho de que esto es el s�mbolo de un bot�n, el timeline es bien especial. Estas 4 c�lulas marcadas "Up", "Over", "Down", y "Hit" (ver la imagen inferior). Estas 4 c�lulas nos permiten definir el estado de nuestro bot�n. En esencia, un bot�n en Flash es una pel�cula de 4-marcos.

Arrastra el rat�n sobre las 4 c�lulas para seleccionarlos y despu�s oprimir doblemente uno de ellos y escoje "Insert Key Frame" del encasillado de di�logo resultante. Debe aparecer un punto en cada una de las 4 c�lulas, indicando que ahora son todos marcos claves (ver imagen adyacente). El resto es muy simple: las primeras tres c�lulas representan lo que el bot�n parecer� cuando no haya un rat�n sobre el bot�n ("Up"), cuando el bot�n est� sobre el bot�n ("Over"), y cuando oprimes el bot�n ("Down"). El 4to encasillado ("Hit") se usar� para definir el "active area" para el bot�n.

Deja la c�lula "Up" tal como est�, ve sobre la c�lula "Over" y cambia la apariencia del circulo en cualquier cosa que desees como (ej., usando la herramienta del balde de pintura para cambiar su color),ve a la c�lula "Down" y cambia la apariencia nuevamente (por ejemplo, cambi�ndole a otro color). Finalmente, deja la 4ta c�lula como est�, lo que significa que el �rea activa del bot�n ser� definido por el circulo del bot�n. Cuando hayas terminado, regresa al men� principal y selecciona "Edit" > "Edit Movie" para regresar a la pantalla principal de la pel�cula.

Probando el Bot�n
(Testing the Button
)

Ahora, prueba los estados de tu bot�n. Ve al men� principal y aseg�rate de que "Control" > "Enable Buttons" est� marcado (de otra manera, no trabajar�, as� que t�nlo por seguro!). Ahora, mueve el rat�n sobre tu bot�n y oprime hacia abajo. Debes poder observar los tres estados del bot�n que acabas de definir cuando haces �sto.

Asignando un Bot�n de Acci�n
(Assigning a Button Action)

Muy bi�n, ya tenemos un bot�n muy bonito que cambia de colores cuando ponemos el rat�n sobre el y lo oprimimos, pero eso no es muy �til. Como hago para que controle la animaci�n que hicimos no hace un rato? La contestaci�n es que ahoratenemos que a�adirle"action" al bot�n --- algo que �ste programa har� en respuesta a oprimir el bot�n. Para hacerlo se requiere seria programaci�n de computadoras, pero no ser� tan dif�cil por que el programa va a hacer la mayor�a del trabajo por nosotros.

Ve al men� principal y elimina la marca al lado de "Control" > "Enable Buttons" (podemos editar el bot�n mientras se habilita). Entonces, oprime doblemente sobre el bot�n, escoje la etiqueta de "Actions" del encasillado de di�logo, mant�n oprimido el rat�n sobre el s�mbolo de "+" en la parte superior izquierda del encasillado, y en el men� desplegable que aparece selecciona "On MouseEvent". En la parte derecha del panel, para el Event marca el encasillado que dice "Release". Despu�s, regresa al lado izquierdo del encasillado de di�logo, oprime el rat�n sobre el s�mbolo de "+" y selecciona "Play" del men� desplegable resultante. En el �rea de muestra del encasillado de di�logo, la siguiente sequencia debe aparecer:

On (Release)
Play
End On

Acabas de escribir un peque�o programa de computadora: �sta sequencia le dice a la computadora que si el rat�n es oprimido sobre el bot�n, cuando lo dejes de oprimir debe tocar la pel�cula que creaste.

Ahora prueba el bot�n. Selecciona los botones "Control" > "Enable Buttons", selecciona el primer marco del timeline, y oprime el bot�n que acabas de crear y programar. La animaci�n debe comenzar cuando oprimes el bot�n.