ADVICE on simple mouth movement

[eyegrabbing]

Hi- I've animated some catoon-like characters and want to synch mouth movements with voice. What's a good repetion of shapes to use for the mouth? This is simple stuff, like the Simpsons (but not as simple as say South Park). Are there are good tutorials on this or fla's to look at.
Thanks.

If anyone wants to check out my first stuff, please see
http://www.earthlink.net/~eyegrabbing.

[JohnnySix]

Use a mirror, it's what I've done for some of my incomplete projects..

Check out my lip sincing here : http://www.sabbathcat.co.uk/animation/ljs/shrooms.html

It did it all frame by frame, but on some of the projects I'm working on now, I'm simply used 20 shapes for the most common mouth shapes in the english language..

You can get away with ten I guess, but I'd stick to about 20-25...

Check it out and see what you think..

Cheers

John

[CNO]

Here's a really in-depth article online which should take you through the basics and some advanced lip synch info and techniques.

http://www.gamasutra.com/features/20...lander_pfv.htm

When it comes down to it, tho, Thundachunk has it right - use a mirror. It's the best way to express character through your motions and still have it believable.

[eyegrabbing]

Thundachunk - I like your stuff. You say you did the synching frame by frame - did you break up the instance and manipulate it with your cursor. The teeth are a good touch, but I'm trying to do something really marketable and normal(cute even - as opposed to the warped stuff that I usually do but won't get me a job) - so I want to try to stick to a group of set shapes if I can.

CNO - thanks for the info. Very useful. It was very encouraging to hear from both you guys.

Chris S. -if you have some time, check out my animation and let me know what you think

http://www.earthlink.net/~eyegrabbing

[cheif]

i think the bwst way to do it, is to do all t he individual moving items on a seperate layer, eg, eye's on one layer, right hand on one layer, left hand on one layer, eye brows on one layer and so on.
this allows you to indivdually create the motion tweens for each item at your desired time

[xup878]

too many layers can get annoying when trying to animate....
i prefer to stick to two or three..... and just redraw an entire frame for something.......
remember things change shape as they move..... especially arms and legs.... NO more motion tween leg movements please... unless its a robot thundachunk, thats cool

[Dolemite50]

The method I came up with is speedy and pretty effective. I just have one symbol of a mouth with teeth. Draw it open as if it were saying something. To animate it, I follow the sound clip. (to make things easier,. put the sound for the character next to the mouth layer on the time line, this makes for easy synching). Then I reshape the mouth and flatten it, as if the mouth were closed. Copy this frame and paste it on your timeline at every spot that is "between words" or when character is not talking. Now insert keyframes at every "syllable" on the timeline. These you can just reshape according to the sound. For example an "oooh" sound you would push in the sides of the mouth and open it to make it look round. If youre looking for a fast approach that does the trick, I highly recommend you give this a shot. e-mail me if you have any q's on this.
Also, (shameless plug),
See it in action here!!
http://www.geocities.com/dolemite50/gd2.html

[CNO]

Another tip would be that if you set your sound to stream, you can see the waveform in your timeline. Though small, you should be able to see the peaks in the sound and synch to that, as well as scrub along the timeline and hear short bursts of sound.

[Traum82]

