Miércoles, 18 Mayo 2016 19:32

The Walking Bear (iii)

Valora este artículo
(1 Voto)

Controlando la línea de tiempo con ActionScript 3

Controlando la línea de tiempo con botones usando AS 3

Usando ActionScript 3 veremos como como controlar líneas de tiempo asociadas a componentes de botón, para lo que partiremos de la entrada anterior, "The Walking Bear" (ii); veremos en este caso como detener el movimiento del oso, cómo reactivar su movimiento, y también como reiniciar las líneas de tiempo de los clips implicados en el movimiento. Adicionalmente agregaremos un botón adicional que abra una dirección web en una nueva ventana del navegador web que el usuario esté usando al momento de visitar la página donde hemos publicado nuestra animación; en caso de que esté editando el archivo .fla el sistema abrirá el navegador que el usuario use por defecto.

Veamos el desarrollo del proceso:

1. Partiendo del segundo módulo de este ejercicio - "The Walking Bear" (ii) - agregaremos las siguientes capas en la línea de tiempo principal, con los siguientes nombres:

Capas y nombres de las capas agregadas

2. En cada una de estas capas hemos colocado los siguientes símbolos y trazados:

Símbolos y formas visibles sobre el escenario

De acuerdo al siguiente detalle:

2.1. Capa Acciones, en cuyo primer fotograma hemos escrito todas las acciones de nuestra animación.

2.2. Capa Botones, donde hemos colocado cuatro instancias del componente de botón:

Ventana de Componentes en Animate CC2015

Abriendo la ventana de Componentes

Vista de la ventana de componentes

Vista de la ventana de componentes
con el componente "Button" seleccionado.

2.2.1. Vista de los cuatro botones agregados, con nombres de instancia: "obtenerURL"; "detener"; "seguir" y "reiniciar":

Botones sobre el escenario

Vista de los botones colocados, donde se ha movido el botón "seguir" para permitir ver el botón "detener", situado debajo de él.

2.3. Capa Marco, donde dibujamos el marco oscuro que da soporte a los botones.

2.4. La capa Oso, donde hemos dispuesto el clip de película con nombre de instancia "oso".

Capa Oso

3. Seleccionamos el botón 1 de la capa "Acciones":

Seleccionando el fotograma 1 de la capa Acciones

4. Abrimos la ventana Acciones:

Abriendo la ventana Acciones

5. Vista de la ventana Acciones con los códigos de ActionScript 3 que hemos agregado y explicaremos más abajo:

Vista de la ventana Acciones

5.1. La primer columna en la captura anterior muestra que estamos editando códigos presentes en el "Fotograma 1" de la capa Acciones en la "Escena 1"; la siguiente captura muestra le herramienta para localizar los clips de película para dirigirle las acciones necesarias (todos los botones y clips de película con acciones asociadas DEBEN tener asociados un nombre de instancia):

6. Revisemos el código:

// El doble slash crea un comentario de una sola línea

// Al iniciar la reproducción de la animación cambiamos la visibilidad del botón con nombre de instancia "seguir" (ver explicación del código en las líneas de código de más abajo:

   this.seguir.visible = false;

/* Los caracteres incluidos entre el slash + asterisco y hasta el asterisco + slash corresponden a comentarios de varias líneas */

/* Creo un escucha asociado un símbolo de nombre de instancia "detener" ubicado en el escenario; al tratarse de un evento de tipo MouseEvent; puntualmente de tipo MOUSE_DOWN, estaremos logrando que, una vez que el usuario aprieta el botón principal del mouse sobre el símbolo con nombre de instancia "detener", se disparará la función llamada "funcionDetener" que se definirá más abajo */

   detener.addEventListener(MouseEvent.MOUSE_DOWN, funcionDetener);

