Personaje y lipsync en Animate

 Lipsync en Animate CC

Una vez que ya tengamos las bocas correspondientes de nuestro personaje para cada sonido que emitirá, podremos seguir con la animación de lipsync en Animate.

Para pasar nuestro personaje a Animate CC, es necesario crear una escena, en este caso, la escena será de 600px por 480px del tipo ActionScript 3.0 que nos permitirá insertar código dentro de nuestro archivo para que este funcione como un interactivo.

Estando en la primera escena, importaremos nuestro personaje con sus respectivas bocas, para esto es importante recordar que es necesario que cada boca esté en una capa diferente.

Ahora, en Animate CC, seleccionaremos Archivo > Importar > Importar a escenario.

Al seleccionar nuestro archivo de Illustrator, se desplegará una ventana que nos dejará visualizar las capas que se importarán a nuestro escenario en Animate, marcaremos el recuadro de las capas que queramos que se importen y las importaremos como en un formato de separación de capas en Animate.

Al haber importado nuestro personaje, Animate creará las capas en orden automáticamente. Inmediatamente después de tener las capas y un primer fotograma, bloquearemos la capa del cuerpo para que no sea un símbolo gráfico y seleccionaremos todas las bocas de nuestro personaje.

Seleccionaremos el primer fotograma de cada boca y los cortaremos, posteriormente iremos a Insertar > Nuevo símbolo y crearemos un símbolo gráfico para las bocas.

Dentro del nuevo símbolo creado, nos posicionaremos en el primer fotograma, daremos clic derecho y pegaremos los fotogramas que habíamos cortado de las bocas. Automáticamente se pegarán las bocas en capas individuales dentro de este nuevo símbolo.

Ordenaremos cronológicamente caga boca dentro de la línea del tiempo para darle una secuencia de animación inicial a las bocas.

Ahora, cada uno de los fotogramas necesita un nombre de etiqueta, esto para poder identificar más fácilmente con cuál boca estamos interactuando y cuál es la que posicionaremos en los diferentes fotogramas del lipsync. Nos colocaremos en cada uno de los fotogramas clave, iremos al panel de propiedades y ahí le daremos un nombre de etiqueta, al hacerlo el fotograma clave tendrá un ícono que nos indicará el nombre de etiqueta que le hemos asignado a cada boca.

Una vez teniendo estos nombres de etiqueta, regresaremos a nuestra escena principal, agregaremos las bocas a nuestro personaje desde la biblioteca en nueva capa, en donde se guardó el símbolo gráfico de bocas y lo colocaremos en donde debe ir la boca de nuestro personaje. Al pasar por la línea de teimpo, nuestra secuencia de bocas s e reproducirá repetidamente.

Ahora importaremos el audio, repetiremos la acción de Archivo > Importar > Importar a biblioteca y seleccionaremos nuestro audio, el formato de audio con el que Animate CC es complatible es .mp3 y .wav. Nuestro audio se guardará en la biblioteca, crearemos una nueva capa de nombre "Audio", nos colocaremos en el primer fotograma y en el panel de propiedades iremos al apartado de "Sonido" y seleccionaremos nuestro audio.

Para poder mostrar nuestro audio con la duración necesaria, basta con colocarnos en cualquier fotograma y presionar F5 para que el audio aparezca y se pueda reproducir a la hora de probar nuestro interactivo. 

Ahora solo queda sincronizar las bocas con el audio, para lograr esto iremos a Ventana > Selector de fotogramas y se desplegará un panel en el que podemos ver cada posición de la boca y el número de fotograma que se le asignó junto con su nombre de etiqueta.

Ahora solo queda posicionarnos en la línea del tiempo en el fotograma que tenga la posición del sonido que se está reproduciendo. Al posicionarnos en el fotograma específico, daremos clic sobre la posición de la boca que necesitemos dentro del selector de fotograma y automáticamente se creará un fotograma clave que tendrá esa posición dada. Así que ahora lo único que tenemos que hacer es sincronizar e ir seleccionando las posiciones de la boca manualmente.