Cómo utilizar la herramienta Hueso en Adobe Animate

En Adobe Animate la herramienta hueso sirve para formar Esqueletos, que sirven para animar formas o conjuntos de símbolos de forma sencilla (aunque bastante limitada en algunos aspectos).

En rellenos

Para utilizar la herramienta hueso en formas haremos clic en el que queramos que sea su punto central y arrastraremos hasta donde queramos que tenga el primer (cosa que gira) y nos creara una nueva capa de Esqueleto. En donde termina el primer hueso se traza el siguiente y así sucesivamente hasta llegar al ultimo hueso.

En la barra de tiempo podemos incuir poses que animate interpolará automaticamente.

 

 

En símbolos

Los huesos con símbolos funcionan de forma diferente a los rellenos. Para usarla trazamos el primer hueso desde el que queramos que sea el símbolo principal hasta otro símbolo. Un hueso puede unir un símbolo con muchos otros, pero no pueden unirse varios huesos a un mismo símbolo.

En la barra de tiempo podemos incuir poses que animate interpolará automaticamente.

Cómo hacer una rotoscopia en Adobe Animate

Una rotoscopia es un método de animación que consiste en calcar los fotogramas de un vídeo. Se utiliza para conseguir movimientos más realistas.

Para hacer una rotoscopia en Adobe Animate necesitamos importar un vídeo. Para poder trabajar con un vídeo visualizándolo en la barra de tiempo necesitamos convertirlo a formato FLV, para ello podemos usar esta página.

        

Importamos el vídeo, seleccionamos la segunda opción y lo arrastramos a la barra de tiempo.

 

Hacemos clic derecho en la capa en la que está y ajustamos la opacidad si es necesario a una que nos sea cómoda para calcar o escogemos un color que resalte respecto a la imagen (Si la imagen es muy oscura utilizar blanco, si es principalmente verde utilizar rojo, etc.)

En una capa superior calcamos los bordes del personaje o el objeto haciendo un esbozo, desplazándonos entre los fotogramas con "," o ".".

Una vez rotoscopiados todos los fotogramas necesarios, se hace una limpieza de los esbozos en una capa superior.

Animación con Adobe Animate | Prinicipios adicionales de la animación | Smears

Además de los 12 principios de la animación originales existén algunos más que se han ido desarrollando con los años, en este caso comentaremos el "smear".

En la animación 2D se conoce como smear a un tipo especial de interpolación. En ellos se presenta una gran deformación del objeto (estirándolo o duplicándolo), pero al tener una duración muy corta no se llegan a apreciar directamente. El efecto es similar al desenfoque entre los fotogramas que graba una cámara de vídeo con poca velocidad de obturación (motion blur).

"Smear" en la vida real (motion blur). Tomado de Wikipedia.

Con este principio evitamos hacer varios fotogramas con la interpolación exacta entre los fotogramas, lo que nos puede ahorrar mucho tiempo. Por esa razón se suele incluir esté principio dentro de la animación limitada, sin embargo, no es extraño encontrarla dentro de animaciones completas.

Existen dos tipos básicos de smears:

Smear de estiramiento

Su realización depende mucho de la animación, pero básicamente se trata de activar el papel cebolla y entre el fotograma inicial y final hacer un dibujo que, en lugar de una posición intermedia, sea un alargamiento entre el dibujo inicial y final. Luego entre el fotograma del smear y los extremos se duplican los extremos y se mueven ligeramente hacia el smear.

Los extremos y el smear estirado

Smear de repetición

Su realización es igual a la del estiramiento, pero en lugar de un estiramiento es una fusión de todos los fotogramas intermedios que debería tener entremedias. Este es un poco más complicado de hacer que el anterior, pero suele dar mejores resultados.

Los extremos y el smear repetido

Animación con Adobe Animate | 12 principios de la animación | Índice

Los 12 principios de animación son unas reglas básicas que se deben de seguir para cear animaciones más realistas. Estos principios ayudan a crear una ilusión de que los personajes y los objetos obedezcan a leyes físicas.

Hemos recogido, explicado, y puesto ejemplos de cada uno de los principios en diferentes entradas del blog:

