Por: Jatrix13 + Otros tutoriales de Jatrix13 + 21 de Julio del 2007
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.
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.
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í:
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
Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros
