Creación de botón + interactividad, ejercicio

La característica destacable de Flash es la interactividad, lo que se dice enlazar por medio de un nodo (botón) una escena con otra.

Los botones SON SÍMBOLOS, como los gráficos y los clip de película.

Tienen cuatro estados:

1 El primero es la imagen que vemos cuando el cursor está fuera del área del botón (REPOSO o UP).

2 El segundo es el que vemos cuando nos situamos por encima (SOBRE o OVER), por lo general, desearemos avisarle al usuario que se halla encima de algo que lo conectará con otra cosa, en ese momento aparece la "manito" que me indica que hay interactividad.

3 El tercer estado se da cuando picamos sobre él (PRESIONADO o DOWN ).

4 El cuarto estado (ZONA ACTIVA o HIT) define los límites del botón, es el área que reconoce los movimientos del mousse  y que hará funcionar mi botón.

Para esto, con un archivo nuevo, voy a:

1 INSERTAR >  NUEVO SIMBOLO > selecciono: BOTON , le doy un nombre: BOTON  > ACEPTAR.

Por más obvio que les parezca, nombrar los símbolos es de gran ayuda.

Flash me presenta el modo de edición de botón, en el escenario aparece una capa y sobre la línea de tiempo CUATRO FOTOGRAMAS nombrados como : REPOSO o UP, SOBRE o OVER, PRESIONADO o DOWN Y ZONA ACTIVA o HIT. 

FLASH EMPLAZA AUTOMÁTICAMENTE UN FOTOGRAMA CLAVE VACÍO en el fotograma   REPOSO.

2 Seleccionen el fotograma REPOSO en la línea de tiempo. Creen un objeto simple (un círculo o un cuadrado) que esté con el centro en la cruz del escenario, este es un indicador para poder emplazar los cuatro estados en el mismo sitio.

3 Seleccionen el fotograma SOBRE en la línea de tiempo, coloquen un fotograma clave (F6 o insertar > fotograma clave).

Háganles pequeños cambios, como de color o de forma, puede ser algo más grande que el anterior.

4 Seleccionen el fotograma PRESIONADO en la línea de tiempo. Inserten un fotograma clave. Hagan algunos cambios.

5 Seleccionen el fotograma ZONA ACTIVA en la línea de tiempo. Inserten un fotograma clave, ESTE FOTOGRAMA NO SE VÉ, sólo sirve para indicar

la zona DONDE SE ACTIVARÁ MI BOTÓN, así que puede ser negro, para que lo puedan comprobar.

6 PARA HABILITAR EL BOTÓN SOBRE EL ESCENARIO TENGO QUE IR A CONTROL > HABILITAR BOTONES SIMPLES.

7 Ya tengo mi botón, vuelvo a la escena, y compruebo que mi símbolo botón está en la biblioteca. Selecciono el primer fotograma de la capa 1 de la escena. Arrastro el botón desde la biblioteca al escenario y lo coloco en un costado. Nombro a esta capa botón. Le agrego a esta capa 30 fotogramas, insertar > fotograma. Creo una capa nueva y con la herramienta texto escribo en el primer fotograma: escena 1, le agrego 30 fotogramas.

8 Inserto una nueva escena, voy a insertar > escena. Le agrego 20 fotogramas. Con la herramienta texto escribo en el primer fotograma: escena 2, le agrego 20 fotogramas.

Para ir a de una escena a otra, podemos hacerlo desde el ícono que está a la

derecha arriba del escenario, (hay dos íconos: el primero es para ir de una escena a otra, el segundo para ir de un símbolo al otro), o si no podemos abrir la ventana ESCENA, desde el menú ventana, y picar sobre cada una de ellas.

Ahora debo indicarle al programa dos acciones fundamentales para que suceda la interactividad.

Por más que yo coloque un botón en la escena 1, si no le indico a Flash que se detenga en el final de esta escena, la reproducción seguirá corriendo hasta la escena 2 sin más. Y volverá a empezar en un ciclo ininterrumpido.

Lo puedo comprobar haciendo control + intro.

Para que se detenga en el final de la escena 1 y pueda accionar mi botón, debo comenzar a colocar ACCIONES.