Hello, well this is what i do for anime and it works very very well and it's very good for looping...
(it's my own standard...)

when it doesn't look right i just follow the sound waves...

i use 3 different mouths..

O = mouth wide opened(as much as you actually
want.... bigger if screaming)

o = mouth halfway opened

- = mouth closed or simply showing teeth...

well, here is how it goes.... (keeping the 12 fps setting)

- - o o O O o - - - O O O o o O - - O O o O O O o o o -

make the last frame go back to 1st frame if you want it to loop...

[JohnnySix]

There's some great stuff on lip syncing here too..

http://www.flashfilmmaker.com/articles/

( Yet another plug for Ibiz's ubiquitous site!!! )

Cheers

John

[DarkMagicHacker]

Eveygrabbing, the best way to simulate lip synching is to check to see how high pitched a sound is and make the mouth accordingly. Do you see how when you put in a sound, you see the blue line representing how loud the sound is? Just make the mouth go higher for the higher the sound (but make yourself a maximum mouth height, I mean, even people can't open their mouths up all of the way) and remember to make the mouth go wider, too. It is a really good idea to practice saying it yourself in front of the mirror, but for lazy people (like me) that's how I would do it.

[eyegrabbing]

Thanks for all the advice. Do most of you guys make your cartoons and anime in 12fps? I tried a higher frame rate(to try to smooth it out) but lost a lot of mouth movement frames - I was single-framing the mouth movements over a movie clip.

[JohnnySix]

Oh, beware of movie clips with lip syncing..!

I've found (flash 4) that if you keep the sound and images on the main timeline you're less likely to have the sound and images move out of sync.

I don't know if flash 5 remedies this problem, but I've found it an issue with 4.

Cheers

John

[Ibis Fernandez]

As it turns out as far as "production" animation goes you dont realy need flash movie symbols, infact its better to work with reguar graphics symbols cause the filesizes are smaller. I dont know why, but try it and you will see its true.

I think it might have to do with the fact that a graphic symbol only displays one graphic per frame in the main timeline as opposed to movie symbols which have to load completely. Franky I just stopped using em all together, not much interactivity needed in production work.

Aniway just wanted to tell you that was a great article you guys linked to above, i'll add it to the bottom of my article as a "for further reading resource".

yeah theres only nine basic shaped used in character lip sync, all others are hybrids, In flash being that the majority of animation is done at a "limited" quality you can actually get away with just using those basic nine as oppsed to regula cel animatimation where you actually have to "inbetween" the changes from one moth position to the other.

I'll try posting one of my "Flashbytes" below, so you can see the lipsynch at work

[swf width="288" height="246" background="#FFFFFF"]http://www.flashfilmmaker.com/gallery/serial/flashbytes/files/flashbytes002.swf[/swf]

-Ibis

[The Giver]

Hi all,

Eyegrabbing: I couldn't get to your site.

Thundachunk: Pretty cool stuff man

If your going to be doing a lot of these small cartoony animations, then consider doing it programatically (no, it's not a dirty word).

I work for a web development company and may main job is to develop online training. We do most of these using flash. Well, each course is about 3 hrs long and we end up with roughly 250, 20-40 sec, flash files as part of the course. I'm constantly being pressured to make it "snazzy" and interesting while still doing it as quickly as possible and as small as possible.

The current course I'm working on is called "Valuation of Investment Property". As you might can tell this is pretty dull stuff (this course is nothing but handouts and calculations) so what is a guy supposed to do?

Well, I made a quick cartoony approximation of the teachers head and shoulders. And animated it talking to the audience. We're doing this about every 10-15 flash files.

Anyway, to do this by hand everytime would be TIME CONSUMING. So what I did was I typed verbatim what the teacher says in this 30 second snippet, then I run it through a parser (a flash movie). The parser outputs a string that contains only 10 items. A comma for silence and letters for the 9 shapes of the mouth (I used the 9 basic shapes that Ibis described, thanks Ibis!). Also, within the parser, I can tweak the output string. Adding and deleting and what-not..
Finally, all I do is assign a variable in the movie to this string and the animation controller reads it and voila! It's not very sophisticated looking, but people seem impressed by it.

Take a look at a sample here:

http://www.alltel.net/~gking43/mighty.swf

With the parser, and the animation, and mouth symbols already created, the actual movie took ~30 mins to complete

-O Geoffrey King

PS. I did this swf file as a test and I'm wondering how to work it into the course >:)

[Ibis Fernandez]

Dude that's like freaking genious!!! Any chance of sharing that source code with me... I sure as hell could use something like that!

-Ibis

[CNO]

It is very cool, and I'm sure the entire Flash community would be appreciative if you released it open source (hint, hint. )

I must've watched him sing the Mighty Mouse theme song 5 times - you should add some backup singers - make it a barbershop quartet.

[eyegrabbing]

I thought he looked kinda like Jim Nabors - pretty damn funny! I'm a little confused though - what exactly is a parser? And how does one go about correlating the letters and the mouth movements?

[eyegrabbing]

I thought he looked kinda like Jim Nabors - pretty damn funny! I'm a little confused though - what exactly is a parser? And how does one go about correlating the letters and the mouth movements?

[tipatat]

check out my site "Understanding Anime" about how to animate mouth movements anime style. just go to http://anime.sprocketworks.com/
select "Animetion Techniques" -> "Looping" -> "Talking"

-Tipatat