Taller de Flash: Guías de Movimiento

Hasta ahora, en una animación de un objeto los movimientos eran siempre lineales y los fotogramas claves correspondían a un cambio en el sentido del movimiento. Con las guías de movimiento podrás lograr nuevos movimientos.

Las guías actúan como un trazado a través del cual se mueve nuestro objeto. Puede ser un trazado recto, ondulado o combinado. Sólo resta ubicar el elemento dentro del trazado para comenzar la animación. ¿Empezamos?
Sin las guías de movimiento, animar un elemento X de manera ondulada era ¿imposible?. Un poco… Requería al menos un fotograma clave nuevo cada vez que el objeto cambiaba de dirección.

Con las guías puedes generar movimientos curvos de forma muy sencilla:

Como se ve en la imagen, el movimiento se rige en función de la guía. Los círculos en este caso marcan que el centro del objeto estará siempre en contacto con la guía, será como el punto de apoyo. Esto es muy importante porque si separamos el punto de apoyo, la animación tendrá errores.

Pasos para trabajar con guías de movimientos

1. Convierte tu símbolo en gráfico (F+8).
2. Selecciona la capa de tu gráfico (en este caso la capa Pulpo).
3. Haz clic derecho y selecciona la opción Agregar guías de movimiento (Add motion guide). Se generará una capa nueva sobre la capa Pulpo a la que Flash nombrará como Guía o Guide.
4. Dentro de esa capa crea la línea (con la pluma o pega un vector traído de Ai) a través de la cual se moverá tu símbolo. Puede ser recta, curva, larga, corta, etc.
5. Por último deberás mover el objeto de forma que el centro coincida con el inicio del trazado. Te darás cuenta que al mover el símbolo el centro tenderá a posicionarse sobre el trazado como si fuera un imán. En la imagen, el centro dela imagen está seleccionado con un círculo rojo.

Generando la animación

Ahora sólo falta crear la animación tal como lo haríamos en cualquier otro caso… La única diferencia esta vez es que el símbolo deberá estar ubicado de forma que su centro coincida con la guía.

1. En la línea de tiempo, en la capa de tu gráfico (Pulpo) agrega un nuevo fotograma clave, por ejemplo en el fotograma 20.
2. Ahora, en el fotograma 20 mueve el símbolo justo al final de la guía.
3. Genera la interpolación de movimiento.

¡Ya tienes tu animación con guías de movimiento! Ahora probar arreglando los tiempos e incorporando varios movimientos a un mismo objeto dividido en varios símbolos…

Haz clic para ver el SWF (31,1 Kb)

Haz clic para descargar el archivo FLA original comprimido (398 MB)