1. Estirar y encoger
2. Anticipación
3. Puesta en escena
4. Animación directa y pose a pose
5. Acción continuada y superposición
6. Entrada y salida lenta
7. Arcos
8. Acción secundaria
9. Ritmo
10. Exageración
11. Dibujos sólidos
12. Appeal 

Estos principios fueron descritos por los animadores de Disney Ollie Johnston y Frank Thomas en su libro The illusion of life.

Animación con Adobe Animate | 12 principios de la animación | Appeal 12/12

Mal appeal

El principio de appeal (lo que puede ser traducido como algo similar a atractivo o carisma) se refiere al diseño de los personajes, de como este comunica su personalidad, su simpleza y como resultan "interesantes" al espectador.

Aunque se pueda traducir como lo atrictivo o carismático que es un personaje, no tiene porque ser así. Un personaje malvado o un monstruo no suele ser atractivo o carismático, pero sí que pueden tener appeal, refiriendose a lo interesante que sea su diseño y las sensaciones que su apariencia transmita.

Animación con Adobe Animate | 12 principios de la animación | Dibujos sólidos 11/12

Este principio se refiere a que se debe de tener en cuenta que aunque sea una animación en 2D lo que está representando (en la mayoría de los casos) es un mundo tridimensional, por lo que se debe dar a las formas una sensación de profundidad, volumen y peso.

Si se tiene un dibujo sólido, aparte de verse mejor, la animación de las partes será más sencilla, ya que se sabe con mayor precisión que movimiento hará.

Ejemplo

Este efecto se aplica a los personajes. En lugar de dibujarlos pensando en ellos como una figura plana, se deben de dibujar pensando en ellos (y tomando como guía) figuras tridimensionales.

Animación con Adobe Animate | 12 principios de la animación | Exageración 10/12

El principio de exageración se refiere al hacer más brusca una acción para que no parezca estática y aburrida.

La exageración  puede darse en distintos grados, desde hacer que una cara asustada abra mucho la boca hasta hacer que a un personaje le salgan los globos oculares de las órbitas, todo ello depende del estilo de la animación.

No es recomendable abusar de la exageración en una misma escena, ya que puede causar confusión en el espectador, debe existir un equilibrio.

Ejemplo

Un ejemplo de exageración muy reconocible se da en las expresiones faciales de los personajes. Si está contento, en lugar de que tenga una pequeña sonrisa podemos hacer que enseñe todos los dientes y tenga las mejillas muy levantadas. Y si queremos hacer que un personaje esté enfadado, en lugar de hacer que frunza el ceño podemos hacer que las cejas estén muy diagonales, que se hagan arrugas en la frente o incluso dibujarle venas.

También depende mucho del estilo de la animación, pero generalmente esos detalles puedes hacer que la animación sea más atractiva visualmente y divertida de ver.

Animación con Adobe Animate | 12 principios de la animación | Ritmo 9/12

El principio de ritmo (timing en ingles) se refiera a la cantidad de celdas que se usan en una acción y la duración de cada uno. Este principio determina la velocidad de una acción y su fluidez.

Velocidad de una acción

https://www.dropbox.com/s/d47x9v7rfctjvf8/bolasrapidolento.swf La velocidad de una acción es determinada por la cantidad de fotogramas que tiene y la diferencia entre cada uno de ellos

Si una acción está compuesta de pocos fotogramas muy distanciados, esta será rápida y su duración será corta, mientras que si tiene muchos fotogramas poco distanciados, será lenta y de duración larga.

Fluidez de una acción

La fluidez de una acción está determinada por la duración de las celdas. Existen dos tipos de duración principales:

Animación en unos

En este tipo de animación las celdas duran un fotograma. Se ve más fluida que la "en doses" y es mucho más recomendable en acciones rápidas.

Animación en doses

En este tipo de animación las celdas duran dos fotogramas. Se tienen que dibujar menos que la "en unos" y en algunos casos la diferencia de fluidez no se aprecia. También es recomendable usarla en acciones lentas, ya que la "en unos" tiende a hacer que los bordes tiemblen.

Animación con Adobe Animate | 12 principios de la animación | Acción secundaria 8/12

Este principio se refiere a las acciones secundarias, acciones que complementan a la principal y surgen a partir de está. Sirven como apoyo de la acción principal, pero se debe evitar que éstas la eclipsen, desviando de ella la atención.

