Para el siguiente ejemplo veremos como utilizar las guías de movimiento para simular un movimiento perpetuo como lo es el caminar humano. Para esto crearemos un nuevo documento de Flash de 550px X 400px a 25 fps.

Primero necesitamos crear en orden ascendente las capas: pierna derecha, rodilla derecha, pie derecho, tobillo derecho, muslo derecho, brazo derecho, antebrazo derecho, codo derecho, mano derecha, muñeca derecha, separador, pierna izquierda, rodilla izquierda, pie izquierdo, tobillo izquierdo, cabeza, torso, cadera, muslo izquierdo, brazo izquierdo, antebrazo izquierdo, codo izquierdo, mano izquierda y muñeca izquierda. Las guías de movimiento serán aplicadas en las articulaciones principales que sean requeridas, en los casos de hombros y muslos, al iniciar estos en torso y cadera, no necesitan de guía de movimiento ya que estos en cambio serán los que determinarán el movimiento de los brazos y la piernas.

Empezaremos a dibujar en las capas correspondientes con la herramienta pluma los componentes del cuerpo, empezando por la parte izquierda del cuerpo, ya que luego simplemente copiaremos fotogramas para crear y darle movimiento a la parte derecha del cuerpo.

En la capa pierna izquierda realizamos el dibujo de la pantorrilla

En la capa muslo izquierdo realizamos el dibujo del muslo

En la capa cadera realizamos el dibujo de la cadera

En la capa pie izquierdo realizamos el dibujo del pie

En la capa torso realizamos el dibujo del torso

En la capa brazo izquierdo realizamos el dibujo del brazo

En la capa antebrazo izquierdo realizamos el dibujo del antebrazo

En la capa mano izquierda realizamos el dibujo de la mano

Finalmente dibujamos la cabeza en la capa correspondiente a esta

Una vez que terminamos el dibujo del personaje procedemos a preparar las partes móviles de este para la animación que se le aplicará. Para este propósito es necesario modificar el eje de rotación de estas seleccionándolas con la herramienta Transformación Libre y moviendo este hasta el punto de coyuntura de estos con el resto del cuerpo.

Cambio del eje de rotación definiendo las articulaciones

Luego en las capas codo izquierdo, muñeca izquierda, rodilla izquierda y tobillo izquierdo, realizo el trazado que guiará el movimiento de las articulaciones correspondientes a cada una de estas partes del cuerpo utilizando la herramienta pluma.

Una vez terminado el cuerpo se definen las guías de las articulaciones

компютри втора употреба

Cabe resaltar que la ubicación de los ejes de rotación debe cruzar siempre sobre el trazado de la guía correspondiente a este.

Luego procedemos a insertar tres fotogramas clave más en las capas mano izquierda, antebrazo izquierdo, brazo izquierdo, muslo izquierdo, pie izquierdo, y pierna izquierda. En los fotogramas 2 y 3 de estas capas modificaremos el brazo y la pierna de nuestro personaje para sus posiciones al dar el primer y el segundo paso, vigilando siempre que , en los fotogramas 1 y 4 la posición de nuestro personaje será la inicial.

Posición de nuestro personaje en los cuatro fotogramas

Por el momento ya tenemos las posiciones de las extremidades izquierdas de nuestro personaje, para completar las posiciones del personaje falta realizar el lado derecho de este, para ello copiaremos los 4 fotogramas de las capas muñeca izquierda, mano izquierda, codo izquierdo, antebrazo izquierdo, brazo izquierdo, muslo izquierdo, tobillo izquierdo, pie izquierdo, rodilla izquierda y pierna izquierda. Luego los pegamos en sus contrapartes derechas, pero luego seleccionamos los fotogramas que acabamos de pegar e invertimos el orden de estos haciendo clic derecho y seleccionando la opción invertir fotogramas.

Invertimos los fotogramas de las extremidades derechas

Posición de nuestro personaje en los cuatro fotogramas con ambos lados habilitados

A continuación, alargamos el primer fotograma clave de las capas muñeca izquierda, codo izquierdo, cadera, torso, cabeza, tobillo izquierdo, rodilla izquierda, separador, muñeca derecha, codo derecho, tobillo derecho y rodilla derecha hasta el fotograma 45, en las demás capas que contendrán las interpolaciones de movimiento, el segundo fotograma clave será el fotograma 15, el tercer fotograma clave será el fotograma 35 y evidentemente el cuarto fotograma clave será ubicado en el fotograma 45. Luego las capas muñeca izquierda, codo izquierdo, tobillo izquierdo, rodilla izquierda, muñeca derecha, codo derecho, tobillo derecho y rodilla derecha, serán asignados como guías de movimiento de sus capas inmediatamente inferiores y se aplican las interpolaciones de movimiento correspondientes.

Vista de la línea de tiempo resultante al final de la animación

Animación resultante con ayuda visual de papel cebolla en la línea de tiempo

Al final obtendremos una animación que simulará un movimiento perpetuo del caminar humano haciendo uso de guías de movimiento en las articulaciones de nuestro personaje. Si realizamos todo este proceso dentro de un clip de película (lo cual es altamente recomendable) podremos utilizar esta animación como un componente de futuros proyectos.

Archivos del tutorial: caminar.fla

Me pasó hace cerca ya de un año que, como Freelance, se me ofreció la oportunidad de rediseñar la página de una tienda deportiva, proyecto que fue asignado a otro Freelance, el cual por razones ajenas a mi conocimiento tenía detenido el proyecto por bastante tiempo sin haber logrado los resultados esperados.

Resulta que luego de dos semanas y 5 propuestas de diseño, de las cuales solamente en la última propuesta logré diseñar una página algo decente y basada en estilo de diseño de la filosofía Web 2.0, no se llegó a un acuerdo con el cliente y perdí 2 semanas de mi vida.

Dicen que al mal tiempo hay que poner buena cara y yo soy de un tipo de filosofía bastante positivista, por lo cual concluiré diciendo que al menos practiqué artes vectoriales, las cuales pongo a disposición de quienes esto resulte útil. Los botones que adjunto son imágenes vectoriales en el formato PNG de Fireworks y son totalmente editables con este programa.

Botones descargables:

Para los que no vean esto como un aporte útil o no sepan qué aplicación darles, acá les dejo un fondo de pantalla para mi celular (c651), el cual realicé al modificar uno de estos botones.