Animar suavemente una caricatura usando interpolaciones de movimiento

En este tutorial veremos cómo podemos crear una caricatura, dividirla en diferentes capas y luego organizar las piezas correctamente como símbolos gráficos. Por último, veremos con qué facilidad podemos animar la caricatura sin problemas mediante el uso de interpolaciones de movimiento. Este es un tutorial largo, así que comencemos!


Resultado final

Echemos un vistazo rápido al efecto que pretendemos lograr con este tut:

Paso 1:

Comience con el diseño de la caricatura. Diseñé una caricatura muy simple, aunque todavía la mantuve estilizada. La mejor manera de generar ideas es a través de garabatos. Hice un boceto basto y escanee la imagen..

Paso 2:

Ahora abre Flash y comienza un nuevo archivo flash. Haga el tamaño de escenario: 720px X 576px, Velocidad de cuadros: 25 fps y Color de fondo: Blanco. Esta configuración es tal porque estamos haciendo la animación a nivel de transmisión.

Paso 3:

Importe la imagen escaneada a la capa predeterminada yendo a Archivo> Importar> Importar a escenario.

Etapa 4:

Ahora escala la imagen para que se ajuste al escenario. Nombra la capa que contiene la imagen "Ref. Imagen" y bloquéala.

Paso 5:

Hacer una nueva capa. Dibuja la forma de la caricatura pieza a pieza, siguiendo la imagen de referencia que se encuentra debajo. Si lo desea, puede embellecer y estilizar su dibujo aún más que el boceto en bruto..

Paso 6:

Dibuja cada parte de la caricatura en una capa diferente y sigue nombrándolos. Dibujar partes del cuerpo en capas separadas dará espacio para una animación más detallada al animar partes individuales. Nombrarlos correctamente te ayudará a encontrar la capa deseada fácilmente. También es muy importante para proyectos donde muchas personas trabajan en el mismo archivo..

Paso 7:

Después de haber dibujado la cara y el torso, parece que toda esta parte actuaría como una sola parte del cuerpo (¡por supuesto! ¿De qué otra forma debería moverse un hombre gordo?). Ahora en la línea de tiempo, seleccione el marco de la capa superior, luego mantenga presionado "shift" y seleccione el marco en la capa inferior. Al hacer esto, seleccionará todos los marcos de todas las capas. Ahora haga clic derecho en el área seleccionada de la línea de tiempo. Aparecerán muchas opciones. Seleccione "Copiar Marcos".

Paso 8:

Ahora presione "Ctrl + F8" o vaya a Insertar> Crear nuevo símbolo. Esto abrirá un cuadro de diálogo. Escriba "body n face" como nombre y seleccione el tipo de símbolo como gráfico. Ahora haga clic en Aceptar.

Paso 9:

Aparecerá un símbolo en la biblioteca e instantáneamente la vista de la línea de tiempo cambiará al símbolo gráfico vacío, en lugar de a toda la escena. De nuevo, haga clic con el botón derecho en el primer cuadro de la capa vacía y seleccione "Pegar cuadros" de las opciones. Todos los cuadros copiados aparecerán dentro del símbolo manteniendo su orden de capas y nombres de capas.

Paso 10:

Ahora vuelva a la vista de escena, haciendo clic en "Escena 1" en la barra de edición.

Paso 11:

Cree una nueva capa sobre todas las capas existentes, luego arrastre y suelte el símbolo en esa capa. Ahora ve la capa en modo de contorno. Alinee el símbolo en la misma posición que se ve a través de las otras capas.

Paso 12:

Cambie el nombre de la capa para que coincida con el nombre del símbolo y elimine las otras capas que ya se han copiado en el símbolo. De esta manera, las capas en la línea de tiempo no se acumulan y crea una jerarquía adecuada.

Paso 13:

Dibuja la mano haciendo referencia a la imagen. Hazlo en dos capas al principio. En uno, hacer la mano hasta la muñeca. En la segunda capa, hacer el resto de la mano (parte adecuada). Sólo asegúrese de que estas dos capas se superponen. Esto ayudará mientras animas estos.

Paso 14:

Ahora, piensa en cómo se mueve nuestro brazo mientras caminamos; se dobla en el codo. Así que también necesitamos romper la parte de la mano desde el codo. Crea una nueva capa. Selecciona y haz clic derecho en el cuadro donde has dibujado. Copia ese marco. Crea una nueva capa y pega el marco en esa nueva capa.

Paso 15:

Ahora bloquee todas las capas de la superior. Arrastre el cursor del mouse desde la parte inferior de la pantalla y seleccione la parte inferior de la forma (solo asegúrese de que la selección cubra un poco menos que la región del codo imaginario). Esta área extra será por superposición. Ahora presiona "borrar" y borra la selección. La parte restante constituye la mano superior..

Paso 16:

Seleccione la forma y luego seleccione Modificar> Convertir a símbolo o presione "F8". En el cuadro de diálogo, escriba "mano arriba" como nombre y seleccione el tipo de símbolo como Gráfico. Ahora haga clic en Aceptar. Esto crea la mano superior. Convertir formas en símbolos es extremadamente importante para usarlos en interpolación de movimiento. Cambie el nombre de la capa igual que el símbolo, luego haga doble clic en el símbolo, vaya dentro y encontrará la capa dentro. Tendrá el nombre predeterminado de "Capa 1", así que renómbrelo.

Paso 17:

Bloquea la capa "mano arriba" y cambia al modo de esquema. Desbloquea la capa de abajo. Arrastre el cursor del mouse desde la parte superior de la pantalla y seleccione la parte superior de la forma, asegurándose de que la selección cubra un área pequeña de la capa superior, visible como contorno. De nuevo, borra la selección..

Paso 18:

Convierta la forma en un símbolo gráfico y llámela "mano baja". Npw realiza todos los procesos de cambio de nombre como lo has hecho anteriormente. Haga un hábito para cambiar el nombre de los símbolos y capas en consecuencia. Una vez finalizado, revertir la capa "mano arriba" a su modo de vista normal.

Paso 19:

Bloquea otras capas y luego haz de la muñeca un símbolo. Nombre "muñeca".

Paso 20:

Haz una nueva capa y dibuja el área de la pierna (sin incluir el zapato), superponiendo el cuerpo y las áreas del zapato.

Paso 21:

En otra capa nueva, dibuja el zapato..

Paso 22:

Divida la capa de la pierna en dos partes, superponiendo la región de la rodilla, como lo hizo para la mano. Convierta todas las partes en símbolos y denomínelas "pierna baja" y "pierna arriba". También renombrar las capas.

Paso 23:

Divida el zapato dividiéndolo verticalmente en dos partes, una hacia el talón y otra hacia el dedo. Hazlos símbolos también. Dígales "tacón de zapato" y "dedo del pie de zapato".

Paso 24:

Ahora organice las capas tirando de las capas de la pierna y el zapato hacia abajo debajo de la capa "cara y cuerpo". Cambiar la visibilidad en todas las capas. ¿Ver? Tu caricatura está lista, aunque parece un poco fuera de proporción..

Paso 25:

Este es el último punto en el que aún puede modificar su diseño. Apriétalo un poco horizontalmente y escala el zapato y las piernas como quieras. Finalmente, cuando haya terminado, haga clic derecho en la capa "imagen de referencia" y seleccione "guía". La "imagen de referencia" ya no se procesará cuando obtenga una vista previa o exporte la película. Incluso puedes apagar la visibilidad si lo deseas..

Paso 26:

Ahora es el momento de posicionar los pivotes. Sabemos que nuestras manos, piernas y cuerpo se mueven alrededor de algunas articulaciones fijas en nuestro esqueleto. Esos puntos son encontrados por nuestros hombros, rodillas, codos, caderas y cuello. Así que incluso en esta caricatura necesitas recrear esas posiciones conjuntas para dar un movimiento natural a la caricatura..

Paso 27:

Seleccione la herramienta de transformación y luego una por una, seleccione cada símbolo en la vista de escena. La posición predeterminada del pivote será el centro, así que mueva el pivote (el círculo) al área de pivote adecuada de la caricatura. Para orientación, vea la imagen de abajo..

Paso 28:

Antes de comenzar la animación, será necesario un poco más de anidación. Parece que hay demasiadas capas para animar y será difícil manejarlas todas a la vez. Seleccione "muñeca", "mano baja" y "mano arriba" (Ctrl + Clic), luego haga clic con el botón derecho en el marco y "Copiar marco". Haz un nuevo símbolo, llámalo "mano derecha" y pon las capas en eso. Cree una nueva capa y coloque este nuevo símbolo correctamente, cambiando el nombre de la capa en consecuencia. Eliminar las capas antiguas.

Paso 29:

Repita el mismo proceso, esta vez haciendo un símbolo "pierna derecha", combinando "pierna arriba" y "pierna baja". Las capas "zapato talón" y "zapato dedo del pie" también deben colocarse dentro de este símbolo, pero solo omítalo por ahora. Encontrarás que ha habido un error ...

Paso 30:

¡Ahora has encontrado el error! No hay problema. Seleccione las capas y elija "Copiar marco". Desde la biblioteca, haga doble clic en el símbolo "pierna derecha" para que aparezca la vista del símbolo. Cree una nueva capa en la parte superior, haga clic derecho en el marco y luego haga clic en "Pegar marcos". ¡Eso es! Se corrigió el error, lo que demuestra que esta disposición es fácilmente modificable en cualquier momento. Por último, elimine las capas de zapato adicionales de la vista de escena..

Paso 31:

Tienes una pierna derecha, pero también necesitas una pierna izquierda. Seleccione el símbolo "pierna derecha", haga clic con el botón derecho y, a continuación, seleccione "Duplicar" en las opciones. Cuando aparezca el cuadro de diálogo, nombre el duplicado "pierna izquierda".

Paso 32:

Cree una capa debajo de la "pierna derecha", arrastre y suelte el nuevo símbolo y colóquelo correctamente.

Paso 33:

Del mismo modo, cree la mano izquierda de la caricatura y coloque la capa en la parte inferior. Visualmente, la mano izquierda estará detrás de todo. Para colocar el símbolo con precisión, cambie la visibilidad de la capa al modo de contorno.

Paso 34:

Antes de comenzar a animar, tendrás que tener en cuenta las principales poses de caminar. Vea la figura de abajo; esas son poses clave, también conocidas como "extremos". Primero debe hacer marcos clave con esas poses, luego, al refinar los cuadros intermedios, se obtendrá el resultado.

Paso 35:

Necesita una referencia del plano de tierra para ver si el pie está tocando correctamente el suelo. Así que toma una nueva capa debajo de todas las capas. Dibuja una línea horizontal y coloca eso justo debajo del pie. Bloquear la capa.

Paso 36:

Haga doble clic en la pierna derecha de la caricatura para ir dentro del símbolo "pierna derecha". Ahora coloque la pierna girando y moviendo (sin escalar) las partes de la pierna. Haz que se vea como la imagen de abajo. Un consejo adicional aquí: naturalmente, si nuestra pierna derecha se mueve hacia adelante, nuestra mano derecha retrocede.

Paso 37:

Ahora regrese a la escena e ingrese el símbolo de "pierna izquierda". Coloca la pierna como desees.

Paso 38:

Del mismo modo, posa la mano derecha..

Paso 39:

Plantea la mano izquierda. Aquí, como está en la parte posterior de todo, será necesario cambiar al modo de esquema.

Paso 40:

Se hace la primera pose clave. Tendrás que hacer tres poses más para completar el ciclo de caminata. Decidamos que el intervalo (intervalo de tiempo) entre cada dos poses clave es de 8 cuadros. Por lo tanto, la siguiente posición clave debe aparecer en el cuadro 9. Arrastrar y seleccionar todas las capas en el cuadro 9. Luego, presione "F6" para hacer un cuadro clave para "pierna derecha".

Paso 41:

Ahora posa la "pierna derecha" para la segunda pose clave. Luego posa todas las demás partes una por una, tal como hiciste para la primera pose clave. Una vez terminado, habrás terminado con la segunda pose clave.!

Paso 42:

No podrá ver la nueva pose de clave en la vista de escena, ya que las capas principales (principales) tienen solo un cuadro. Vamos a extenderlo hasta el cuadro 32. La lógica detrás de esto es clara; Ocho cuadros para cada pose (4 x 8 = 32). Luego en el cuadro 9, puedes ver la pose. Arrastre y seleccione todos los fotogramas clave en el cuadro 32 y presione "F5". Esto creará un fotograma (no fotograma clave) y extenderá la animación hasta el fotograma 32..

Paso 43:

Coloque la caricatura en el cuadro 17 y el cuadro 25. Cree fotogramas clave en el cuadro 33, luego copie los cuadros desde el cuadro 1 y péguelos allí. Queremos que la animación se repita y, después del fotograma 32, el fotograma 1 debería volver a aparecer. Eso es. Su animación de propósito clave está hecha. Véalo usted mismo presionando "Ctrl + Enter".

Paso 44:

La animación no es del todo fluida. Necesitamos una animación suave. Entonces, de nuevo, ingrese cada símbolo principal donde haya colocado fotogramas clave y los haya animado. Arrastre y seleccione todos los cuadros. Abra la pestaña de propiedades y cambie el tipo de Tween de "ninguno" a "movimiento". Todos los fotogramas se volverán de color púrpura claro y las flechas apuntarán de fotograma clave a fotograma clave. Haz esto para todas las partes.

Paso 45:

Presiona "Ctrl + Enter" y verifica la vista previa. Ahora puedes ver que la caricatura camina sin problemas, pero hay muchos errores. Las juntas no se siguen, por lo que cada parte móvil está casi flotando de forma independiente. Eso sí, no están muy lejos de sus posiciones adecuadas. Ahora necesitamos arreglar esas cosas paso a paso..

Paso 46:

Vamos a arreglar eso entonces. Este proceso se llama "en el medio". Coloque un fotograma clave entre dos fotogramas clave, especialmente cuando las partes están demasiado alejadas una de la otra. A veces, nunca es necesario usar intermedios, ya que las partes se mueven exactamente como lo prefiere. En algunos casos, es posible que necesite modificar casi todos los cuadros.

Vamos a ver la interpolación de la "pierna derecha". En el cuadro 5, las partes están muy alejadas unas de otras. Presiona "F6", seleccionando todos los cuadros. Ahora sigue ajustando, hasta que la pose sea como debe ser. Asegúrese de haber superpuesto bien las juntas para que los bordes desnudos no sean visibles.

Paso 47:

Scrub a través de la animación. Todavía hay muchos marcos donde los bordes salen de la articulación. Hacer fotogramas clave, modificar y corregir esos. Haga esto para cada parte. Esto puede llevar algo de tiempo y se necesitará paciencia. Una vez hecho esto, previsualizar la animación.

Paso 48:

Ahora los movimientos de la mano y la pierna son correctos, pero el cuerpo parece rígido. También es necesario dar un poco de movimiento al cuerpo y lo mismo debe aplicarse a las manos. De lo contrario, el hombro no estará en su lugar. Seleccione las capas "cuerpo y cara" y "mano derecha", copie los marcos, haga un nuevo símbolo "movimiento del cuerpo" y pegue los que están dentro. Ahora coloca el resultado en lugar de las dos capas, como hiciste muchas veces antes. Estamos excluyendo "mano izquierda" porque esa capa rara vez es visible.

Paso 49:

Cree fotogramas clave en los mismos marcos que los objetos clave. Coloque el pivote de este nuevo símbolo en el mismo lugar que hizo para el torso. Antes de comenzar a animar, recuerda que cuando estiramos las piernas hacia adelante, nuestro torso también se inclina hacia delante. Cuando levantamos una pierna del suelo, nuestro cuerpo se dobla hacia atrás. Así es como nos balanceamos mientras caminamos..

Paso 50:

Coloque el torso girando el símbolo, luego agregue la interpolación de movimiento a los cuadros. Un consejo adicional aquí: puede utilizar la pestaña de transformación para ver, configurar y modificar el valor de rotación.

Paso 51:

Compruebe la vista previa y ajuste los valores si es necesario.

Paso 52:

Para afinar aún más la animación, estire el torso un poco hacia abajo y muévalo un poco hacia arriba en otras posturas (posición de pierna arriba). Esto agregará más dinámica a la caminata. Compruebe la vista previa; tu animación en bucle está lista.

Paso 53:

Ahora seleccione todas las capas de caricatura, conviértalas en un solo símbolo y, por lo tanto, también en una sola capa. Nómbralos "Mr. Smart".

Paso 54:

Oculta la capa "línea de ruta" y conviértela en una guía. Diseña un fondo para hacer que la escena se vea más atractiva; He creado un fondo simple en mi archivo de animación..

Paso 55:

Actualmente, el Sr. Smart está caminando, pero no se mueve de un lugar a otro. Incluso eso también se puede hacer fácilmente. En el primer cuadro, mueva y coloque la caricatura a la izquierda, fuera del escenario. Extienda la duración de la animación al cuadro 96. En el cuadro 96, presione "F6" y conviértalo en un cuadro clave. En este marco, mueva la caricatura horizontalmente hacia el lado derecho, nuevamente fuera del escenario. Añadir interpolación de movimiento a la capa.

Paso 56:

Consulta la vista previa de la animación final.!

Gracias por seguir este tutorial, espero que hayas aprendido algo valioso.!