En los personajes, las acciones secundarias pueden ser por ejemplo mover las manos (acción secundaria) mientras habla (acción principal) o rascarse la cabeza (acción secundaria) mientras camina (acción principal).

Animación con Adobe Animate | 12 principios de la animación | Arcos 7/12

Este principio se refiere a que la mayoría de los movimientos tienen una trayectoria arqueada y con curvas en lugar de angulares y lineales. Si no se aplica este principio, especialmente en los movimientos de los personajes, las acciones tienden a verse poco naturales. Además, cuando en un movimiento se gira un objeto, interpolarlo de forma lineal sin arquearlo hace que sea más corto en los fotogramas intermedios.

No se aplica a movimientos muy fuertes o a algunos mecanismos, ya que su trayectoria suele ser recta o con un arco inapreciable.

Ejemplo

Para que realizar los arcos es recomendable utilizar guías como arcos o circunferencias y hacer los movimientos siguiéndolas

La interpolación de esos fotogramas es mejor hacerla sobre una guía curva.

 El principio en acción

Animación sin arco

Animación con arco

Animación con Adobe Animate | 12 principios de la animación | Entrada lenta y salida lenta 6/12

Este principio se refiere a la aceleración y la desaceleración de los objetos al moverse, los cuales se mueven más despacio al empezar a moverse y antes de frenar que en el tramo intermedio. Para ello se crean más interpolaciones en los fotogramas de los extremos, así al tener menor distancia entre uno y otro se reduce la velocidad en esos puntos. Sin este principio muchos movimientos tienen a parecer "mecánicos", ya que su velocidad es constante.

En algunos casos no se puede aplicar este principio o parte de él, por ejemplo, no tendría sentido que una bala saliese lenta de un arma y fuera cogiendo velocidad, ni tampoco que una pelota que se lanza, antes de chocar con una pared empiece a frenar.

Ejemplo

Este efecto puede representarse fácilmente con un péndulo.

Al comenzar a a bajar y antes de llegar hasta arriba
hay menos espacio entre cada fotograma (menor velocidad)
y en el tramo intermedio los fotogramas están más
distanciados (mayor velocidad)

 El principio en acción

Animación sin entrada y salida lenta

Animación con entrada y salida lenta

Animación con Adobe Animate | 12 principios de la animación | Acción continuada y superposición 5/12

Este principio se refiere a como los objetos unidos a otros se mueven con cierto retraso respecto al objeto principal. Aplicando este principio, las partes superpuestas de un objeto no se detendrán a la vez que él, continuarán moviéndose después de que este se pare.

A la hora de animar, se suele hacer primero el personaje o el objeto principal con animación pose a pose, una vez hecho se hace encima el objeto superpuesto (pelo, capas, antenas, etc.) unido a él con animación directa y se animan unos fotogramas extra después de que el objeto principal se detenga.

Los objetos superpuestos tomarán la dirección que tuvo anteriormente el objeto principal.

Cuando el objeto superpuesto es lacio (por ejemplo el pelo) o está dividido en segmentos (por ejemplo un brazo), la parte más cercana al objeto principal se moverá con menos diferencia respecto a la base, mientras que la parte más alejada lo hará con mayor libertad.

Ejemplo

Este principio suele usarse mucho en determinadas partes de los personajes como el pelo o la ropa. Si no se usa este principio, parece que son rígidas o están pegadas al cuerpo.

El principio en acción

Animación sin acción continuada y superposición

Animación con acción continuada y superposición

Animación con Adobe Animate | 12 principios de la animación | Animación directa y pose a pose 4/12

Este principio se refiere a dos técnicas de animación, Animación directa y pose a pose

Animación pose a pose

En esta técnica, se dibujan primero las poses principales, luego se dibujan entre ellas las secundarias y luego las intermedias entre las secundarias, así hasta que se cubran todos los fotogramas planificados.

Lo bueno de este sistema es que da mucho control sobre las acciones de los personajes, mientras que en la animación directa es bastante impredecible y puede tender a aumentar o disminuir el tamaño de los personajes a lo largo de la acción.

