Flash: Lip Syncing Tutorial - Actually useful

[joelatoya]

I found a lip sync and facial expression software that works in Flash. It works much better than any automated system and it is much faster than doing it manually. It’s called Xpress and it’s on sale now for only $40. Check it out at doublebarreldigital.

[MGOWNER1]

tht ugy sounded like a pedofile Hey kids who can tell me what time it is ?! xD annyway im prettysure you used adobe flash 2 or 3

[OhSoDayumGawdly]

how do you get on this??

[helmutlord]

@OhSoDayumGawdly I'm not exactly sure what you mean.

If you mean, get into the program: You need to buy a copy of Flash (or Toon Boom Animate which is AMAZING and CHEAPER)

If you mean, how did I come across this technique: I studied Ed Atlin, who is a crazy genius, and tried a LOT of other things first

If you mean, how did I record my screen: Well I don't remember what program I used, but I use ScreenFlow now.

If you meant something else, uh, could you reword your question for me?

[tomridell]

Great tutorial thanks a lot!

[sonicthecoolone]

Thank you!! Figures, I can make a whole website out of flash but when it comes to animated cartoons I'm terrible. This helped so much, thanks!

[thatsupergirl]

Hey helmutlord, love the tutorial, but love the accent more. Just wondering, did you miss out other phoneme mouth positions (like fuuuuuh and lllaaa) for the simplicity of this animation, or do you think those five frames that you made in the video can be used for those sounds aswell?

[MrJasonBorja]

Thank you mr. Your tutorial really helps me. i hope i could pay your free-tutorial in some way.. thank you very much. ^______^

[Yadaistheword]

THAT WAS A HORIBLE TUTORIAL IT WASSENENT HELPFUL AT ALL

[helmutlord]

Haha! Yeah, I'm sorry. This tutorial was designed for people who's animations are in depth enough to feature moving mouths.

Perhaps I can recommend something dealing more with Flash basics?

[soffiethetoffee]

on my flash 8 i wanna lip sync a character to some music, but when I click 'play' the audio does play, but when I click 'stop' or just rewind the movie a bit, i just carries on playing like it's not even linked to the time line. This is gonna make it very hard for me to sync a character to it... do you know the problem????

Thanks

[helmutlord]

@soffiethetoffee

This is answered in the top rated comment, but I'm happy to answer this once again.

Event Audio will continue playing to the end no matter what.

Click on your audio in the Timeline and in the Properties box you'll see 'EVENT' - change this to 'STREAM'.

[soffiethetoffee]

@helmutlord thankyou... and sorry i didnt see the top rated comment

[itsybitsy113]

@helmutlord THAT MAKES EVERYTHING SO MUCH FUCKING EASIER

THANK YOU

[13fyer]

@soffiethetoffee you will have to click on the audio in the timeline and a  menu will pop up at the bottom. there will be a 'Sync:' and it will say 'Event' after it with a drop down icon. click the icon and select the 'Stream' button then it the sound will do what you need it to.

i had the same problem a few years ago

[jontiways]

how to you make it so when your on the time line, the audio automaticly plays? Im using an mp3, does that make an difference?

[helmutlord]

@jontiways

This is answered in the top rated comment, but I'm happy to answer this once again.

Event Audio will continue playing to the end no matter what. Stream Audio only plays as long as it has frames, it can also be previewed in real time.

Click on your audio --> Look at the Properties box --> Change Event to Stream.

Mp3s should work in theory, though I've had some trouble with them. I much prefer to use Wavs.

[coalcowboy32]

nice

[Zeronightshade14]

how do you set to single frame, i didn't see an option for that

[helmutlord]

@Zeronightshade14

First you need to make sure your Symbol is a Graphic - not a MovieClip. You can change this temporarily by clicking on it, and in the Properties window clicking on the drop-down box that says 'MovieClip'. You can change it permanently in the library by right clicking on the symbol, and following the prompts.

Once that's done, simply select your symbol and all the relevant options should show up in the Properties box.

[fsolis6]

I haven't seen a tutorial for this yet, but is it possible to animate an already captured digital video clip?

I want to reanimate a persons face to lip sync to a song. I don't want the actual features of this persons face to move, but I want to create a cartoon face to superimpose on the persons. If this makes any sense, I would greatly appreciate some help thanks!

[helmutlord]

You can import quite a few video formats straight into Flash (such as .avi, .mov, and .wmv).

