Animate CC: Looping Animations

Introduction

There are a number of ways to loop animations within Animate CC but the method with the most control (without code) is through use of the Graphic Symbol. Through smart use of well-placed keyframes, you have full control over the looping behavior of this symbol type. We can also create looping animations with the MovieClip Symbol. Each has its own unique properties when it comes to looping behavior and we will have a look at both in this article.

The Sample Document

Download FLA

In the example document, we can see a variety of looping mechanisms at work. The most obvious is that main timeline loops continually. You can see this in action by testing the published animation in your web browser. If we want to stop the animation from looping, we can use a bit of code to so. Or since this an HTML5 Canvas document type, we can instruct the animation to stop at the last frame from the Publish Settings.

Looping Options

In addition to the main timeline – the sun loops continuously as a MovieClip symbol and the cloud crosses the sky three times as a Graphic Symbol. We’ll now have a quick look at both these mechanisms and some of the options for controlling them.

MovieClip Symbols

One of the unique things about MovieClip symbols is that their timelines run completely independent of any other timeline. This means that even if an instance of a MovieClip symbol exists upon only a single frame of its containing timeline… it will continue to loop of its own accord. The second great thing about MovieClip symbols is that their instances can be assigned an “instance name” and then controlled through either ActionScript or JavaScript. Using such a construct, you can track the number of times a MovieClip symbol loops and stop it at a certain point with code.

The image below shows the internal timeline of the Sun MovieClip. It has but 2 keyframes and the differences between the two provide for the flickering animation seen when the project is run. Notice as well that the sun instance continues to flicker throughout the entire animation.

MovieClip symbols are perfect for nested, continuous, looping animation which runs independent of the parent timeline.

Graphic Symbols

If you don’t want to deal with code, but still want to retain some measure of control over an internal piece of animated content… the Graphic symbol is a great choice. Unlike MovieClip symbols, the Graphic symbol timeline is bound directly… frame-by-frame… to the parent timeline. This makes it very easy to know how many frames of animation a Graphic symbol instance will occupy across the main timeline. Graphic symbol instances, however, cannot be given instance names and cannot be controlled through code.

The figure below shows the internal timeline of the “Cloud” Graphic symbol. The animation occupies 24 frames – a full second of animation with the project set to 24 frames per second (FPS). When an instance is added to the main timeline, it will require the same 24 frames in order to complete a single, complete playback. If the frames it occupies fall short – the Graphic symbol instance will only animate across the frames which are present.

However, if you wanted to loop a Graphic symbol instance across the main timeline – all you need to do is ensure that there are more frames than necessary. With our Graphic symbol timeline taking up 24 frames, if we wanted it to loop twice on the main timeline, the instance would require 48 frames instead of 24. This will cause the internal animation to play twice. Similarly, if you wanted it to loop three times, you would use 72 frames. This is how the sample file has been configured.

With a Graphic symbol instance selected on the stage, have a look toward the “Looping” section of the Properties panel.

For Options, you can choose between “Loop” (which is the default behavior), “Play Once” which will only play the Graphic symbol timeline once no matter how many extra frames exist, and “Single Frame”… which basically only shows a single frame of your choosing and does not play at all. You can use these options across different keyframes to stagger a looping animation at various points as well. Simply change the “First” frame number selection at the various keyframes.

Conclusion

No matter what platform you may be targeting with Animate CC, you have a number of options in terms of how individual, internal animated symbol instances will loop – and the amount of control you can exert over each one. There is a workflow and procedure for just about any scenario you might think of!