También es mucho más fácil ver y corregir los errores en la animación pose a pose que en la directa.

Animación directa

En esta técnica se van dibujando las poses una tras otra.

Este sistema no se suele usar en personajes ya que es muy impredecible, pero es muy útil en efectos como fuego, fluidos, explosiones, etc. y en el principio de acción superpuesta.

Animación con Adobe Animate | 12 principios de la animación | Puesta en escena 3/12

El principio de puesta en escena (staging en inglés) es muy amplio, pero básicamente se refiere a como debe ser la disposición de los personajes y los objetos en una animación para que el espectador pueda entender bien las acciones.

Un aspecto importante de una buena puesta en escena es que las acciones deben de transcurrir en orden y tener algo de tiempo entre ellas. Si durante la acción principal hay otras acciones secundarias, estas pueden confundir al espectador y hacer que no se fije en la principal. También, el tener espacio entre cada acción, da tiempo al espectador para entenderlas.

 

Cámara

La cámara tiene mucha importancia dentro de este principio y se deben de seguir algunas normas para conseguir una buena puesta en escena. En estos ejemplos, la acción principal sería un personaje caminando

Puede variar según la necesidad, pero normalmente se no se debe hacer un zoom muy alejado de donde esta ocurriendo la acción.

Tampoco se debe hacer que la acción principal transcurra en el borde de la escena, a no ser que la acción esté dirigida hacia el lado contrario.

 

En esta situación una buena puesta en escena sería hacer un zoom en el personaje, pero no demasiado cerca para dejar que se vea el escenario y situarlo en el centro de la escena.

Apariencia

Otro factor importante de la puesta en escena es la apariencia de las acciones o de los personajes u objetos. 

Por ejemplo, si un personaje camina contento es mejor hacer que vaya caminando de forma alegre o con saltitos en lugar de hacer simplemente que sonría, ya que se transmite mejor la idea de que el personaje está contento. Y si un personaje es rico, es mejor hacer que vista elegante y que esté bien peinado, ya que así se dará a entender mejor que tiene mucho dinero.

Animación con Adobe Animate | 12 principios de la animación | Anticipación 2/12

El segundo principio es la anticipación. Se refiere a cuando un personaje, antes de realizar la acción principal, se mueve ligeramente en la dirección opuesta. Esto añade más fuerza y credibilidad a la acción principal al tener un impulso inicial y hace que el observador se prepare para la acción principal. Para acciónes complejas se pueden realizar anticipaciones de las anticipaciones

Ejemplo

Una forma facil de explicar este principio es el de un personaje dando un puñetazo.

Se hace la pose inicial

Se hace la pose final

Entre la inicial y la final, se hace la
pose en la que el personaje se anticipa

Se hacen los fotogramas intermedios

 El principio en acción

Animación sin anticipación

Animación con anticipación

Animación con Adobe Animate | 12 principios de la animación | Estirar y encoger 1/12

Una buena forma de conseguir que las animaciones se vean más fluidas y profesionales es seguir los 12 principios de la animación.

El primer principio, Estirar y Encoger (Squash & Stretch en inglés), es el más importante de los 12 principios de la animación. Se refiere a que los objetos que no son rígidos (como un balón o el cuerpo humano) tienden a estirarse y encogerse mientras se mueven. Por ejemplo, debemos aplicar este principio a una pelota de baloncesto rebotando, pero no a una bola de bolos, ya que es completamente rígida y no tendria sentido (a no ser que el estilo de la animación lo requiera). Cuando un objeto se estira o se encoge no varia de volumen, solo altera su forma.

Tambien se utilizan en expresiones faciales, por ejemplo, un personaje sorprendido se estirará, mientras que uno enfadado se encogerá.

Ejemplo

La forma más sencilla de mostrar este principio es el de una pelota rebotando.

La pelota inicialmente no esta estirada ni encogida.

Al aproximarse al suelo se va estirando.

Al llegar al suelo, se encoge por por el golpe.

Al rebotar, vuelve a estirarse.

Recupera su estado inicial.

El principio en acción

Animación sin Squash & Stretch

Animación con Squash & Stretch

Animación con Adobe Animate | Crear un corto animado | Animación 7/12

