How To Animate Talking Cartoons in Adobe Flash CC & CS6

How to Import Sound and Music into Flash:

  • Go to File > Import to Library… Select your file.
  • Open your Library window under Window > Library (Ctrl + L).
  • Create a New Layer, I usually name it “AUDIO.”
  • Extend the exposure by right-clicking down in the timeline and selecting Insert Frame. You can also use F5 to extend exposure.
  • Drag your sound from the Library onto the Stage (the area where you draw).
  • A waveform will appear in the timeline showing the audio has been added to your cartoon!

    Adobe Flash Waveform

    Imported audio on the timeline.

  • IMPORTANT: Make sure your imported sound is set to “Stream” under the Properties window! (Window > Properties, or Ctrl + F3)
    Set your audio to Stream

    Make sure to set your audio to Stream!

    This also allows you to ‘scrub’ the audio, meaning when you drag the playhead, you will hear the individual sounds of the audio, allowing you to lipsync each mouth shape!

Lipsync? What that mean?

  • Lipsyncing is the process of animating mouths so the cartoon animation matches what is being said in the recorded dialogue.
  • There are a handful of mouth shapes, which are called “Phonemes”.

    Phonemes Mouth Chart

    Phonemes. Save this image to use for your reference!

  • Each one represents different sounds we make when we talk. These are generally the same mouth shapes no matter what language is begin spoken!

Some guidelines when animating lipsync:

  • MOVE THAT JAW! We are not bad 90’s anime cartoons! (Not that there’s anything wrong with that.)
  • The top teeth do not move. They are attached to the skull.
  • Hold a closed mouth shape for at least 2 frames, so it will read.
  • Hold the last mouth shape for an extra 5-8 frames to make it look natural.
  • If you have lengthy audio, like in a music video, use an external audio editing program like Audacity to split the audio into scenes. You can also use it to remove noise and improve your recording!
  • Move your lipsync 2-3 frames earlier. This just makes it look better. The animation should happen before the sound happens. Think of it like light traveling faster than sound!
  • Animate to the vowels, or the sounds, NOT to how the word is spelled. This is called “phrasing” and will make your lipsync not look so chattery.

Click here to download the source animation file from this tutorial!

As always, if you have any questions when bringing your cartoon to life, please reach out to me! I’m always happy to help where I can! Spread the word and tell your friends about my work, I’d really appreciate the support! :)

Jesse J. Jones

About Jesse J. Jones

Hi, my name is Jesse J. Jones, and I create cute, unique, funny cartoons to help promote your business, explain ideas, and tell stories! I love teaching people how to animate and draw, and at the same time, encouraging it as a career!

One thought on “How To Animate Talking Cartoons in Adobe Flash CC & CS6

  1. OH MY GOSH, this is one of the most useful animation articles I have needed but rarely seen done so quick (mainly the chart) and well, to you sir (I assume you’re male), I tip my hat.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>