How To Do Lip Sync Animation With Adobe Animate - FlexClip

Lip sync animation is a term used in matching the movement of the mouth or lips of an animated person singing or speaking. To apply any audio to an animated person is extremely technical, it requires a strong knowledge of the work, good software tools, a lot of drawings. For the lip sync to work, clay puppets, drawings, and electronic avatars (that cannot talk) are meshed when these characters need to say something. But before that, dialogues of those characters need to be analyzed and recorded before they are key-framed or animated into talking.

And because a software tool has a great role to play in this whole animation lip-sync process, you need a good tool to rely on, and that’s where Adobe Animate comes in. Adobe Animate multimedia software is designed by Adobe Inc. for designing quality vector graphics, online animation, video games, TV commercials, website applications, animation for TV, and more.

In another instance, Adobe Animate is a “one-stop choice” for those who want to make the best of animation. It has been named the best tool for publishing animated HTML5 Canvas, SVG animation, and WebGL content. You can also decide to publish a movie, making it suitable to be uploaded on platforms like Vimeo and YouTube.

How to Do a Lip Sync Animation

First, there are things you need before you get started:

a.Microphone.

b.Recording Software

Step 1 Record an Audio

This is where you record all the audios you wish to lip sync into those characters you have created using your microphone and your selected recording software.

Step 2 Draw the Shapes of the Mouth you will be Using

This is where you need to draw out all the mouth shapes you think you will be needing for your character throughout the animation. And make sure you convert each of them into a graphic symbol.

Step 3 Create Master Mouth Symbols

To achieve this, you need to first name all the mouth symbols according to the sound coloration of those mouths you drew:

Click on ‘Properties’, double click on the mouth symbol you have created.

A "Create New Symbol” dialogue box is expected to pop up.

Enter the name of the master symbol you want it to represent, and click ‘OK'.

Step 4 Drag Every Viseme to each Key-framed

Align each of the Mouth symbols in such a way that it is situated at the center of the stage. But you have to make sure that the mouth pose is organized within its Graphic Symbol (as in those mouth shapes you have drawn).

Step 5 Import your Audio File

This is when you need to import the pre-recorded audio file you want to integrate into the animated character(s). To do this:

Click ‘File’, scroll to “Import”.

Click on 'Import to Stage'

At the “Label” section, on Sync, select 'Stream', to listen.

Step 6 Choose Lip Syncing

Here is where you need to assign each of the Viseme to individual sound (avatar). To do this:

•Click “Lip Syncing”, automatically all the mouth shapes you have organized on mouth-symbol appears.

•Pick each mouth symbol according to the symbol name you gave it by clicking on them one after the other.

•And click 'Done'. And you are done.

How to Lip Sync | Adobe Animate Tutorial

Note When dragging the Viseme to each Key-frame, you will need to add frame labels to every keyframe to help you identify each mouth pose when you are ready to come back for it.

Bonus Tip: How to Do Voice-Over for Animated Figures

Voice-Over is a technique mainly used in the production of animated movies, video characters, etc. It is also deployed in filmmaking, theatre, radio, and TV production. This technique requires that the user reads from scripts, after which it will be transferred to different voice actors. There are much software that can serve this purpose, but we’d recommend FlexClip: the world’s best online software tool for voicing over animated figures for its ease-of-use, easy adjustment, HD video quality.

To do voice-over for animated figures, please refer to: Add Voice over to Video

Create a Video View Templates

The Bottom Line

Lip sync as we know it is fast augmenting as technologies continue to evolve. Adobe Inc. On their own side are also doing their part through their Adobe animate lip-sync tool. And remember, that you require an average level of creativity especially in drawing to make a good lip-sync animation. It is also worthy of note to add that aside from making good vice-over, FlexClip can also be used in adding transitions, adding animation, and adding background music. Give it a try!

FlexClip Editor /

Professional in video editing and video marketing, we’d love to give some constructive tips and tricks to help our users make fantastic videos.