Recipe 7.18 Duplicating Movie Clips

7.18.1 Problem

You have an existing movie clip on the Stage and you want to create duplicates of it.

7.18.2 Solution

Use the duplicateMovieClip( ) method.

7.18.3 Discussion

You can create a duplicate of any existing movie clip (except _root) by calling the duplicateMovieClip( ) method from it. The duplicate movie clip is created within the same timeline as the original, and it inherits all the settings of standard movie clip properties (such as _x, _y, _rotation, etc.) as well as onClipEvent( ) handlers from the original clip. While the duplicated movie clip does not inherit any custom properties or any event handler methods from the original, you can use an initialization object to copy properties to the new object (see Recipe 7.19). The duplicateMovieClip( ) method requires at least two parameters: the name and depth of the new movie clip.

// This example creates a new movie clip named myDupMovieClip1 at depth 1. The new
// movie clip is a copy of myMovieClip and resides on the same timeline.
myMovieClip.duplicateMovieClip("myDupMovieClip1", 1);

// This example creates a movie clip named myDupMovieClip2 with a depth of 2. It is
// initialized such that the _x property is set to 20.
myMovieClip.duplicateMovieClip("myDupMovieClip2", 2, {_x: 20});

When you use duplicateMovieClip( ), you often want to create slightly customized duplicates. In other words, all the duplicates share the same basic core but might be customized with various color settings, etc. For example, you might want to create 30 duplicates of a balloon movie clip, positioning each at random points on the Stage. A basic for statement can be useful when creating the duplicates. Also, though this aspect is undocumented, the method returns a reference to the duplicate movie clip, which can be useful in many situations.

// Use a for statement to loop 30 times.
for (var i = 0; i < 30; i++) {

  // Generate random x and y coordinates.
  x = Math.random(  ) * 550;
  y = Math.random(  ) * 400;

  // Create the duplicate movie clip with names balloon0, balloon1, etc. from the
  // original movie clip named balloonBase_mc. Each duplicate is positioned randomly
  // using the init object. The returned reference to the new movie clip is assigned
  // to the variable balloonDuplicate.
  balloonDuplicate = balloonBase_mc.duplicateMovieClip("balloon" + i, i,
                          {_x: x, _y: y});

  // Create a Color object to control the new movie clip. Assign it to a custom
  // property of the new movie clip so that you can differentiate easily between
  // Color objects.
  balloonDuplicate.col = new Color(balloonDuplicate);

  // Set the RGB for the new movie clip to a random number.
  balloonDuplicate.col.setRGB(Math.random(  ) * 255 * 255 * 255);
}

Even though the duplicateMovieClip( ) method does not apply custom properties and methods (including event handler methods) to the new movie clip, there is a technique that you can use as a short workaround. When you use a for . . . in statement to loop through all the properties of a movie clip, only custom properties and methods show up. Therefore, you can use a for . . . in loop to create an initialization object to pass to the duplicateMovieClip( ) method:

// Create an initialization object with the Object constructor, then use a for . . . in
// loop to create elements within the initialization object that correspond to the
// elements within the original movie clip.
init = new Object(  );
for (var item in myMovieClip) {
  init[item] = myMovieClip[item];
}

// Call duplicateMovieClip(  ) to create a new movie clip that inherits the standard
// properties (as do all duplicated movie clips) and the custom properties and 
// methods by way of the initialization object.
myMovieClip.duplicateMovieClip("myDupMovieClip2", 2, init);

7.18.4 See Also

Recipe 7.19