I have a few conversions with people interested in SmartMouth recently that made me think it would be worth it to gather some lip sync resources for those who are new to animation. For those who are solely interested in character animation, especially those with a training in traditional animation, ToonBoom products (aff link) are a great option. You can find many tutorials with a simple Google search. For most everyone, IMHO, Flash is still a great application to be familiar with (even with the hubbub with Apple mobile browsers). Flash has a wide breadth of capability, and offers a nice gateway to familiarize oneself with other design tools. It’s also extensible, which makes it a great tool for creating custom workflows. So, this is a collection of resources to help with lip syncing in Flash. My goal is get this post up today in whatever state I have time for, then add and prune as needed over time. That way, those looking for resources at least have a place to start.
Here’s the super-simple breakdown of digital lipsyncing:
- Store the common mouth shapes (aka phonemes aka visemes) in a symbol (or symbols).
- Match the symbol on each frame with the audio heard on that frame.
We store the shapes within symbols to avoid the headache of redrawing thousands of frames. The resources that follow will show you the nitty gritty of those 2 steps.
I’ll start where it started for me. Chris was on top of it before everybody else…and he was kind enough to share his knowledge with the rest of us. I picked up my style of lip syncing in Flash from this Chris Georgenes tutorial, which I still highly recommend. Based on this technique (the first frame technique), I developed the FrameSync extension. Chris demonstrates FrameSync with his animation technique in the video recordings of his MAX 2010 in his MAX 2011 sessions.
In addition to Chris’ online tutorials, he’s written some fantastic books, one of which I was lucky enough to co-author with him.
- How to Cheat in Adobe Flash CS5: The Art of Design and Animation – A wonderful resource. Keep this handy next to the desk where you animate.
- Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques (buy from Amazon) Not only do Chris and I cover lipsyncing (all 3 Flash techniques) in this book, we’ve also got a chapter that includes creating script that generates new symbol that is ready for lipsyncing
- Pushing Pixels (pre-order) – Will be Chris’ latest book. It covers his entire workflow, including lipsyncing.
Also, to get the basics of animation in general, I highly recommend getting your own copy of The Animator’s Survival Kit.
Tutorials from Around the Web
The web is full of great tutorials. If you’ve got other ones you like, posted them in the comments and I’ll add them to this list.
- YouTube video demonstrating the graphic swap technique.
- Written tutorial demonstrating the first frame technique.
- A general tutorial on the power of the Graphic symbol.
Lip Sync Tools from Ajar Productions
As I mentioned above, I love the ability to extend Flash, improve the workflow, and share it with others. Here are some tools I built to help with lipsyncing:
- SmartMouth – This extension analyzes your audio and automatically add mouth shapes to your timeline. There’s a tutorial on the Adobe Developer Center.
- FrameSync – Our original lipsync extension, with improvements. See Chris’ MAX videos above to view this tool in action.
- FrameScrub – A newer incarnation. Super simple. Some people might prefer this implementation over a Flash panel (like FrameSync).
Tools from Others
- Keyframe Caddy – Nice, simple thumbnail extension (video demo).
- Animonger’s AnimSlider is a classic.
Anything that didn’t fit into the above categories is down here.
Please feel free to share additional resources in the comments!