Recipe 17.12. Manually Synchronizing Sounds and Visuals

Problem

You want to synchronize your animation to a soundtrack.

Solution

Display the timeline in Preview or Preview in Context mode so that you can more easily see the waveform, and then use the mouse to adjust keyframes so that they properly synchronize with your soundtrack.

Discussion

As discussed in Recipe 17.4, use the Stream synchronization setting when you want to ensure that Flash will keep your animation and audio in sync. After you have added your sound to its own layer, as described in Recipe 17.3, display the timeline in either Preview or Preview in Context mode. You can select these settings from the Frame View menu. You can open the Frame View menu by clicking the Frame View button in the upper-right corner of the timeline panel.

Both the Preview and Preview in Context settings display the timeline in an enlarged format so that it is easier to see the waveform of your sound. In addition to showing the waveform in a larger format, both of these Frame View settings cause Flash to display each frame's contents within the timeline. The difference between the two settings is that Preview displays all visual contents as an exact fit within each frame in the timeline, while the Preview in Context mode displays the contents in the context of the entire stage. In the three keyframes in the timeline there are three shapes: a circle, a square, and a triangle. In Preview mode, the entire frame is filled with the shape. In Preview in Context mode, you can see the shapes in the context of the stage, and you can see that the circle appears to the left side, the square to the right, and the triangle near the center. Which mode you choose is entirely up to you and what you prefer.

When you have your sound added to the timeline and you have chosen to display the timeline in Preview or Preview in Context mode, you are ready to synchronize your visual and audio elements. Add animation to the movie as normal, but with the enlarged timeline view, you can more easily see how to sync all the elements.