HAY DOS TIPOS DE ACCIONES (en principio) :

ACCIONES DE FOTOGRAMA Y ACCIONES DE BOTON.

9 Vamos a empezar por indicarle a Flash que queremos que la película se detenga cuando llegue al fotograma 30 de la escena 1.

Para esto creamos una capa nueva y la nombramos acciones, le ponemos un fotograma clave VACIO en el fotograma 30.

Vamos a usar por vez primera la ventana ACCIONES (es la que está abajo del escenario). 

La desplegamos.

Vean que dice: ACCIONES - FOTOGRAMA, lo que me indica que estoy en condiciones de dar una acción a un fotograma (otra vez, la obviedad, pero verán más adelante que esto puede ser muy útil).

10 Seleccionamos el fotograma clave vacío 30 de la capa acciones y con la ventana ACCIONES abierta, veremos un signo +, picamos sobre él y vamos a ACCIONES > CONTROL DE PELICULA > STOP. Automáticamente aparece la indicación

stop();

en la ventana acciones y una pequeña a minúscula por encima del fotograma clave que me indica que este fotograma contiene una acción.

ESTO ES MUY IMPORTANTE PARA SABER DÓNDE HEMOS COLOCADO LA ACCIÓN Y RECORDAR CUÁLES son los FOTOGRAMAS que CONTIENEN ACCIONES.

Con sólo picar sobre el fotograma aparece la acción determinada en la ventana acciones.

11 Ahora vamos a probar la película, (control + intro). Vean que se detiene al finalizar la escena.  

12 Entonces vamos por la segunda acción, la del botón:

Estamos en la escena 1, seleccionamos el botón SOBRE EL ESCENARIO, (si tengo habilitado el control de botón sobre el escenario y me aparece la manito que no me permite seleccionarlo, voy a CONTROL > HABILITAR BOTONES SIMPLES Y LO DESELECCIONO.)

Ahora en la ventana ACCIONES dirá al lado BOTÓN. Pico sobre el signo + y voy a

ACCIONES > CONTROL DE PELICULA > GOTOANDPLAY.

Vean que aparece en la ventana acciones un cuadro con distintas opciones. Por defecto aparece seleccionado IR A Y REPRODUCIR, lo dejamos así. Debajo dice: ESCENA,

selecciono ESCENA 2, QUE ES A DONDE QUIERO QUE ME CONECTE EL BOTÓN.

Debajo dice TIPO: número de fotograma, lo dejo así, y debajo FOTOGRAMA : 1 , este será el fotograma por donde comenzará a reproducirse la ESCENA 2. el TEXTO COMPLETO de las acciones de botón DICE:

on (release) {

    gotoAndPlay("Escena 2", 1);

}

13  Ahora puedo probar mi película, la reproducción se detendrá cuando llegue al fotograma 30 de la ESCENA 1, y si pico sobre mi botón se reproduce la ESCENA 2 desde el comienzo. Y vuelve a la escena 1.

LO LOGRARON???

LOS FELICITO!!!

14 PARA TERMINAR, VIERON QUE AL FINALIZAR LA ESCENA 2, la película vuelve sola al fotograma 1 de la ESCENA 1, si yo quisiera detener la reproducción AL FINALIZAR LA ESCENA 2, CÓMO LO HARÍA?

Ya lo saben...

A ver quién lo logra....!!!!!

Bueno, si estás con dudas, harás lo siguiente: 

15 Agregar una capa de acciones a la escena 2.

16 Insertar un fotograma clave en el 20 de esta capa, asignarle acción de fotograma: stop.

17 Crear una capa nueva en esta misma escena, nombrarla botón, emplazar otra instancia del botón que hemos creado en el fotograma 1, asignarle la acción al botón, seleccionándolo desde el escenario, pero ahora indicando que vaya a la escena 1.

Ahora mi película debe correr hasta el fotograma 30 de la escena 1, accionando el botón comienza a correr la escena 2, se detiene en el fotograma 20 y accionando el botón vuelve a la escena 1.

Recuerden que para cada cosa utilizo una capa diferente, una para el texto, otra para las acciones de fotograma, y otra para el botón.