Una vez tengamos preparado el animatic y los fondos, empezaremos a animar, pero antes de eso conviene conocer algunos conceptos.
En la animación 2D existen 2 métodos principales:

Animación completa

Este tipo de animaciones se suelen dibujar todos los fotogramas de una acción, ya sean de uno en uno o de dos en dos.

Ventajas

• Es estéticamente mejor que la limitada
• Permite un gran control de la accione de los personajes
• Uso de efectos especiales (fuego, fluidos, explosiones, etc)

Desventajas

• Lleva mucho tiempo
• Es más complicada de realizar
• Es difícil usar dibujos complejos o imágenes, ya que habría que dibujarlo varias veces.

 

Animación limitada

En este tipo de animaciones se simplifican los movimientos para reducir el tiempo y los costes de producción. Si se habla de animación digital, en este método se suele recurrir mucho a símbolos y a movimientos automatizados.

Ventajas

• Se ahorra en tiempo
• Es más fácil de realizar
• Permite usar dibujos complejos e imágenes, ya que no será necesario dibujarlo varias veces

Desventajas

• Suele ser estéticamente peor que la compleja
• La acción de los personajes es muy limitada
• Complica el uso de efectos especiales (fuego, fluidos, explosiones, etc)

 

Animación mixta

En muchas ocasiones, se combinan características de ambos métodos. Por ejemplo, se puede usar animación limitada en una escena de dialogo y animación completa en una de acción como una pelea o una persecución.

 

12 Principios de la animación

Una buena forma de conseguir que nuestras animaciones se vean más fluidas y profesionales es seguir los 12 principios de la animación, las cuales nombraremos y describiremos con ejemplos en futuras entradas.

 

Conceptos básicos para animar en Animate 

Las animaciones suelen hacerse primero en esbozo y luego en otro paso se hace la limpieza. Lo primero es hacer el esbozo de la primera postura del objeto a animar en un fotograma en blanco.

Luego se crea un nuevo fotograma y se activa el papel cebolla (que muestra el fotograma anterior con poca opacidad) para dibujar la postura final.

Entre el fotograma inicial y final se dibuja otro fotograma.

Y se hace lo mismo para el resto, se dibujan fotogramas usando como guia el anterior y el siguiente.

Para visualizarla vamos a Control/Probar o pulsamos Ctrl+Intro. También podemos visualizarla en la linea de tiempo dándole al icono de play debajo de la linea de tiempo o pulsando la barra espaciadora. Si queremos que se reproduzca haciendo un bucle, pulsamos el icono de bucle debajo de la linea de tiempo y lo ajustamos a los fotogramas que se quieran repetir.

Animación con Adobe Animate | Crear un corto animado | Idea principal y guión 1/12

Antes de empezar a hacer el guión de un corto es conveniente tener una idea general de lo que será la historia, como empieza, como se desarrolla y como se acaba, todo ello sin entrar en detalles.

Una vez tengamos esa idea principal podemos hacer el guión, que es donde se incluye en forma escrita todo lo que ocurrirá en el corto (acciones, diálogos, escenarios, transiciones, etc.). Es igual que el de las películas.

Para hacer el guión podemos escribirlo en papel o usar cualquier programa de edición de textos, de hecho, existen aplicaciones especializadas en la creación de guiones.

Tomado de Wikipedia

Los guiones cinematográficos tienen un formato específico y es conveniente seguirlo para tener toda la información más organizada, sea más sencillo hacerle cambios y, en el caso de que estemos escribiéndolo junto a otras personas, estar mejor coordinados.

Cada parte tiene una alineación, formato de letra y tabulación determinado. Cada vez que se empieza una escena, se escribe si esa escena transcurre en "EXT" (exterior) o "INT" (interior), seguido del nombre del lugar y al final, el momento del día. Los nombres de los personajes se ponen en mayúsculas y están en el centro, en la siguiente linea va la acotación entre paréntesis (es una explicación de lo que están haciendo los personajes y/o como hablan, pero no siempre es necesaria) y después el diálogo.
Cuando la escena cambia de una a otra se icluyen transiciones arriba a la derecha antes de escribir la escena.




Si el proyecto va a tener una duración muy corta es probable que no vayamos a necesitar el guión y nos baste con tener escrita la idea principal, la cual desarrollaremos en el storyboard.

