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.