Tutorial de animación realista (Rebotando una pelota)

Introducción

Una de las pruebas que pone Disney a sus animadores es hacer botar una pelota.

Parece una tontería, pero en el botar de una pelota nos encontramos con casi todas los principios que tiene que tener una buena animación, como Squash & Strech, anticipación, animación secundaria, Timing, trayectorias circulares, etc.

En este tutorial, ayudándonos de las posibilidades de Flash, vamos a crear un bote infinito que además cuando salga de la pantalla volerá a entrar por el lado contrario, y todo ello con el único esfuerzo por nuestra parte de animar el primer bote.

Requerimientos

Manejo Básico de Flash MX o Flash MX 2004, Conocimiento básico de actionScript

Botando una pelota

El Escenario

• Si queréis seguir el mismo ejemplo que os pongo en el .fla, yo trabajé con un documento de 550 x 400 pixels, a 30 fps con fondo blanco
• Crearos una linea de horizonte, Yo utilicé un rectángulo de 125 px de alto
• La pelota es un círculo de 25 x 25 pixels con un degradado radial de blanco a negro (En vez de una pelota podéis usar un personaje del estilo de una rana, y queda bastante divertido)

La Pelota y el bote

• Lo primero es hacer el clip de la pelota. Seleccionamos nuestro dibujo, pulsamos F8 y creamos un símbolo de tipo gráfico al que llamamos pelota. Como centro de Transformación elegimos el Centro y Abajo.
• Una vez convertido en Símbolo volvemos a pulsar F8 y creamos un símbolo de tipo MovieClip también con el centro de transformación Abajo y al Centro.
  
  Es en este Movieclip donde vamos a Crear nuestra animación
  

1. En este MovieClip vamos a utilizar 3 capas como se muestra en la imagen. Una para la animación, una capa gúia y otra para la acciones.
   
   
   
2. Una vez hecha la animación de la pelota, tenéis que medir cuál ha sido exactamente el desplazamiento en el eje "x". En el caso de la animación del ejemplo es 67.5

Repitiendo el bote

• Si probáis la película, ya tendremos nuestro bote animado pero nos encontramos con dos pequeños problemas. El primero que la pelota bota sobre el mismo sitio, y el segundo que el primer y último fotograma se repiten. Para arreglar estos dos problemas metemos este código en el penúltimo fotograma:

gotoAndPlay(1);
this._x += 67.5;

• La primera línea de código hace que no se reproduza el último fotograma y así evitamos la superposición. La segunda incremente en "x" la cantidad de pixels que necesitamos para que la bota avance sin que se note un salto

Repitiendo el bote 2

• Para que la pelota vuelva por la izquierda cuando sale por la derecha yo he usado esto. Aunque aquí podemos usar muchísimos métodos distintos

if (this._x > 550){
	this._x = -25;
} 

• Y con esto hemos conseguido una animación completa en infinita con tan solo 15 frames y 4 líneas de código. Espero que os guste

¿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