Animación interactiva de Morphing en Flash

En este artículo veremos como crear una animación de morphing que en sí, es dar la orden de correr o iniciar una animación cuando se de click en un botón.

Crearé un botón sencillo, ya que nuestro propósito se centra en el morphing, también usaremos las capas y veremos como poner las acciones para así mismo crear el morphing y dar de cierta manera la orden al botón, para que inicie la animación.

• Abrimos un nuevo documento.
• Elegimos la opción Insertar –> Nuevo símbolo, luego ponemos el nombre (botón) y escogemos la opción botón.
• En ese momento vemos como nos aparece una nueva ventana, allí es donde crearemos nuestro botón, que luego lo pasaremos a la ventana principal. Si nos damos cuenta, en la parte superior, es decir, donde antes veíamos la línea de tiempo, vemos que nos aparecen 4 nuevas “propiedades”, que son las propiedades normales de un botón, la propiedad Reposo, que es donde dibujaremos el grafico que queremos que se vea cuando nuestro botón se encuentre en reposo o quieto por así decirlo, luego seguido de esta propiedad vemos que hay otra con el nombre sobre, que es donde programaremos la animación para cuando se ubique el cursor sobre nuestro botón, después vemos que hay otra propiedad con el nombre de presionado, que como su nombre lo indica se programa la animación para cuando presionemos nuestro botón.

• Nos ubicamos debajo de la primer propiedad y damos F6 para crear un nuevo fotograma clave. Procedemos a dibujar nuestro botón para cuando este se encuentre en reposo. En mi caso voy a utilizar un botón que tendrá forma circular, un color azul y un texto dirá “hola” (para su estado en reposo).

Nota: todo debe ir centrado y para ello nos basamos en el símbolo “+” que se encuentra en el centro de la película, esto para que no nos cause problemas a la hora de correr nuestra animación.

• Pasamos al segundo fotograma, es decir a la propiedad del botón “sobre” nuevamente damos F6 y creamos un nuevo fotograma clave, es decir que ya podemos programar la animación para cuando el cursor se ubique sobre nuestro botón. En mi caso haré que se cambie el color y el tamaño de nuestro botón.

Así que después de dar F6 selecciono el botón y voy a la ventana de propiedades que se encuentra en la parte inferior de nuestra película, allí abro al panel de colores y escojo uno diferente del que tenemos en este momento.

Vamos a cambiar el tamaño de nuestro botón, esto en la misma posición es decir en la propiedad sobre, para ello vamos a Ventana –> información.

En esta ventana (información), vamos a la casilla que dice An (que es el ancho del botón) y ponemos el numero 150 o un valor superior al que tenemos en este momento, después vamos a la casilla Al (que es el alto del botón) y también ponemos el mismo valor que pusimos en An. Y procedemos a centrar nuestro circulo, basándonos en el “+”del centro de nuestra película.

Después de hacer lo anterior ya tenemos creado nuestro botón, para la propiedad reposo y sobre, ahora vamos a crear nuestro última animación que es la de cuando el botón se encuentre presionado, para ello nos ubicamos debajo de la palabra presionado y damos F6 para crear un nuevo fotograma clave.

En esta ocasión le diré a mi botón que cuando lo presionen la palabra Hola se cambie por la palabra “o.k” y que el color del botón cambie y el tamaño de la letra.

Así que para hacer lo primero que es cambiar el texto, damos doble clic sobre el texto actual (hola) y borramos. Seguidamente escribiremos la palabra “o.k” y para cambiar el tamaño de la letra, basta con seleccionar nuestro texto y abajo en la ventana propiedades cambiamos el tamaño de la fuente y le subimos 10 pts, es decir si esta en 32 lo pasamos a 42.

Ahora vamos a la segunda parte, que es cambiar el color de nuestro botón, para ello hacemos el mismo procedimiento que hicimos anteriormente, en la propiedad sobre, en este caso escogeré un color oscuro para que sea un poco más llamativo, así que seleccionamos el círculo y en la ventana propiedades escogeremos un color apropiado (No mostrare la imagen puesto que ya esta en el anterior paso que era para la propiedad sobre). La imagen final de nuestro botón quedaría así:

