• Home
• Store
• Plug-in Finder
• Forums
• Tutorials
• Inspirations
• Mailing List

415-462-1982

Toolfarm.com

Home Tutorials

We're using an old trick with motion math to get the mouth to move to the audio. I would've like to have used expressions to accomplish this, but I could find no way to copy the wave form information to other properties. This has changed with the addition of a keyframe assistant in AE 6.0, but that's another tutorial. This is the old school method.

As far as the Flash output goes, check out this fine article by Jim Tierney on Flash output. There are lots of things that make your files fat and tricks to keep your file size down to a minimum, which is what you want. Really. AE only outputs certain elements as vector - Illustrator files without gradients, masks on solids (only one mask per solid), the path text plug-in and the audio spectrum and waveform filters. In this tutorial we'll use all but the audio filters.

Make your pumpkin chatty

1. Draw your pumpkin in Illustrator or a similar program. You want to make sure you keep it vector for the Flash output. You can also draw a pumpkin on layers in After Effects using solids and masks. I did a combination of both. The outline of the pumpkin, the lines and the stem were drawn in Illustrator and the eyes, nose and mouth were drawn on the masks of solid black layers in AE. Make sure the mouth is on it's own layer. I've noticed that a simple mouth with no teeth looks more realistic when you make it talk. The teeth become squished, otherwise.
2. Put your pumpkin together in a comp called "Pumpkin". I kept my comp short for the sake of the tutorial and the length of the audio.
3. You can create a shadow behind your pumpkin (see image above). Remember, this is for Flash output, and the more effects-laden your pumpkin becomes, the bigger your Flash animation will be. This shadow is a copy of the orange fill that's been distorted back - the mask was distorted, no filters were used. I filled the shadow with black and then brought the opacity to 50%. I selected the color of the shadow over the background, which was a dark blue, changed the shadow layer color to that color, and brought the opacity back to 100%. Just another step to keeping the file sizes small.
4. Import your audio. I downloaded this clip from Scary Sounds, a pretty cheesy site with lots of Halloween sound clips. Drag it into your "Pumpkin" comp.
5. Select your mouth layer. Choose Animation > Keyframe Assistant > Motion Math. You'll want to load the script cmpaud.mm. This script will be in your motion math scripts folder in your application folder. Set the layer in 1: to your mouth layer. Set the property to "Scale" and the Channel to Y. This is so the whole mouth won't shrink and grow, only the Y axis. Don't worry about 2:. In the text window, the one with all of that code, change your Max to 300 and your Min to 15. Sample at 10 samples per second. Apply. So how does it look? If the mouth movement is too overstated or understated, undo until the scale keyframes disappear on your mouth layer, and try applying the motion math script again. The settings you want to change are the Min and Max. Everything else can remain the same.

Adding the Path Text Path text is one of those effects that stay vector, as long as you don't use the Fill Over Stroke setting.

1. Create a new layer called "text" or "Happy Halloween, Dude". Make it the same size as your comp.
2. Double click your "text" layer so the mask window opens. Draw an open path on the solid. This will be the path that your text will follow.
3. Apply the Path Text filter to the layer. Effects> Text > Path Text. In the custom path pulldown menu, select your mask. Set your color, position and size.
4. We're keyframing the left margin so that the text moves onto the screen.
5. A trick to making a shadow without applying the shadow filter is to duplicate your text layer. Make the color of the text black or "shadow color" and scoot the position over a couple of frames. To give the text a long shadow look, adjust the shear setting of the shadow text layer. This will make your Flash output a bit bigger, but not as big as a shadow effect would. This way your text remains vector.

Output for Flash

1. To export for Flash, go to File > Export > Macromedia Flash (SWF). Save your file with a nice short name with no extra periods or spaces and the .swf extension - Good example: "pumpkin.swf"
   Bad example: "pumpkin.33 talking.swf"
2. After you save, a new window will pop up, where you will enter your Flash output settings. On this animation you can set the quality to very very low without too much loss. I actually set it at 0 (low). This will depend on your project, of course. Set the unsupported features to Rasterize, otherwise you'll be missing pieces of your image if they need to be rasterized. That would be bad. Since we have audio, check the audio checkbox. Set the sample rate to 22.050 KHz (you could probably go lower, too), channel: mono and bitrate: auto. On the bottom of the window, I would check "Prevent Import" to protect your art, as well as "Flatten Illustrator Artwork".
3. An HTML file will export as well as the .swf file. This will have your Flash file info. You can open the HTML document in a text editing program and paste it into your web page.