Home / Articles / Animating Symbols

Animating Symbols

Graphic Symbols

You’ve been using movie clip symbols for your animation, and you’ve seen how they allow for independent, nested animations. But you can also have nested animations and graphics inside of graphic symbols, although they work a little differently.

An animation inside a graphic symbol doesn’t play independently as it does in a movie clip symbol. It will only play if there are sufficient frames on the main Timeline where the instance is placed. And while you can control the internal playhead of a movie clip’s Timeline with ActionScript, you can control the playhead of a graphic symbol directly in the Properties panel. Because of the ease with which you can pick and choose what frame inside a graphic symbol shows, graphic symbols are ideal for lip syncing or other character variations.

Using the Frame Picker for phonemes

If animated characters talk, their mouth will be synchronized with their words. Each sound, or phoneme, is produced by a different mouth shape. For example, an explosive “p” or “b” sound will be made by closing the lips, or an “o” sound will be made by a rounded open mouth. Animators draw a collection of these mouth positions to be used to synchronize to the soundtrack.

You can store each mouth position as a keyframe in a graphic symbol. Animate’s Frame Picker panel lets you choose the frame in the graphic symbol’s Timeline that matches each sound.

In this task, you’ll animate the alien’s mouth using the Frame Picker.

  1. Open the sample file 04FramePicker_start.fla in the Lesson04/04Start folder. The file contains your familiar alien character on the Stage.

    The alien is not animated on a path, but his head is a graphic symbol with multiple keyframes inside of its Timeline.

  2. Double-click the alien_head graphic symbol in the library.

    Animate takes you to symbol-editing mode for the alien_head graphic symbol. Notice that the Timeline contains five keyframes in the mouth layer.

  3. Examine each keyframe in the mouth layer by advancing the playhead from frame 1 to frame 5.

    Each keyframe shows the mouth in a different position. Frame 1 has a small closed mouth, frame 2 a rounded mouth, frame 3 a wide open mouth, and so on.

  4. Return to Scene 1 and choose Control > Test.

    Animate creates a SWF to play the animation. Nothing happens because there is only a single frame on the main Timeline, and a graphic symbol needs frames on the main Timeline to play its own Timeline.

  5. Close the test movie panel and return to your Animate document.

  6. Select frames 45 in the head and body layer and choose Insert > Timeline > Frame (F5).

    Frames are added to both layers up to frame 45.

  7. Choose Control > Play (Enter/Return).

    Animate plays the animation. Your alien now can’t stop talking! The graphic symbol plays all of its five keyframes repeatedly during the 45 frames of the main Timeline. The graphic symbol is, by default, set to loop, but you’ll select a single frame to play instead.

  8. Select the alien’s head on the Stage and in the Properties panel, Looping section, select Single Frame from the Options menu. Leave the value of the First field at 1.

    04fig72.jpg

    Now the Stage displays only one frame from the alien_head graphic symbol, which is frame 1.

  9. Select frame 10 of the head layer and insert a new keyframe (F6).

  10. With the playhead at your new keyframe on frame 10, select the alien head on the Stage. In the Properties panel, Looping section, click Use Frame Picker.

    04fig74.jpg

    The Frame Picker panel opens. The Frame Picker shows thumbnail images of all the frames inside the graphic symbol.

  11. You’ll have the alien mouth the word “hello.” For the first part of the word, select frame 3 in the Frame Picker.

    04fig75.jpg

    Now, when the animation reaches frame 10 the alien head symbol will switch from displaying frame 1 (the closed mouth) to frame 3 for the beginning of the word, “h”.

  12. Insert a new keyframe in frame 12 of the main Timeline.

  13. In the Frame Picker, select frame 4.

    04fig77.jpg

    When the animation plays frame 12, the alien head graphic symbol will change to frame 4. His mouth opens a little wider for the “eh” part of “hello.”

  14. Insert a new keyframe in frame 14 of the main Timeline.

  15. In the Frame Picker, select frame 2.

    When the animation reaches frame 14, the head symbol will switch to displaying frame 2. His mouth is rounded for the “oh” sound.

  16. In a new keyframe at frame 17, use the Frame Picker to change the mouth back to frame 1.

  17. Finally, in a new keyframe at frame 30, use the Frame Picker to change the mouth to frame 5 so the alien gives us a broad smile.

  18. Choose Control > Play (Enter/Return).

    Animate plays the animation. Your alien lip syncs “hello,” pauses, and then smiles.

    You’re done with this document, so you can save and close it.

There are currently no related articles. Please check back later.