Home / Design Center / Tutorials

Using multiple timelines

Chris Georgenes

This video shows you how to work with independent timelines, specifically the main timeline and movie clip timelines. You learn about how multiple timelines can interact, and how to navigate using the edit bar. You nest movie clips, learn how those movie clip timelines interact, and nest instances to create effective animations.

Requirements

To follow along with this article, you will need the following software and files:

• Flash CS3 Professional
• Sample file (ZIP, 0.1 MB)

Watch this tutorial in the Adobe Creative Suite 3 Video Workshop.

Using multiple timelines

1. In Flash, choose File > Open and open the bouncing_ball.fla file. This is a simple, tried-and-true animation that's great for illustrating complex concepts in Flash.
2. Double-click the ball on the Stage to open it in symbol editing mode. Because it's a movie clip symbol, you won't be able to see the animation unless you open it in this mode.

3. Click and drag the playhead across the movie clip's timeline to preview it. When you have finished, return to the main Stage by clicking Scene 1 in the edit bar (see Figure 1).

   

   Figure 1: The bouncing ball symbol instance bounces across the Stage.

   This ball, of course, is just one instance of a symbol.

4. Choose Window > Library to open the Library panel. Notice that it contains the bouncing ball symbol (see Figure 2).

   

   Figure 2: The bouncing ball symbol as previewed in the Library panel. Click and drag the symbol onto the Stage to add additional instances.

5. Select the ball currently on the Stage and press the Delete key. Then drag another instance of bouncing ball from the Library panel and place it on the Stage.

6. Double-click the symbol and then play back the animation again. As you can see, this instance of the symbol is identical to the one previously on the Stage. That's the beauty of symbols: they can be recreated over and over again.

   However, the most important thing about this symbol is that the animation is nested within the symbol, off the main Stage. This lets you add additional animations in the main timeline, which would be difficult to do if you had to sync them with the symbol's animation. For example, maybe you would like the ball to bounce not just up and down, but across the Stage.

7. First, select Frame 53 and press F6 to insert a blank keyframe.

8. Hold down the Shift key and the right arrow key, and the ball will move across the Stage.

   Now all you need do is create a Motion tween.

9. Select any frame between the two keyframes. Make sure the Property Inspector is open. If not, choose Window > Properties > Properties to open it. Choose Motion from the Tween pop-up menu in the inspector.
10. Now choose Control > Test Movie to watch the combined animations. The ball bounces and moves toward the right side of the Stage.
11. Close the test movie window.

12. Double-click the ball to enter symbol-editing mode. If you preview this animation, you see just the ball bouncing up and down. But combined with the Motion tween you added to the main timeline, you have a more complex animation. This is a good example of nested timelines, or a movie within a movie.

    Now you'll look at another example.

13. Choose File > Open and open the walkcycle.fla file.

14. Double-click the character-symbol to enter symbol-editing mode (see Figure 3.)

    

    Figure 3: Double-click a symbol to open the nested animation in a separate editing space.

15. Preview the animation. This character is walking, but he's walking in place as if he were on a treadmill. If you recall from the bouncing ball example, you can combine the nested movie clip with Motion tween on the main Stage to create forward motion.
16. Click Scene 1 to return to the main Stage. Select the first keyframe and position the character off the left of the Stage.
17. Select Frame 65 and press F6 to insert a blank keyframe.
18. Move the character to the right side of the Stage.
19. Select any frame between 1 and 65. Choose the Property inspector and choose Motion from the Tween pop-up menu.

20. Move the playhead between the keyframes to watch the character walk across the Stage. Notice that his feet are slipping. This is a clue that the timing might not be right.

    You can correct the timing by inserting or deleting frames. In this case, you'll insert frames. It can be done in two ways.

21. First, select and drag the last keyframe out, to Frame 85.

22. Or, drag to select several frames in the middle of the animation. Then press F5, which is the command to insert frames.

    Either way, inserting the extra frames lengthens the Motion tween and slows down the animation.

23. Preview the animation again to check your work.

    Without the nested animation, you would have to insert keyframes into what is now the movie clip's timeline, and incrementally move the character across the Stage. That's an animator's worst nightmare.

    You can also take advantage of being able to scale, re-color and rotate your symbols with Motion tweens.

24. Select Frame 1 and choose the Free Transform tool. Scale the character down to about half the size and replay the animation. Now he's growing larger as he walks across the Stage, creating the impression he's walking toward the viewer (see Figure 4).

    

    Figure 4: Scale a symbol using the Free Transform tool.

    Nested animations are powerful and very efficient, so take advantage of them whenever possible.

Where to go from here

For more information and additional tutorials, visit the Adobe Design Center.