/* Debo declarar una función cuyo nombre se corresponda con el nombre de función que dispara el listener asociado al botón correspondiente.
La palabra "function" es una palabra reservada de ActionScript 3 que permite construir funciones; la palabra "funcionDetener" es el nombre de la función con el que podemos llamarla; MouseEvent indica que la función es disparada por un evento del ratón; void indica que la función no devuelve valores. */

   function funcionDetener(event: MouseEvent): void {
      // Ruteo absoluto dirigido a detener la línea de tiempo del símbolo con nombre de instancia llamado "oso" (clip de película en nuestro caso) que se encuentra sobre el escenario de nuestra animación:
      Object(root).oso.stop();
      // La palabra reservada "this" se corresponde con un ruteo relativo de acciones que dirige la acción stop(); hacia la línea de tiempo de un clip con nombre de instancia "osoAvance" que se encuentra anidado dentro de otro símbolo ("oso") que se encuentra en el mismo nivel que el botón que lo dispara (de ahí el "this"):
      this.oso.osoAvance.stop();
      // Cambio la visibilidad del botón "seguir" para poder poner nuevamente en marcha las líneas de tiempo que hemos detenido arriba:
      this.seguir.visible = true;
      // Ocultamos el botón "detener" ya que ha cumplió con la función de detener las líneas de tiempo; en las función seguir invertiremos el estado de visibilidad de ambos botones:
      this.detener.visible = false;
      }

/* Agrego una escucha al botón con nombre de instancia "seguir" que disparará la función llamada "funcionSeguir" que definiremos más abajo: */

   seguir.addEventListener(MouseEvent.MOUSE_DOWN, funcionSeguir);

/* Creo la función de nombre "funcionSeguir" que se disparará al presionar el botón de nombre de instancia "seguir": */

   function funcionSeguir(event: MouseEvent): void {
      Object(root).oso.play();
      Object(root).oso.osoAvance.play();
      this.detener.visible = true;
      this.seguir.visible = false;
      }

/* Asocio un listener al botón de nombre "reiniciar" que disparará la función llamada "funcionReiniciar" que definiremos más abajo: */

   reiniciar.addEventListener(MouseEvent.MOUSE_DOWN, funcionReiniciar);

/* Creo la función reiniciar, que reiniciará las líneas de tiempo de los clips oso y oso.osoAvance, reproduciéndolas desde su primer fotograma: */

   function funcionReiniciar(event: MouseEvent): void {
      Object(root).oso.gotoAndPlay(1);
      Object(root).oso.gotoAndPlay(1);
      Object(root).oso.osoAvance.gotoAndPlay(1);
      this.detener.visible = true;
      this.seguir.visible = false;
      }

/* Asociamos un listener al botón "obtenerURL" que disparará la función llamada "funcionURL" que definiremos más abajo: */

   obtenerURL.addEventListener(MouseEvent.MOUSE_DOWN, funcionURL);

// Construyo la función "funcionURL":

   function funcionURL(event: MouseEvent): void {
      // navigateToURL dispara el navegador hacia la dirección web (URL) 
      // ingresada dentro del constructor new URLRequest; el parámetro "_blank"
      // abre la dirección en una nueva ventana en blanco: 
      navigateToURL(new URLRequest("http://www.formaciongrafica.net"), "_blank");
      }

El código anterior puede ser visto y editado en la versión editable del ejercicio que se puede descargando en el siguiente enlace: OsoAnimado_02cConBotones.fla

7. Algunos otros eventos de tipo MouseEvent:

  • CLICK: Dispara una función cuando se clickea un determinado símbolo.
  • MOUSE_DOWN: Idem pero al presionar el botón del mouse.
  • MOUSE_UP: Dispara una función al momento de soltar el botón del mouse sobre el símbolo.
  • ROLL_OVER: Idem pero al pasar el puntero del mouse sobre un determinado símbolo.
  • ROLL_OUT: Opuesto al anterior, el evento dispara a la función cuando el puntero del mouse sale del área activa de un determinado símbolo.
  • MOUSE_MOVE: Permite disparar repetidamente una función mientras se produce el movimiento del mouse sobre el símbolo correspondiente.

8. El resultado final es el siguiente:

8. Enlaces de descargas de los archivos relacionados con esta entrada:


Ejercicio planteado para clase:

Comentar el resto de los códigos no explicados, y cambiar los eventos disparadores en cada uno de los botones para comprender las diferencias entre cada uno de ellos (obviar el evento MOUSE_MOVE ya que dará, en este caso, un resultado visual idéntico a "MOUSE_UP").


Como siempre, es posible plantear las dudas surgidas de esta entrada usando el formulario de contacto dispuesto al pie de esta entrada.

Saludos para todos!
Plácido Luna.

 

Visto 501 veces Modificado por última vez en Miércoles, 18 Mayo 2016 20:41