Animate 2D Lip Syncing: FlipaClip on iPad

1. Class Introduction: One of the most fun ways to make your animation come to life, is by adding in lip syncing. Once you know a few basics, you can make your character say whatever you want. In this class, we'll go over all of the basics of 2D lip syncing. We'll start off by going over all of the mouth shapes, practicing a few simple lip syncs, moving the animation naturally while speaking, and all of that will lead up to our final class project. By the time you finish these videos, you'll be able to make your animated character say anything that you want. During this class, will be using the free app, FlipaClip. But with the methods we learned, will work on any 2D animation apps. If you want to learn all of the basics of FlipaClip, you can check out my other skill share class. But for now, let's get started with lip syncing. 2. Using the Reference Chart: To make animating lip syncing faster, it's a great idea to have a reference chart handy. There are so many lip-sync reference charts online that you can use. For my reference chart, I took inspiration from other animators, made a few changes to simplify the chart and drew out my mouth shapes. Throughout this class, we'll be referring to this reference chart. If you scroll down beneath this video, under about this class, you can find a link to download the reference chart for yourself, or you can just take a screenshot of it now. Let's take a closer look at this chart. The better you understand it, the faster the animation process will go. This chart includes all the letters in the English alphabet. The only letter that I excluded was C, because C either makes the /k/ sound like a K or the /c/ sound like an S. Depending on the word you're animating, you can use either of these mouth shapes. The first mouth shape is good to use for short vowel sounds like A, E, I, O. Since almost every word in English uses these sounds, you'll find yourself using this mouth quite a bit. The next mouth shape is good to use for sounds like E, K, R, Y, I, and A. Below that, we have the mouth shape for G, H, and K and below that we have to mouth shape for O, Q, U, and W. Up on the top right, we have a mouth shape of clenched teeth, which is used for many sounds. You might find yourself using this mouth shape quite a bit. Here we have mouth sounds for D, J, N, S, T, X, Z, CH, and SH. Below that we have mouth shapes for F and V which I don't find myself using too much, but it could come in handy. Below that we have B, M, and P and below that we have L and TH. Feel free to use a different reference chart especially if you're animating in a different language or you can even make your own. Everyone has a unique art style and it's up to you how you want your mouths to look. Now that we understand what the shapes on the chart mean, let's set up our document in the next video. 3. Project 1: Make the Document: While you may already know how to start a new document, there are a few things to know when starting a document for lip syncing. First, mouth movements are pretty fast, so let's set our document to 24 frames per second. Make sure to adjust the other settings how you like, and then press, "Create Project". Before we draw our person, we're going to insert our reference chart. Go to the top menu, then press, Add Image. Now, you can go to where you saved the image, then select the Reference Chart. The reference chart is huge right now, so we're going to use the red handles on the corners to make our reference chart smaller, then move it to the side. Above the reference chart, I'm going to write, Project 1. We're now going to draw our base person for this project. You can make this character look however you want, just make sure that you don't draw a mouth, that comes later. To finish up this person, I'll add in some color with the fill tool. Press the tool, then press the color square to change the color. We do quite a bit of coloring in my FlipaClip beginner course, so if you want a refresher on how to do that, check out that class. To make it fancy, I'm also going to add in some shading to this character as well. To do this, go to the layer studio, then press the, "Plus" button to add a new layer, then click and drag on the 100 percent to bring it down to around 45 percent. Lowering the opacity, just makes the layer more transparent. Then I'll change my pen color to a dark blue and add in shading. If you want to learn more about where to put shading, I'm thinking about making a course all about shading. Let me know in the community tab beneath this video, if you would be interested in a shading course. Now that your base person is looking amazing, we'll learn how to add in some audio in the next video. 4. Project 1: Hey There!: Open the sound studio by pressing the music notes at the bottom left. Now, we'll record our audio. Press the "Plus" button, and then press the microphone option. This lets us press and hold on the button, and it will record everything that we say. Hey there. We can press the "Play" button to preview how this sounds. Hey there. I'm going to press the check mark, and then you can drag this onto the top track. Now, we can trim the audio because I think I took a little while to say hey there in the beginning, and there's quite a bit of silence. To trim the audio, press on the clip once, and then drag in to side. Now, we can press and hold, and drag it to the beginning. Now, we can preview it again by pressing above it. Hey there. Hey there. Press the arrow at the top left of the screen to return to our regular animation studio. You can see at the bottom that we have quite a few blank frames. These frames are here as long as the audio is there. If we scroll to the end, we can see that we have 27 frames. We are going to duplicate our first frame to fill in these placeholder frames down here. I'm going to go to the top menu, and then go to my Frames viewer. Then I'll press this button. When you see a red outline, you can press Copy at the bottom of the screen and paste it 27 times. Now, we can press the check mark, and then press the "Back" button, and now we're back in our regular animation studio with our reference chart inserted, or base person looking good, and the audio complete. We're ready to start drawing in our mouths in the next video. See you there. 5. Project 1: Mouth Movement: We are going to make our mouth movements on a separate layer. Go to the layer studio and press the plus button. This will make it easier to erase the mouth if we mess up. Quick side note, when lip sinking, it's important that you don't try to animate every single letter of the word. It looks a little choppy if we do that, it will be hard to follow the mouth movements as a viewer as well. Instead, we're going to focus on the main sounds of the words. This time, we're going to focus on the a sound "Thus." We just want to draw in the main sounds of the words, usually the sounds that last the longest and most words, the vowel sounds last the longest. Listen to your audio to see which sounds stand out the most. Back in our animation, choose a spot for the mouth and as you're animating, try to keep the mouth in that area. I'm going to scroll to the beginning of our audio. In our audio that "h" is said very quickly in "Hey, there. " We're just going to start with the A sound look at the reference chart, we can see that the long a mouth looks like this. I'm going to draw in that mouth now. You might notice that all of the mouths in the chart are in a neutral position, if you want your character to be smiling, move up to the corner of the mouth so it looks like a smile shake. This chart is meant to be a reference for the mouth shapes, not the rule. Make adjustments like a smile or frown shape as needed. With a mouth in place scroll forward until you hear the "Th" sound. In my animation, I hear the Th sound at the eighth frame, but you might hear yours in a different spot. In my eighth frame, I'm going to draw the Th mouth shape. With our Th in place. We're going to backtrack back to the A mouth. At the top of the screen press the copy button then go to the next frame and use the Paste button to paste in the mouth. We're going to continue to do that until we get to the Th mouth. Go to the next frame and paste and continue. Scroll forward until you hear the E. I here the E about the 11th frame. So I'm going to draw in my soft E mouth. That's this first mouth here and I'm going to go ahead and draw that in. Now will backtrack again, go back to the Th mouth press the copy button at the top of the screen and then on the next few frames paste it in. Now, scroll forward until you hear the audio stop. I hear the audio stop about here. I'm going to go to this one a draw in a smile. Now go back to the E mouth, copy it and paste it until we get to that smile. I think this looks a little harsh, going from a wide open mouth to a smile. On this slide, I'm actually going to copy the smile and put it on the next frame, then I'll go back and erase this smile. Now, as you can see, I have my onionskin on. You can see the red is the mouth that comes before and the green smile comes after. I'm going to in-between this by drawing the mouth so it's just slightly open. Now, I'm going to go back to this small smile and I'm going to copy that and paste it until the end of the clip. We can press "Play" to preview our animation. That's looking pretty good. Now I'm just going to color in the teeth and the tongue with the fill tool. Now we can preview or animation one more time and with our animation finished, it's time to make our movie in the next video. 6. Project 1: Make the Movie: With our animation looking good, go to the menu at the top right, and then press Make Movie. Now you can adjust the settings how you like, and then press Make Movie to make your movie. After making your movie, you can share the movie or save it on your iPad. Now that you've got the basics of doing the mouth movements, let's keep practicing together so that you can complete the final project. 7. Project 2: Have a Wonderful Day!: Here I have another new document started. I set it to animate in 24 frames per second. This time, let's add in the audio first by clicking on the Sound Studio icon, pressing the Plus button, pressing the Microphone, and now we're ready to record our audio. Have a wonderful day. Have a wonderful day. That sounds good to me so I'm going to drag that audio onto the track. I'll click it once and then drag it in just a bit. Press and hold and click it over. Now we have our audio for our next project. Have a wonderful day. Now that we have our audio all set, we'll go back to the animation studio by pressing the arrow at the top left. In our next video, let's start off by animating our characters body. 8. Project 2: Make the Body: Before we start, press and hold on the sound studio icon at the bottom left of the screen to turn off the sound. That way when we scroll through our frames as we animate the body, we won't hear the audio. I'm going to start by making a new layer, open the layer studio and press the plus button. I made the body on a new layer, so that when we make our movie, we can just turn off this reference chart layer, and have the person speaking all on its own. On this new layer, we're going to draw our base person with their hand up. Then we're going to draw three frames of a character waving. To add in another frame of her waving, I'm going to press and hold on this frame, press copy and then press paste. Now on this new frame, I'll go ahead and take my lasso tool, circle her arm, click and drag on this rotation points, so it's at the elbow and then I'm going to move the arm by using the rotation circle at the top. Now I'm going to grab my pen, reattached her arm, and erase the extra parts coming off of her arm. To make sure this looks okay, I'm just going to go back and forth between these frames. Her second arm looks a little strange, so I am just going to adjust that now. That's looking better. I'm going to go ahead and copy this frame, paste it and now will make our third arm wave. With our arm waving, lets go ahead and press play to preview this. So that our character isn't waiting so furiously, we're going to duplicate each frame three times. Copy the first frame, and paste it twice. Then, go to the middle frame, copy it and paste it twice. Finally do the same for the last frame. Now press play to preview it. To make our wave more like a cycle. I'm going to go to our middle frame, copy it, go to the end, and paste it at the end three times. Press play again to see how it's more of a cycle of a wave. To learn more about movements like these, my other class on animating and FlipaClip, its very helpful. It's more FlipaClip specific, but we go into some basics of animating movement too. This time for this project, I'm not going to spend time coloring our character, but if you would like to do that, now would be a great time. With our waiving character drawn out, its time to turn on the audio again, press and hold on the sound studio to turn it on. We can see how many frames we need to animate the lip syncing. This audio has 53 frames. Go to the frames here press this button, and now we need to copy all of these frames and paste them until we are 53 or more. We have 60 frames of the waving cycle and that will be just perfect for this audio. I'm going to press the check-mark at the top, and go back and now we have frames for all of our audio. With our body and our frame setup, lets add the mouth movements in the next video. 9. Project 2: Mouth Movement: To start adding in the mouth movements, first go to the layer studio and add a new layer for the mouth. This time we have a longer sentence, have a wonderful day. What I like to do is quickly go through and prioritize the sounds that last the longest. Then I'll roughly sketch those mouth shapes. I'm going to go to the beginning of the audio. Have a wonderful day. Now we'll scroll through and see what sounds I hear most prominently. Starting about here, I can hear myself making the H sound, so I'll go ahead and roughly sketch this H mouth shape. Now will go forward. I can hear myself making the V sound here, so I think I'll go ahead and make the V sound next. Remember, this is just sketches. It's not going to be a perfect mouth. I just want to know which mouth shape to make as we go along. Here, I can hear myself making the A sound, so I'll go to my mouth and draw the A mouth. Here, I can hear myself making the W sound, which is this mouth here. Now I can hear myself making the E sound, which is the short vowel sound that we have here. I'll go forward a little bit more. I can hear that I make the F sound for quite a long time, so I'll go ahead and draw that F mouth. Here, I can hear myself making the L sound. Finally, I hear that E sound for quite a long time, so I'm going to go ahead and finish with a long E sound. With my rough sketches of these mouths, now I can go through and make a much prettier version of the mouth, but I can animate a lot faster knowing which mouth shapes go where. With my mouth turn up, I'll go ahead and preview it. Have a wonderful day. I can see that there's a few spots that I might want to fix that. Right there, that transition is pretty rough. I'm going to go back one and I'm going to try to in-between these. Let's see if that looks a little better. Have a wonderful day. Have a wonderful day. Let me erase that and let's see what we can do. Have a wonderful day, have a wonderful day. I think the problem is that I pushed the W mouth a little too far forward. Maybe I'll erase that and draw a little bit back. Have a wonderful day. Have a wonderful day. I think also the have a mouth, it really doesn't last for very long. So having such a big mouth in between those, I don't think that works. I'm just going to erase this one, copy the V mouth and past it in its place. Let's see if that works. Have a wonderful day, have a wonderful day. That did it. Sometimes it can be a little bit of trial and error to figure out which mouth shapes work for the sentence. I actually practice this before making this video, and it took me a long time to figure it out, and as you can see, I'm still struggling with it a little bit. But the more you practice, the faster it will go. Now let's look at our animation, waving with the mouth altogether. Have a wonderful day. Have a wonderful day. There was a lot of work. I'm glad that that's completed. In the next video, we'll go ahead and make our movie. 10. Project 2: Make the Movie: With this lip sinking completed, we can now make our movie. Because we made the reference chart on a separate layer. We can press on the 100% to turn it off. Now, this animation will play it without that reference chart and when we make our movie, it won't be there either. We can go ahead and adjust these settings as we want and then make our movie. Now that you have the basics and you know how to make your animation move a little, this looks a lot more natural. You know how to move the mouth and move the body, so I think you're ready for the final project. After this lesson, I colored and shaded in my animation. You don't have to color, yours in, but I wanted to show you how it could look. I really like the way this looks, but it does take a lot of time, so be aware of that before you start coloring. Has a wonderful day. 11. Project 3: I Love Skillshare!: To complete this final project, you will need to come up with the short phrase, any phrase you want. Then draw your base person with two or more movements to make them speaking look natural. For my project, I'll give you an example, but feel free to say something different or make your own character. With a new document open, I'll add in my audio. I love Skillshare. It's so great. I love it. With the audio added, returned to the animation studio and we'll draw on our person and their movements in the next video. 12. Project 3: Make the Body: Add a new layer to the layer studio by opening the layer studio, and then pressing the plus button. On this layer, we'll draw a base person. Here's what I'm picturing for this animation. I did it in the mirror a few times to make sure that it makes sense. For the first part, where she says, "I love Skillshare," I'll draw her with her hand on her chest. When she says, "It's so," she will lean back with her back arched, and her hand raised up. Then when she says, "Great," she'll lean forward again with her hand out. To start, I'll just draw the main positions that I have planned. I won't worry about how they line up with the audio yet. I'll actually turn off the audio for now. All right, I now have the three positions. So the first one says, "I love Skillshare. It's so great." Before even looking at the audio and mouth movements, I want these body movements to look perfect. To do this, I need to add inbetweens to make the animation smoother. For adding inbetweens, it can be a little like trial and error, especially with the timing. I definitely need to add a few inbetweens to each movement, but then I will preview in my animation each time, to make sure the movements are smooth. If it looks choppy, I'll add more inbetweens. I'll speed up this part so that you don't need to see through me animating for 30 minutes, or however long this ends up taking. With the body moving smoothly, now let's turn on the audio and see how long we should hold each pose. I love Skillshare. As you can see, we need to hold the first pose for quite a while. So I'm going to copy that pose and paste it, until I think it's in about the right spot. I love skill share. It so great. As you can see, that looks pretty good, but I think that I'm running out of frames at the end. Yep. So let's go ahead and copy this last frame, to fill in the rest of these blank frames. With our body moving smoothly and filling in all of the time for the audio, let's move on to adding the mouth to the moving base person. 13. Project 3: Mouth Movement: Let's get started adding the mouths. First, we need to add a new layer in the layers studio. Now let's scroll all the way to the beginning. We're going to quickly go through and sketch all the mouths as we did before. That's a pretty long I at the beginning, so we're going to use this I mouth. Again, rough sketch doesn't look perfect, but that's okay. I think I hear the L about there. So I'm going to do the L mouth. This is where I here A which love does have an O in it, but it sounds more like this short U sound, A, so we're going to use that mouth. About here, I'm hearing the V sound, good enough. It's hard to tell, but I think I'm hearing the S about here for skillshare. That's the clenched teeth mouth. Now I'm hearing a short I sound, so we'll go ahead and use that mouth again, the vowel mouths. I do hear the L, but I feel like it's so short, I'm just going to skip right to the Shh for share. That's the teeth again, the clenched teeth. Here I mostly hearing an A sound for share, which is a combination of these two mouths for the A and the R. I think I'm going to have an open mouth but show the teeth like this mouth. Again, this is a reference guide. It's not going to be perfect, so you can make changes like that as you want skillshare, yeah, that looks right. Right about here, the audio stops, so I'm just going to give her a smile. Here I'm hearing the short I sound and here I'm hearing the Th for that mouth. Oh, and then I say, ooh, for a super long time. Yes. I'm going to add in the G mouth for great, and right about here I'm hearing the T sound salted the clenched teeth again. Now we have our rough sketch of all the mouth shapes, but it's important to keep the mouth in the same place for this animation, especially because she's moving so much with her body. As we go along, pay attention to where the mouse should be and where it was on the last frame to make sure that it stays in about the same place. I'm going to go back and redraw all of these mouths. I've now finished the part where she says, ''I love skillshare'', Which is the easiest part because her body isn't moving yet. But let's go ahead and preview it to see how it looks. ''I love skillshare''. As you can see, it's pretty easy to keep her mouth in the same place when she's just not moving her body. For now, we're going to get into the trickier part. This is the first frame where she moves, and we're holding the clench teeth for the entire time that she's moving. What I'm going to do is I'm still going to copy the mouth, then on the next slide, I'm going to paste it. But this time I'm going to use the Lasso Tool to adjust it. You can look at the onion skins and see that the previous frame was about this distance but, and it was slightly rotated. I'm going to rotate it and I'm going to move it up to about that same distance. Now, it can be a little tricky to do this. I definitely go back and forth between frames quite a bit to make sure that it's in about the right spot. That's about right, I think I'm just going to rotate it a little bit more, that's looking good. I'm going to repeat this process for the next frame as well. This seems a little tricky because her hands covering her mouth, but that's okay, we're just going to make the eraser and nice and small and then go in and erase between her fingers. Luckily the bodies on a different layer, so if I did erase the hand nothing would happen, because we're just on the mouth layer. We're going to keep on doing that. and remember to keep going back and forth between your frames to make sure that it's looking good. To me that looks pretty good. We're going to continue this process, and I think when she's saying so she just stays there, so that part should be pretty easy. At this point, she moves again. I'm just going to paste the mouth and copy it over as I did before with the Lasso Tool. All right, we're now done putting in the mouths. We can go ahead and press play to preview our animation. ''I love skillshare, It's so great''. That looks so good. I think in the end I'm just going to hold this frame for a little bit longer. It ends abruptly right now. Let's try that. "I love skillshare. It's so great". With the mouth's done. In the next video, we're going to make our movie. 14. Project 3: Optional Detail: Before we make our movie, I've one last optional step that we can take. I think our character will look a little more natural if she blinked at one point during this. It isn't a very long animation, so she doesn't need excessive amounts of blinking but adding one or two spots of blinking would look pretty good. In this particular animation, I think it would look pretty nice if when she's leaning back, her eyes are closed. So I'm going to go ahead and add that in. Maybe when she starts to say so maybe a few frames in, we can go ahead and add a blink. So what I'm going to do is make sure that I'm on the body layer, then I'm going to erase her eye and then I'm just going to draw her eye closed. I'm going to copy this slide. I'm going to erase her eyes on the next few frames and then add in the blinks up out until she's done saying so. I'm going to back out and see how that looks. It's so great. I love Skillshare. It's so great. I think I could hold the blinks for a little bit longer. It's so great I love Skillshare. I think that looks great. If you want to add blinks into your animation, I think now would be a great time to do it before we make our movie. 15. Project 3: Make the Movie: Now that you've finished this animation, be sure to make your movie by going to the menu and pressing make movie. Be sure to share your project with the class. I'd love to see how it turns out. After this lesson, I colored and shaded in my animation. You don't have to color yours in, but I wanted to show you how it could look. I really like the way this looks, but it does take a lot of time, so be aware of that before you start coloring. I love Skillshare. It's so great. Congratulations on finishing this class. If you followed along with me and completed the class project, you're well on your way to making your animated character say whatever you want. Practice makes perfect. Don't get discouraged. You got this, have a swell day.