Animación con Adobe Animate | Crear un corto animado | Fondos 6/12

Para que los personajes de nuestra animación no actúen en el vació necesitamos incluir fondos detrás de ellos, pueden ser dibujados, ser solo un color o hasta ser una fotografía.

Para dibujar los fondos en Animate, se crea un nuevo símbolo y dentro de él se utiliza como referencia el esbozo del fondo que se hizo en el storyboard y se dibuja sobre él, usando herramientas como pincel, lápiz o línea (dependiendo del estilo que se quiera conseguir). Normalmente o se hacen primero todos los bordes de el fondo o se van rellenando con colores grises y finalmente se colorean rellenando con el bote de pintura o seleccionando el relleno y cambiándole el color con la ventana "color".

A veces, cuando en la escena se esta moviendo el personaje durante un tiempo o a mucha velocidad, se suele hacer que el fondo se repita. Para ello, hay que hacer que los extremos derecho e izquierdo (o superior e inferior si se esta moviendo verticalmente) coincidan. Luego se juntan y se animan como un solo símbolo.

En algunas escenas en las que la cámara se mueve, se suelen dividir los fondos en distintas capas según su cercanía respecto al observador, y animarlas a distintas velocidades para lograr un efecto de paralaje que de la ilusión de profundidad. Un ejemplo de esto es que el personaje esté caminando delante de un bosque con unas montañas detrás. Mientras la cámara avanza hacia la derecha siguiendo al personaje, los árboles se van dejando atrás más rápidamente que las montañas, esto da la ilusion de perspectiva.

Si la cámara está estática (por ejemplo, enfocando a un personaje que esta caminando
continuamente, como es el caso de la animación de arriba), se tendrán que mover más
despacio la capas más alejadas y más rapido las más cercanas.

Si la cámara se mueve, se deben de animar las capas en relación con los movimientos de la cámara. Si la cámara se desplaza en una dirección, la capa más alejada tendrá que moverse en la misma dirección a una velocidad un poco más lenta, en cambio, si es la capa más cercana, tendrá que moverse en la misma dirección a una velocidad muy lenta o directamente no moverse. Para las capas intermedias entre éstas, irán en la misma dirección pero a distintas velocidades, siendo la capa más rápida mientras más lejos esté. Esto consigue el efecto de que las capas más alejadas se muevan menos y las más cercanas se muevan más, dando la sensación de que el fondo tiene profundidad.

Si el fondo no se realiza en Animate, para importar la imagen en la animación se va a "Archivo/Importar..." se selecciona la imagen del fondo y se le da a aceptar. Una vez en nuestra librería la arrastramos hasta el escenario, le cambiamos el tamaño si es necesario y la transformamos en un símbolo pulsando F8. Si el fondo cosiste en varias capas, se exportan por separado, se importan en Animate y se reúnen todas en un mismo símbolo en capas separadas. Para que Animate al exportar el archivo no baje la resolución de la imagen, hacemos clic derecho en la imagen dentro de la librería y vamos a propiedades CONTINUAR

Animación con Adobe Animate | Crear un corto animado | Animatic 5/12

Un animatic es parecido a un storyboard (de hecho se hace directamente a partir de él), pero en éste se representa la duración de las acciones, el movimiento (pero sin animar) de los personajes, los objetos y la cámara. También se suelen introducir las voces de los personajes. Sirve para ver como quedará la animación final y para usarla como guía al animar.

Para hacerlo en Animate, se estira el fotograma en el que esté el fondo el tiempo que queramos que dure ese plano y colocamos los fotogramas con los esbozos de las acciones de los personajes y los objetos en los tiempos adecuados para que su continuidad y duración sean correctas.

Para hacer que un personaje u objeto se mueva de un sitio a otro se convierte su esbozo en un símbolo, se lleva a una capa nueva, se crea otro fotograma clave en el que se coloca en su posición final y se crea una interpolación clásica entre los dos fotogramas. Ya que solo es el animatic, no es necesario hacer muy detallado el movimiento

Una vez hecho se puede exportar el swf y transformarlo a vídeo para verlo y tener ya una visión preliminar de lo que será la animación final y ver que se podría corregir.