Originally posted on 2/6/2014 on malaker.32hertz.com. The images still come from there.
I am creating a single SWF of a drawn character speaking one line of dialog in Adobe Flash.
- The first thing that I am going to do is get all my images together and use Adobe Photoshop to crop the images to the sizes that I will need. I am going to use one full size image for the whole body and seven different mouths that I will swap out to make the different mouth movements that I will use to sync my audio to. I try to crop the image as close to the mouth as possible and then use Adobe Flash toline them up later, that way I can do the same with the eyes etc. but for now I am just going to use the mouth. I am making the background of the whole body image transparent so that I can put it into a larger scene later.
- Next, I will add all of the mouth images to the Adobe Flash library.
- Then, I will add the whole body image to the library and set the stage size to the same height and width.
- Add the whole body image to the stage on layer 1 frame 1.
- Next, I will add a new layer to hold the mouths and add the “closed mouth” mouth to the stage. Take time to line the mouth up perfectly.
- After that, I need to add the sound file that I want to sync our animation to. I did this by first adding another layer to the timeline, Add the sound file to the library. Next, drag the sound file on to the stage in the first frame of layer 3 on the timeline. It is important to remember to look in the in the properties box below the stage and make sure the sound file is set for “streaming”, this allows me to hear the sound frame by frame if I drag my mouse over the audio.
- Now, by creating a key frame further down the timeline I am able to see the sound file and all of it’s bumps and curves. Create a key frame at the very end of the audio file, this will be very helpful when trying to line up the images of the animation I want to lip sync. the audio to.
- Now is where the “swapping” part comes in. As I drag my mouse over the timeline I can hear the sound playing and whenever I want the mouth to change, I add a key frame in that spot to the mouth layer in the timeline. Select the new key frame and click on the mouth to select it. Under the stage in the properties box is a button called “swap”. Click the “swap” button and choose the image of the mouth I want to replace the current mouth with. Continue to do this until I have reached the end of the sound file.
If everything went right, once I am finished I should be able to hit ENTER and my animation should move smoothly with my animation sync. to my audio.
You can see this in action Here
Lip sync. animation to audio is not the only use for this technique. It has many uses including footsteps, or gunfire, etc..
I will treat the saved SWF file as an object that I will import into Adobe After Effects to create a more complex Animation that I will explain in the next post.
Thank you for reading the Malaker Blog!
