Controlling the animation of nested MovieClips

I have seen this issue pop up several times recently, so I decided to dedicate a post to it.

Here’s the situation: you have a complex hierarchy consisting of a number of animated MovieClips, nested into one another at various levels. You’d like to be able to start and stop the animation of the whole hierarchy (think of a “pause” functionality in a game for example), but the standard stop / play methods of the MovieClip class just aren’t going to cut it, as they only apply to the top-level timeline.
Now what?

Well, I made a little class called AnimationControl, which recursively crawls the entire hierarchy, and stops / plays every element within.
Playing around with the demonstration SWF below will make this whole concept a lot clearer than extra paragraphs of text could, so go ahead and click away:

…and now for the code.

Just import the AnimationControl class, and call the static methods using something like AnimationControl.playAll(yourobjectname);.
It’s pretty robust – at least it certainly won’t freak out if you try to use it on weird object-types with no timeline.

Also, since the function-names to call (stop and play by default) can be explicitly specified, adding more elaborate functionality (like gotoAndStop ("yourlabelname");) should be a fairly trivial change.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// (C) edvardtoth.com
 
package {
 
	import flash.display.DisplayObjectContainer;
	import flash.display.MovieClip;
 
	public class AnimationControl {
 
		public function AnimationControl() {
		}
 
		public static function stopAll (item:*):void {
 
			if (item is DisplayObjectContainer) {
				controlAnimation (item, "stop");
			}
		}
 
		public static function playAll (item:*):void {
 
			if (item is DisplayObjectContainer) {
				controlAnimation (item, "play");
			}
		}
 
		private static function controlAnimation (item:DisplayObjectContainer, funct:String):void {
 
		var clip:MovieClip;
	        var child:DisplayObjectContainer;
 
		    if (item is MovieClip) {
 
				clip = item as MovieClip;
 
				clip[funct]();
		    }
 
		    if (clip.numChildren > 0)
		    {
		        for (var i:int=0, n:int = clip.numChildren; i < n; ++i)
		        {
		            if (clip.getChildAt(i) is DisplayObjectContainer)
		            {
		                child = clip.getChildAt(i) as DisplayObjectContainer;
 
		                if (child.numChildren != 0) {
 
					controlAnimation (child, funct) 
 
		                } else if (child is MovieClip) {
 
					clip = child as MovieClip;
 
		             	        if (clip.totalFrames > 1) {
 
					clip[funct]();
 
					}
		                }
		            }
		        }
		    }
		}
 
 
  }
}
One Response to Controlling the animation of nested MovieClips
  1. Mr. BZIK
    June 16, 2011 | 12:24 pm

    thanks for sharing)

Leave a Reply

Headway Themes — The Drag & Drop WordPress Theme