Setting up Mouth Shapes Using Auto Lip-Sync

Setting up Mouth Shapes Using Auto Lip-Sync
Adobe Products Featured

Imagine a character animation that requires lip syncing. Creating a great-looking mouth is a challenge, but at the same time it is equally challenging to animate and sync it up with the narration. Adding a lip sync to the animation enhances its quality and storytelling.

Adobe Animate provides a flawless solution to tackle this situation. Now, you can match mouth poses to sound reflections automatically with Adobe Sensei-powered Animate.

Auto lip sync allows an easier and faster method of mouth positioning on the timeline based on the chosen audio layer. Keyframes are automatically created at different positions matching the audio visemes. Viseme is a generic facial image used to indicate sound. You can make further adjustments using regular workflows and Frame Picker.

What you’ll need

Video

  • Watch this video to learn how the output of Bird_LipSync.fla file appears in Adobe Animate.

1. Create a graphic symbol (mouth pose).

Within the graphic symbol, you can draw all the mouth poses/visemes.

2. Create instances for the symbol selected.

Select a layer on the timeline and create instances for the symbol.

Note: For information on how to create instances for a symbol, see this link.

 3. Add audio.

Import an audio in a new layer.

4. Lip sync the symbol.

Select the graphic symbol. In Property Inspector, click Lip Syncing.

Lip syncing dialog appears with 12 basic types of visemes.

5. Map poses for the symbol.

Click on viseme to modify its mouth pose mapping.

A pop-up appears with all the poses inside the graphic symbol. Select a frame from the pop-up menu and set it for the current viseme.

6. Synchronize audio and the symbol.

Select the audio layer for which the lips are to be synced. Click the Sync button listed under Properties.

7. View the output.

You can view the animated file with auto-generated mouth movements that are synced with the sound file.

Press Ctrl+Enter to run the file and preview the output.

For a step-based video tutorial on how to use auto lip sync, see this link.

Hope this blog post helped you learn how to use auto lip sync in Adobe Animate.

For information on latest features in Adobe Animate, see What’s New in Animate CC.

Recommended Articles