• Ahora a crear la animación que pondremos a correr cuando den clic en el botón, para ello hacemos lo siguiente:

Damos clic en una pestaña que dice escena 1 y se encuentra arriba de donde estaban las propiedades del botón, cuando demos clic nos iremos a la escena o película principal, en ese momento nuestro botón desaparece y no esta en la escena, no hay porque preocuparse, ya que el botón se encuentra guardado en nuestra biblioteca.

Vamos a crear la una animación cualquiera en nuestra película principal, es mi caso he creado una interpolación de forma, y la pantalla se vera de esta forma:

Ahora vamos a incluir nuestro botón en la película principal, así que vamos a Ventana -> Biblioteca, vemos que ahí nos aparece un grafico con el nombre que le asignamos a nuestro símbolo, en nuestro caso botón. Creamos una nueva capa, para que se incluya en ella nuestro botón, ya que si lo incluimos en la misma, nuestra animación no va a funcionar, nos ubicamos en el primer fotograma de nuestra nueva capa arrastramos nuestro botón a la película principal y lo soltamos en el centro de la misma.

Vemos que nuestro botón, al momento de arrastrarlo a nuestra película principal cambia de color, ya que en la biblioteca sale de color rojo y cuando lo pasamos sale de un color azul, esto sucede porque lo que se va a ver es el botón en reposo y si recordamos, nuestro botón en reposo tenia esa característica (color).

Bien ya hemos creado nuestra animación y nuestro botón, ahora solo falta darle la orden a nuestro botón de empezar a corre nuestra animación. Si corremos nuestra película, de una vez empezara a correr nuestra animación y cuando finalice volverá a empezar, así que vamos a acabar con esto, es decir que cuando demos Ctrl + Intro no pase nada, para ello nos ubicamos en la capa de nuestra animación más exactamente en el primer fotograma y abrimos las acciones, vamos a Ventana – Acciones o pulsamos F9.

Al lado izquierdo aparecen una serie de opciones de nuestras acciones, escogemos funciones globales, se abrirán otras opciones y escogemos control de línea de tiempo, se abrirán otras y escogeremos stop, dando doble clic, cuando hacemos esto nos aparecerá una “a” en el primer fotograma.

Esto lo repetimos para el fotograma 30 de la misma capa, para que cuando finalice no vuelva a empezar si no que pare instantáneamente.

Después de esto seleccionamos nuestro botón, vamos nuevamente al panel o la ventana de acciones y vamos a darle la orden de que corra nuestra animación cuando se de clic sobre el.

En esta ocasión abrimos nuevamente las funciones globales pero ya no escogemos control de línea de tiempo si no control de clip película, se abren unas nuevas opciones y escogemos con doble clic la opción “on”, cuando hacemos esto nos aparece cerca de la palabra on una serie de opciones que en realidad son eventos, eventos del Mouse, en nuestro caso escogeremos press que es para cuando se presione nuestro botón

Luego nos ubicamos dentro de las llaves “{}” y vamos nuevamente a funciones globales y escogemos de nuevo control de línea de tiempo, allí aparecerán nuevamente las opciones y escogemos esta vez la opción gotoAndPlay(), dentro de ese paréntesis vamos a poner el numero 2, lo que quiere decir que cuando presionemos nuestro botón empezara a correr nuestra animación desde el fotograma 2, se pone el 2 ya que el 1 lo estamos viendo en el momento que corremos nuestra película, por tanto lo ponemos a correr desde ahí.

Y ya está, podemos correr nuestra película dando Ctrl + Intro y podemos ver que nuestro botón responde a los diferentes estados, es decir, reposo, sobre y presionado, también vemos que cuando lo presiono empieza a correr nuestra animación y que no vuelve a empezar, a menos que demos nuevamente clic en el botón.

Este es el ejemplo en vivo

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo