Walk Cycle(Como hacer un par de piernas caminantes en flash)

23 09 2006

Estaba tratando de hacer un personaje para flash-scumm, y como saben, es imperativo que estos personajes caminen de una manera agradable. Busqué varios tutoriales que traten del tema, pero ninguno de los ejemplos me convencía, así que decidí hacerlo a la antigua, es decir, animando cuadro por cuadro.


Primero consejo, no usen “Motion Tweening”(interpolación de movimiento), queda mal. El motion tewening jamas sustituirá a una buena animación cuadro por cuadro.

Lo primero que vamos a hacer es una linea de base, para tener un punto de referencia

Baseline y Forma pricipal

Bueno, nuestra nimación tendrá exactamente 8 frames. Con 4 fromas básicas para realizar el ciclo de animación.

Fijensé que utilizo formas simples para realizar cada uno de los cuadros. Pueden bajarlas para utilizarlas como base para piernas más complejas.

Algo que vale la pena aclarar es que estamos animando una caricatura, por lo que las proporciones no son las de un ser humano real.

Bien, las fórmas básicas son estas:

Las cuatro posturas básicas

Bien, como ya lo habrán notado, hay 4 posturas y 8 frames, esto es porque algunas de ellas se repiten. Ahora bamos a distribuirlas por los 8 frames sobre la línea de base. Para esto, las convertimos a cada una en un simbolo diferente(con la tecla F8). Y las ubicamos como muestra la imagen a continuación, para hacer la misma utilicé el modo “onion skin” (piel de cebolla)de flash.

Distribución de los frames

Una vez que tenemos nuestras piernas distribuidas en distintos frames de la manera que muestra la imagen(si no lo captan bien, fíjense en el archivo de ejemplo al final de esta misma página), deberemos crear otra capa, donde distribuiremos los frames de la siguiente manera(para la otra pierna)

Distribución de los frames para la otra pierna

Copiamos los frames seleccionandolos en la línea de tiempo, creamos un nuevo simbolo, al que llamaremos “Pierna Front” y los pegamos en la linea de tiempo de este(botón derecho sobre el primer frame y luego seleccionamos “Paste Frames”). Luego, repetimos el proceso con los frames de la otra capa. A la que llamaremos “Pierna Back”. De esta manera, tendremos las animaciones de cada una de las pienas.

Bien, las piernas no son nada sin el cuerpo. Para experimentar, y para no andar dibujando, utilizaremos una letra “i”. Poniendo cada pierna en su base. Con esta letra “i”, haremos un nuevo símbolo, al cual le incorporaremos un total de 8 frames, y levantaremos un poco la letra “i”, en aquellos frames donde las pies estén más juntos, bajandola donde estén mas separados.

A continuación, les dejo el ejemplo terminado. Los archivos de ejemplo se puede descargar del siguiente link:
walkcycle.zip.

Espero que les sea de utilidad. Saludos!!!!


Acciones

Informacion

6 respuestas a “Walk Cycle(Como hacer un par de piernas caminantes en flash)”

11 02 2007
Luataro (19:23:03) :

hola!!! muchas gracias por este titular….. “Casero” como diria yo,es q recien consigo un el flash y no he podido hacer un buen efecto de caminante
jajajaja bye!!

11 02 2007
pablo.weremczuk (19:26:07) :

Al contrario Lautaro, gracias a vos por visitar mi página. Suerte.

13 05 2007
valentayn (00:48:19) :

me parese muy bueno estoy muy ipresionado
ayn my idiot fhiz
sacrremu
chi con chaucha

13 05 2007
pablo.weremczuk (00:56:07) :

Acabo de descubrir que el link a los fuentes estaba roto. Ya lo arreglé.

Adios y gracias por la buena onda.

24 09 2007
luis (14:35:25) :

muy bueno muchisimas gracias,espero ver mas tutoriales de animacon en flash
ya que es dificil encontrar material en castellaño referido a la animacion de personajes´

saludos y nuevamente gracias!!!!!!!!

27 12 2007
pertermortal (14:35:52) :

mmm, la verdad que esta muy bueno el tutorial, pero brother que te parece si puedes hacer videotutoriales.

bueno si puedes seria fantastico. ;-)

Deje un comentario

usted puede usar estos tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word