Recipe 4.6. Looping Animations

Problem

You want to create an animation, or a portion of an animation, that loops indefinitely.

Solution

Embed the animation in a movie clip symbol.

Discussion

Unless you use ActionScript to tell it otherwise, every timeline begins playback as soon as it is loaded and plays through the timeline at the document frame rate until it reaches the end. After it plays the last frame, it loops back to the beginning and plays all over again. In other words, looping animations is Flash's default behavior, and all you need to do to create one is to create any animation and export the .swf file.

But you may find that you need to loop portions of an animation, while other portions are not looped, or not looped as often. Imagine a cartoon in which a character is chased across a background; the camera follows the character, who remains in the center of the screen while the background scrolls by. Several animated elements may be in play, such as the following:

• A 5-frame loop depicting the legs while the character is running

• A 5-frame animation of the arms swinging wildly

• A single-frame graphic of the torso

• A 5-frame looping animation of the head turning back and forth

• A 10-frame loop of a distant bird's wings flapping

• A 50-frame loop of the background

Because the animation comprises elements that loop and others that don't, and because the loops are of different lengths, the animator cannot rely on the overall looping behavior of the main timeline. Each loop needs to animate independently of the others, so that the running legs loop will play nearly seven times before the background loops once.

You can loop animated elements independently by storing each looping animation in a movie clip. Movie clip timelines behave like the main timeline, in that they play back and loop by default. But they run independently of the main timeline and each other. Thus, by placing the loops into separate movie clips, and placing an instance of each on the main timeline, the animator gets the benefit of each loop's indefinite playback without having to worry that they are of different durations.

By moving animation loops into movie clips, you employ the practice, recommended in the introduction, of separating and isolating animation components from one another. This approach is architecturally more sophisticated and therefore requires more effort up front than merely storing content on different layers of the same timeline. But it is more flexible and powerful, because you can customize each one's timeline for its own needs.

Looping animations are often designed to be seamless. That is, you often don't want it to be obvious to the user when the animation reaches an end and loops back to the beginning. The 5-frame loop of the legs running in the example just cited is one such example: the animator does not want a perceptible jerk in the animation to appear every fifth frame.

To create a seamless loop, make sure that the content in the last keyframe of its timeline is near to and animating toward the first. At the same time, you don't want the last frame and the first frame to be identicalwhich would cause a seeming pause for a frame.

See Also

Recipe 4.13