Once that's done and in place, you need to somehow animate a face that tracks with the real face underneath (this is the tricky bit).

Then comes lip syncing. You might want to do all the lip syncing and animation of the face first inside a movie clip - and then just move that movie clip around matching the video.

It will be a lot of work though.

[fsolis6]

@helmutlord @helmutlord

Oh okay thanks!

[DanielXLunar]

how do i stream in flash cs3?

[helmutlord]

@DanielXLunar

Do you mean set the audio to 'Stream'? Or create a streaming video?

[DanielXLunar]

@helmutlord oh nevermind. I figured it out :P

[Gavrillo]

Thanks for this - good to see more australians on here.

[helmutlord]

@Gavrillo

Haha, just doing my part.

[supadorf24]

I'm really bad at lip syncing on Flash. I always just use text above my characters. Nice voice acting, by the way!

[helmutlord]

@supadorf24

Thanks, I'll pass that on to my voice actor.

It's just something that comes with practice... not even that. Patience mainly.

[supadorf24]

@helmutlord Um, what program is that? In the tags, it says Flash MX, but that animation looks too good to be from Flash MX. I use Flash MX, because I can't afford anything else, but I'm saving up for a nice Macbook with Flash. Actually, though, if you really take the time with Flash MX, you can learn how to make it look better. On my channel, I have some of my videos. They're not Flash Professional quality, but I do what I can with Flash MX.

[helmutlord]

@supadorf24 This is CS3, I don't remember why I wrote MX.

I started with MX though, worked fine for me too.

[supadorf24]

@helmutlord Oh, okay, thanks!

[Zipmic]

I'm doing some animations, although I've just learned about this method and it's really nice. Though, I'll like to know something. This is just the lipsync you're doing, what if I wanted the character to run around? Would I make the sound and lipsync inside that movieclip first? Because if I did that, then I wouldn't be able to use that same character again, I'd have to make another with a movieclip with a new lipsync and animation.

Is that the way to go? :)

[helmutlord]

Zipmic, such a specific problem has a variety of different answers depending on context - but to try and answer your questions anyway: Yes, one option is to make a separate movieclip.

Incidentally, Animate 2 cleverly avoids this problem.

"...then I wouldn't be able to use that same character again"

This is the bit I don't understand. If you've made your character properly, at worst all you need to do is drag the symbols back onto the stage. You could even duplicate the lip-synced movie clip.

[Zipmic]

@helmutlord

Hey again

Yeah I was writing that in the morning and didn't have a lot of characters left on the post ;)

It's cause I normally only have a single sound stream that I animate to. But then I won't be able to control the mouth from the character movieclip. I guess the solution is to duplicate the character and animate the different sound files and then use that specific movieclip for the different situations.

[helmutlord]

Yeah, it'll be a bit awkward - but, hey that's animating!

Although everyone has different animating techniques, and of course this lip syncing style won't work perfectly for all of them. If it becomes very difficult, I'm sure there's a variation or completely different way to do it that would fit better.

And to expand on my previous note, Animate 2 doesn't have this problem because they've brilliantly designed it so that changing the symbol doesn't need a key frame. Might be worth a look...

[plazpastic]

Great tutorial. Just what I needed to see.

[dymrip]

is that whistling willy's voice from south park? lol

[helmutlord]

@dymrip

As far as I know it's an original voice, but I don't know this Whistling Willy you speak of.

[dymrip]

@helmutlord

yeah I was just joking around. He was just a small side character they had once on an episode. Voices just sounded similar.

[Greytega]

Great tutorial man, a clear voice really helps your explanations.

[SSCeles]

Brilliant. I've got to try this.

[SPEEDROKE]

fantastic tutorials for lips sinc

[telnarlex]

When u drag ur cursor on that audio bar, ur audio plays but my wont :( How you make the audio to play? Mine is Flash 8 on Mac and the file is WAV

[helmutlord]

That has been answered multiple times in the comments - but regardless, I'd be happy to answer it again.

Click on your audio in the Timeline and in the Properties box you'll see 'EVENT' - change this to 'STREAM'.

[akanjeeheart]

@helmutlord GOOODD !!! EXCELLENT ANSWER !!! FINALLY !!! thanx :)))

[FappingFury]

@helmutlord thank you for this ;_;

[MissNenuchi]

how did u do that audio line?

[helmutlord]

@MissNenuchi

I'm not entirely sure I understood the question, but try setting your Audio to 'Stream'.

[JRTET21]

stream audio only works with wav audio.

[maxtubes11]

cool

i now know how to do it

thanks!

[Cloutar]

This is a good tutorial ^_^ Thanks for the link in your description to the other one, both tutorials helped me out ^_^

[dancingmind]

I miss ed atlin... and especially space tree

[helmutlord]

@dancingmind I declare a minute's silence.

[noname1151]

control+enter

[onizuka8]

pivot point on the neck? how do u move it?

every timei try to move that little circle it moves the whole face

[helmutlord]

You can't move the circle, but if you edit the symbol and move the whole face into such a position that the 'little circle' is in the neck position.

[o0marinh0o]

not working

[sazahohasmage]

rephrasing my question:

how did you get the character to apear in all 5 frames

[ItsBretter]

Adding a new KEYFRAME

[EdYoutubr]

thank you, it really helped out., il do a response to see how it turned out

[Playboylicuz]

is it free ?

[cocopops149]

no its very expensive

[madcat0149]

Thank you!

[Funnystuffdis]

Thats amazing, very helpful, thanks !

[GladCamper]

What version of flash is this and how did you get the sound to play when you move the line thing..

2:10

[GladCamper]

actually more like 2:18

[TitaniumToothpaste]

is there a way that you can motion tween a graphic while at the same time changing the keyframes in the graphic

[helmutlord]

Not an easy, neat way that I've found.

If you're lip synching, sometimes I have to just make a graphic of the animated dialogue, and then tween that. Time consuming and annoying.

If you find an easier way, please tell me.

[TitaniumToothpaste]

yea that is what ive done but itpisses me off and its annoying

ive also tried making the mouth another layer but i cannot move the mouht along with the head

[helmutlord]

The other thing you can do is animate the head moving where ever you want first. Then double check that is really where and how you want it to move.

Then you can just add keyframes and lip sync as normal. The massive downside to this is obviously that once you do that you can't change the tween. But for small tweens that can be the best way.

[TitaniumToothpaste]

ive tried that, but i guess i must have done something wrong because when i do that i try to change the keyframe but it changes it for every frame

[helmutlord]

It sounds like you're using 'Swap Symbol'. This is the exact reason I don't use that in the above video - that stupid bug!

You can sort of fix it by making sure all your Tweens have 'Sync' turned OFF.

[TitaniumToothpaste]

thanks ill try that

[nedcooked3]

dude thank you so much. i've been working on an animation for about 2 weeks and i'm about half way done. now and i didn't know about lypsync.all of the other tutorials didn't tell me squat. you were the first. thanks.

[xboxdongo]

how do you get the sound file to look like that in the timeline.

mine is only shown by a keyframe

[helmutlord]

There are HEAPS of things it could be - could you upload a screenshot somewhere and PM me a link?

[xboxdongo]

its ok :) i figured it out

i had to inport the sound file to the keyframe then drag and make loads of blank frames or whatever they were in order for me to see the sound.

[stevebasher]

How do u import music to be able to stream it? Just dragging music from the library onto the stage doesnt let u do this.

[McPfoot]

Go to file>import>Your file.

Then your done :3

[saphira2k5]

Oh and how do you do that symbol thing were frame 1 is closed mouth, 2 is almost open, 3 is open, etc. Like how do you click into that and see all of your mouth frames and stuff.

Thank you! :D

[helmutlord]

What you do is make your face a symbol. To edit your symbol, and see 'inside it' you can just double click on it.

Then, just double click outside your symbol to return to your animation.

[saphira2k5]

Okay, have two questions:

1) How do you import sound into your animation

2) How do you get sound effects and stuff

Thanks

[helmutlord]

1) File -> Import -> SOUND FILE

2) Well, you can record them yourself, or you can just google search for sounds.

[frico353]

How Do you record them yourself?

[helmutlord]

With a microphone...?

You can use Audacity which is a free program online.

[o0marinh0o]

yes i have a music file but how i can't see and hear it

[jotalegend]

hey is that flash cs3 or cs4... or am i lost???

[helmutlord]

CS3, but it shouldn't matter. This technique should work with the last several versions.

[jotalegend]

thanks... this tut rox

[AdrenalineFueled1988]

Wow thanks sir, u r a genius and a life saver ;) Works fine with stream on! What I do not understand is why could no one else tell me that for like 2 months?? Lol cheers again dude!

