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.

Cómo importar un gráfico virtual en Adobe Animate

Adobe Animate trabaja principalmente con gráficos vectoriales, por lo tanto podemos importarlos dentro del programa y editarlos como si se trataran de un relleno. Si queremos, podemos convertir una fotografía o un dibujo usando Inkscape para importarlo posteriormente.

Para importarlos se hace como un archivo cualquiera, podemos ir a "Archivo > Importar" o arrastrar el gráfico hasta la biblioteca.

Al importarlo nos dará a elegir entre varias opciones sobre la distribución de los trazados. Si se trata de un simple "line art" es recomendable la primera opción.

Si hacemos clic en el gráfico varias veces podremos ver que Animate lo ha ordenado en grupos y objetos. Para convertirlo en una simple forma y poder editarlo hacemos clic derecho en el gráfico y le damos a "Separar", repetimos eso dos veces más.

Si arrastramos el cursor sobre el borde del trazado podemos comprobar que se comporta como una forma cualquiera.

Herramienta Cámara | Adobe Animate CC (Flash)

Anteriormente, si se quería hacer un efecto de movimiento de cámara en flash o en las primeras versiones de animate se tenia que recurrir a mover todos los símbolos del documento a la vez o utilizar un script. Pero ahora tenemos la herramienta "Cámara" que nos permite hacer movimientos, zooms y giros de la pantalla fácilmente.

Para aplicar una cámara a la linea de tiempo se selecciona la herramienta "Cámara" y automáticamente se añadirá una nueva capa a la linea de tiempo que contendrá la cámara.

 Mientras tengamos esa capa seleccionada aparecerá en la parte inferior del escenario un deslizable junto a unos botones.

 Con ese botón seleccionado el deslizable ajustará el zoom de la cámara.

  Con ese botón seleccionado el deslizable ajustará la rotación de la cámara.

La cámara funciona de forma similar a los símbolos, ya que se le puede poner interpolaciones de movimiento y algunos efectos de color.

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.

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

Un storyboard o guión gráfico es un conjunto de viñetas en las que se representa el guión escrito de forma gráfica, incluyendo un esbozo del fondo, los personajes, transiciones, movimientos de cámara, etc. acompañados también de aclaraciones escritas.

El storyboard está dividido en viñetas que representan planos de una escena determinada. Algunas plantillas incluyen, debajo de las viñetas, lineas en las que se pueden introducir diálogos, acotaciones, sonidos, etc.

Para hacer storyboards en Animate, se utilizan los fotogramas como viñetas. Dentro de cada una hacemos el esbozo de los personajes, fondo, objetos y aclaraciones en capas distintas para poder moverlos independientemente cuando creemos el animatic.

Para visualizar el flujo del storyboard, se reproduce reduciendo la velocidad de la animación a 1 o 2 fps para poder ver bien cada viñeta.

Animación con Adobe Animate | Crear un corto animado | Introducción

La mayoría de los cortometrajes animados que vemos en páginas web como YouTube están hechas con Adobe Animate (anteriormente llamado Flash).

Estos cortos llevan un proceso de creación más complejo de lo que parece. Desde la idea inicial hasta los retoques finales y la subida hay muchos pasos, todos ellos importantes.

Iremos subiendo una serie de publicaciones en las que explicaremos en pasos separados como realizaros.

Estos pasos estarán divididos en:

1. Idea principal y guión
2. Diseño de personajes
3. Storyboard
4. Voces
5. Animatic
6. Fondos
7. Animación
8. Limpieza
9. Color
10. Exportación
11. Edición y sonido
12. Publicación

Cómo convertir un SWF a vídeo

Al exportar un documento hecho con Adobe Animate, (ya sea una animación o un juego) se exportará en SWF.

Adobe Animate incluye la opción de exportar cómo vídeo, pero no es muy útil porque no procesa los clips de película y el código. Por eso lo mejor para tener un vídeo de una animación es exportarlo como SWF y convertirlo a vídeo

Para poder convertir un documento SWF utilizaremos un programa gratuito de Newgrounds llamado Swivel, el cual nos permitirá convertir los SWF a vídeos procesando los clips de película y el código.



Para usarlo, introduciremos los archivos SWF que queramos convertir haciendo clic en "ADD..." y seleccionándolos.
Una vez en la lista, podemos cambiar los ajustes o hacer clic en "CONVERT" para que esos archivos SWF se conviertan y exporten como un único vídeo.