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.

• 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.

Other Resources

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

• Character and Mouth Packs for Animation

Please feel free to share additional resources in the comments!

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:

• Flash Animation Five Tips in Five Days: Tip 1 – Easing
• Flash Animation Five Tips in Five Days: Tip 2 – Distribute to Layers
• Flash Animation Five Tips in Five Days: Tip 3 – Bitmap Masking
• Flash Animation Five Tips in Five Days: Tip 4 – SWF History
• Flash Animation Five Tips in Five Days: Tip 5 – Targeting Nested Symbols with ActionScript

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.

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!

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.

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

Even though the economy is completely haywire, parts of the community have proved to be very reliable. Aaron Simpson at ColdHardFlash is offering help for animators seeking work, and Adobe is offering a free copy of FlexBuilder to members of the community who are unemployed.

Kudos to both of them. Hopefully more organizations will follow suit.

Nuff said. Check it out on the Summit Projects Flash Blog.