[helmutlord]

No problem. Feel free to ask any questions you have.

[QQintl]

That's really helpful...Thanks!

[AdrenalineFueled1988]

Hey I would just like to know what version of flash you are using also I see u are on the mac I cannot playback music like that, when I press enter it will start but not stop without me shutting down the program and also I can't search through the timeline bit by bit like that, the sound just doesn't play? Any help would be appreciated thanks nice video btw dude:)

[helmutlord]

Wow, okay. Take a breath Adren.

Yes I'm using CS3 on a Mac, but it shouldn't matter what you've got - it should still allow playback.

Okay, I'm going to have a guess at your problem here:

Click on your audio in the Timeline and in the Properties box you'll see 'EVENT' - change this to 'STREAM'.

Event audio will continue to play once started, but Stream will only play for as long as it remains in the Timeline. They both have their uses.

To stop Event playback, you can also just press escape.

[flashpowr]

his using flash 8 but i think you need to stream in m8 hey if you need more help i got a hole load of tutorials have i look at my page :D

[Slipknotsicz666]

so... what time IS it

[helmutlord]

Adventure time?

[jotalegend]

i thought it was summer time...

[funnyjunk64]

wow it is atually the most use ful thanks 5/5

[helmutlord]

Glad you liked it.

[hrnumse]

Does what it says on the tin, good tutorial thanks

[helmutlord]

Cheers

[InverseSun]

In this video, I see you have it as a graphic symbol. is that what it's suppose to be? Because I saw you're suppose to make them into movie symbols or something like that

[helmutlord]

Yes, well they both have their respective advantages and disadvantages.

I use Graphic symbols for lip syncing because you can choose the frame, whereas Movieclips continue to play automatically. Movie clips however can have filters and programming applied to them.

[xxpivdxx]

Should u make the layers of your drawing ( head, face, ext) in ur scene or in the symbole screen

[helmutlord]

I put them all in the Symbol so they were still editable, but as you don't need to animate them separately they don't take up space in your scene.

[Vegetanthony]

Awsome tutorial

[helmutlord]

Thanks, man. I hope it helps.

[PurBakVideo2]

Nice one... but it still is time consuming. I wish there was a way to just convert audio to speech. I know it exists. You know Team America, the movie from South Park makers. Well they used also a program to convert audio to a good lipsync.

[helmutlord]

I've had a look, but I haven't seen any evidence of a commercially available program of that kind - well, not for Flash anyway.

If you do find one, hit me up. Good hunting.

[gottahallpassbra]

How did you make it wide screen also?? sorry bout the few Qs but... I'm not that knowledgeable about flash at this point in time...

[helmutlord]

In the properties box, after you've clicked on the stage (any empty space), you should be able to change the size. Just put in whatever you want. (or Modify --> Document...)

As for making the frames really fast, either press enter/return to play at normal speed, or drag the curser back and forth - see my reply to SuspiciousChicken

[gottahallpassbra]

cool thanks

[gottahallpassbra]

how did you get the frames really fast when you were doing the syllables??

[helmutlord]

I'm not sure I fully understand the question, but I clicked on the numbers at the top of the timeline and moved my mouse back and forth.

[GladCamper]

that doesn't work for me...

[contourman]

Go the the sound properties and make sure the sync is "stream" and not "event".

[GladCamper]

oh thanks plenty :)

[SuspiciousChickens]

