Lipsyncing Resources

Justin | animation,Flash,links | Wednesday, June 20th, 2012

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:

  1. Store the common mouth shapes (aka phonemes aka visemes) in a symbol (or symbols).
  2. 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.

Chris Georgenes

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.

Books

In addition to Chris’ online tutorials, he’s written some fantastic books, one of which I was lucky enough to co-author with him.

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.

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

Other Resources

Anything that didn’t fit into the above categories is down here.

Please feel free to share additional resources in the comments!

Article Round-up

Justin | articles,design,Flash,links,tips | Tuesday, October 19th, 2010

We’re keeping quite busy around here! Here’s a quick round-up of some recent articles that I’ve published.

5 Flash Animation tips in 5 days on the Peachpit blogs:

Also on the Peachpit site, there’s an excerpt on Character Animation from our recent book with Chris Georgenes.

I also have a new video tutorial over at ActiveTuts+ on Creating Advanced Motion Presets in Flash with JSFL.

In addition to the recent advice page I added on Learning Flash, I’m working on a page about becoming a graphic designer/Flash animator/digital artist. It includes some of my background and lessons learned. That article is pretty much on hold as we work toward the SmartMouth release (hopefully just another week), and I will pick it up after that.

Adobe Flash Learning Links

Justin | design,Flash,links,tips | Friday, August 20th, 2010

I’ve had a number of users contacting me regarding ways to learn Adobe Flash Professional. There are a lot of great resources available for users interested in animation, design, and development in Flash.  Whether you’re an advanced user, or totally new to Flash, there are tons of resources available. Over the years, I’ve read dozens of books and visited hundreds of sites. So, I decided to put together a single page with many of my favorite Flash learning links. Enjoy!

Merge Textframes for InDesign Featured on Lynda.com

Justin | InDesign,links | Friday, May 1st, 2009

I just saw that David Blatner has featured my Merge Textframes script on his Lynda.com course, InDesign CS4: 10 Free Must-Have Scripts. I highly recommend David Blatner’s Real World books if you’re looking to go from knowing a topic/application fairly well to becoming an expert. I’ve read ten of thousands of pages in software and design books and David Blatner’s books have been among the best. It’s very cool to see something I made appear on Lynda.com (also a great resource) and it’s twice the honor to have it posted by David Blatner.

Look Ma, I’m on the Internets!

Justin | links,Misc,nerdy | Monday, April 6th, 2009

The bona fide internets, even. I’m in the Adobe Developer Spotlight this month.

Page 1 of 41234