Using the FrameSync extension

Using the FrameSync extension

FrameSync is a free Flash extension developed by Justin to speed up the lip sync workflow. It is largely based on Chris’s lip sync technique covered in the previous section.

1. Locate the FrameSync.mxp file in the Extensions folder You’ll learn how to build your own Flash extensions in Chapter 4.

on the CD included with this book, or download the file from http://ajarproductions.com/blog/?p=45.

2. Install the extension by double-clicking on the Frame- Sync.mxp file, and follow the Extension Manager CS5

install instructions.

3. When you’ve completed the install, reopen Flash.

4. Open the lipsync2.fla file that you saved earlier and save a new copy as lipsync4.fla. The mouth layer in this

file should only have a keyframe on frame 1.

Chapter 2 Character Animation

5. Open the FrameSync panel by choosing Window > Other Panels > FrameSync (Figure 2.144).

Figure 2.144 The FrameSync exten- sion is found within the Window > Other Panels menu.

The FrameSync panel should now be displayed within Flash (Figure 2.145).

Figure 2.145 The FrameSync panel is now open for business.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

6. Select the “auto refresh” check box within the Frame- Sync panel (Figure 2.146).

If you want to refresh the panel Figure 2.146 Turn on the auto manually, you can click the Refresh

refresh option. Panel button at the bottom of the

FrameSync panel. The auto refresh setting automatically checks to see if

your selection on Stage has changed. You can deselect this check box when you’re not using the FrameSync panel.

7. Update the Mode in the FrameSync panel to keyframes and select your symbol. You should now see all the

frame numbers from within your mouth symbol listed You can expand the FrameSync

panel as needed to display all your in the FrameSync panel (Figure 2.147).

mouth symbol frames without scrolling.

Figure 2.147 The FrameSync panel lists the mouth keyframe numbers.

8. Add a keyframe (F6) on frame 5 of the mouth layer to begin lip syncing.

Click on the [5] item in the FrameSync panel and

The mouth shape has been updated on the FrameSync

Figure 2.148

notice that your mouth symbol is now displaying the f/v

panel.

mouth shape from frame 5 (Figure 2.148). This feature prevents you from having to highlight

the frame number in the Properties panel, type a new number, and press Return/Enter. You can accomplish the same task with a single click.

Chapter 2 Character Animation

10. Normally, you’d have to scrub the Timeline to hear the audio. Click the button that looks like a speaker

in the frame controls section of the FrameSync panel (Figure 2.149).

You should hear the audio from the current frame, just

Figure 2.149 The Play Audio button in

as if you’d scrubbed the playhead.

the frame controls allows you to play the current frame’s audio from the

11. Select [2] in the FrameSync panel to set frame 5 to the

FrameSync panel.

“ah” mouth shape. Use the next frame (>) button in the FrameSync panel to navigate to the next frame.

12. Select the “auto convert to keyframe” check box to have FrameSync automatically create new keyframes for you

when you change mouth shapes (within the FrameSync

Figure 2.150 The “auto convert to key-

panel) on a new frame (Figure 2.150).

frame” setting automatically creates 13.

Click the Play Audio button to hear the audio on frame new keyframes for you.

6. Remember that this is the frame between “are” and “you” in the audio. Select [7] to set this frame to a new mouth position. Note that a new keyframe has auto- matically been created on frame 7.

14. Now that you’re getting an idea of how much time FrameSync can save you, save your current document

and close it. There’s one more important FrameSync feature to try out.

So far, FrameSync has reduced the number of clicks needed to lip sync to a bare minimum. But it’s still up to you to keep track of which mouth shapes correspond to which frame numbers (which gets slower as you get more tired after hours of lip syncing). Remembering the frame numbers gets easier if you do a lot of lip syncing, and if you use the same frame numbers across all of your characters’ mouths. But FrameSync can relieve you of the need to memorize frame numbers entirely.

1. Reopen lipsync2.fla (the clean file) and save it as lipsync_labels.fla.

2. Double-click the mouth symbol on Stage to edit it.

3. Within the mouth symbol’s Timeline, create a new layer named labels.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

4. Lock the labels layer.

5. Select the first keyframe of the labels layer. In the Prop- erties panel, add a label Name of open (Figure 2.151).

6. Select the second frame in the labels layer and create

a blank keyframe (F7). Give this keyframe a label of ai,

since this frame’s shape can be used for “ah” and “ai”

Figure 2.151 Add a frame label using

the Properties panel.

sounds.

7. Repeat the previous step so that frames 3, 4, 5, 6, and 7 have values of eh, oh, fv, mbp, and closed, respectively

(Figure 2.152).

Figure 2.152 Each mouth shape now has a corresponding label (as indi- cated by the red flags on the frames).

8. Optionally, you can select a frame on both the label and artwork (“Layer 1”) layers (Figure 2.153) and add

frames (F5) until the label is readable on the Timeline.

Figure 2.153 Be sure to select the frame on both the artwork and label layers before adding frames; otherwise, the label and the mouth shape will end up on different frames.

Repeat this step with each label/shape so that you can read every label on the Timeline (Figure 2.154).

In Chapter 4 you’ll create a com- mand that will automatically generate a Graphic symbol with these labels in place.

Figure 2.154 Every label is now readable on the Timeline.

9. Return to the main Timeline by clicking Scene 1 in the top-left corner.

Chapter 2 Character Animation

10. In the FrameSync panel, switch the Mode to frame labels. You should now see your labels in the FrameSync

panel (Figure 2.155). Warren Fuller, aka Animonger, also

has a great extension for lip syncing

Figure 2.155 FrameSync displays the

called AnimSlider. A free version

mouth symbol’s frame labels so you don’t

of AnimSlider and a couple of

have to memorize the frame numbers.

commercial versions are available at www.animonger.com/flashtools. html.

No more need to memorize frame numbers!

SmartMouth Extension

Justin also has a new lip syncing exten- sion in the works called SmartMouth (Figure 2.156). In the SmartMouth dialog box, you can input your mouth shapes (as symbols, frame numbers, or frame labels) for the common pho- nemes, and SmartMouth will analyze your audio and place your mouth shapes right on the Timeline! SmartMouth is not meant to replace the animator. You’ll still have to make some adjust- ments by hand, but it should be a huge time-saver. The extension will probably cost about $45 for a single license. Check http://blog.ajarproductions.com for details on when SmartMouth will

be released.

Figure 2.156

A preview of the

SmartMouth extension interface.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

The lip sync techniques demonstrated can also be used to animate other facial features and body parts. They can be particularly useful for animating eyes (Figure 2.157).

Figure 2.157 The FrameSync extension can be used to sync other parts (like eyes).

Now that you have a solid foundation in animating your character on the Timeline, Chapter 3 will illustrate how to animate your character with ActionScript. You’ll also learn how to create some powerful effects for the world that your character might inhabit.

CHAPTER Chapter 3 Introduction to ActionScript Classes

Introduction to ActionScript