eee i just had anouther look at this tut but how did you get the sounds layer to play when you mave the red thing across :( im not making scene but erm...

how did you get your sounds layer to go purple? that would be really useful for what i want to do :D

[helmutlord]

I have set the sound to 'Streaming' rather than 'Event' - the Play Head (red thing) then previews the sound.

You'll see in the properties window, a drop down box labelled 'Sync', which will appear after you click on the sound in the timeline. (It appears bottom right in the video)

It is a dark blue on my screen, and in the latest version of Flash (CS4) it is a light blue. Somewhere along the line of YouTube compression it has become purpler. I don't believe there is a way to change it.

[SuspiciousChickens]

cool! thanks for your help :D

[helmutlord]

Oh Donnovan, you so crazy.

[gamers15]

hmmm...this may be more useful than my other idea... or it could just improve it... i use mouth movements in a different layer... but i see where this is going,good job... its a shame i cant favorite :[ i exceeded my limit.

[helmutlord]

It works just as well in as its own layer - I just added the chin thing 'cause I thought it was useful.

[SuspiciousChickens]

how do you change the frames per second? mine is on 12 so its really hard to see the sylables!

[SuspiciousChickens]

dw i worked it out ^^

[helmutlord]

Good stuff.

[hazzystan]

mdify > document > fps

[helmutlord]

That's right. Some quicker ways might be:

Pressing 'Ctrl + J' or 'CMD + J' to bring up the Document Properties.

Or by clicking on the stage and clicking 'Size' in the properties box.

Or by double clicking the FPS located at the bottom of the Timeline.

[EmSeeSquared]

the sound i'm using, which is from a movie, has VERY few peaks in the soundwaves when i put it into the scene, meaning i can't see any of the syllables, if any, if i want to lip-sync. solution?

[helmutlord]

I've had similar problems. I usually 'hear out' the syllables when this happens, but if all your sound files are doing this, it can become tiresome.

1:

Try upping the volume of the sound files outside of Flash. Then you can turn down the volume in Flash by clicking 'Edit'. The peaks are not affected by the Edit function.

2:

If that doesn't work, try converting from mp3 to WAV - in my experience almost every sound problem has been solved by this.

Hope that helps, let me know how it goes.

[EmSeeSquared]

thanks for getting back to me on this.

I ended up "hearing out" the syllables, and it worked out ok.

i have another problem tho, non-sound related, perhaps you could help me with, tho:

when i published my animation, it doesn't turn out exactly like in my Flash document, and some characters don't do what they're supposed to. one character's mouth doesn't even move when he talks. ideas?

[helmutlord]

Yeah, Em - I'd love to help, but it's not something I can really fix, not without way more details. There's a lot of things that could have gone wrong here.

How big is your .fla? If you email it to me, I'll have a look - I've solved a lot of similar problems and I reckon I could help you out here.

If you don't trust me with the .fla, perhaps you could just email the .swf and I'll see what I can do. I understand if you don't want to spread around your animation ;)

[EmSeeSquared]

well, i've already posted it on both Newgrounds and Deviantart, so some people already know it's by me. i suppose i could send you the original document, and the .swf so you can see the unfortunate end result.

[helmutlord]

Okay, I had a look at your animation - that bit where you lip synced that guy but he wasn't moving; how did you animate him?

There is a certain glitch that happens when you swap symbols frame by frame --> In the same layer that you animated that guy, click on any tweens you have and uncheck 'Sync'. For some reason, with 'Sync' checked, it sometimes makes all the symbols on the layer into the same symbol. You may still have to re-animate it.

As for the others, I'd need to see the .fla to know.

[princetomII]

how do you stream the audio?

[helmutlord]

Click on the audio in the timeline.

The options for your audio will appear in the Properties box (the window down the bottom where you first chose the audio).

Now there should be a drop list that says 'Event'. Simply change Event to Stream.

[princetomII]

thanks , this video is very good (cheezy smile and wink with thumbs up)

[halfdude]

Thanks a ton man, Im starting work on a video I'll be making in my free time and this will help a lot. Mostly because it'll be lip-syncing a whole song XD haha..

[matthewbyrne720216]

That was awsome buddy, do you make cartoons for a living or your just a good flash maker thingy guy???? Oh nice job that helped me hepes.

[helmutlord]

Not professional yet, though I've made a couple of animations for different things.

I just think being able to animate, even roughly is an important skill to have.

I've seen some of your animations, they're much better than my first attempts. Keep at it and you'll be ahead of me in no time.

[helmutlord]

You should keep in mind that at 24 frames per second, it loops much too quickly, so you will have to slow the frame rate or the loop down.

I really haven't seen any looped or automatic lip syncing that has looked any good.

My recommendation would be if you are going to loop your lip syncing, keep it as simple as possible. Have a look at the early bonus stage looped lips, sometimes it is so unmatched it becomes a distraction - and you don't want that.

[iggymydog]

will this work on a sond like green day american idot i want to make one for that

[helmutlord]

It's just lip syncing, it'll work for anything.

The lyrics in American Idiot are sung very quickly, so for some syllables you may need to just go straight from closed to open in order to keep up.

[shewp41]

what program did you use?

[helmutlord]

To animate or capture this video?

I'm going to assume capture as the other is very obvious:

I used SnapzPro from Ambrosia - If you have a Mac I HIGHLY recommend you check out their stuff.