Duplicate Movie Clips in Flash MX 2004

by kirupa   | filed under Flash and ActionScript

It's been about three years since I addressed this topic in the original duplicate movie clips tutorial: Duplicate Movie Clips. I guess three years is a long time when it comes to the internet, so it's about time that I revisit this tutorial. There are some changes in how duplicateMovieClip works since my earlier tutorial, so I hope to cover those changes in this tutorial along with covering the basics of duplicating movie clips in Flash.

For an example of what you will create, click on the hollow circle in the following animation:

[ click on the hollow circle to generate duplicate circles ]

Let's Get Started

1. Create a new animation, and set the stage's width and height to 300 and 200 pixels respectively.
2. Now, draw a circle. It can be of any color and style, but I will stick with the usual blue:

[ draw a circle ]

3. Select your newly drawn circle and press F8 or go to Modify | Convert to Symbol. From the Convert to Symbol window, select the option for Movie clip and press OK.
4. It's time to give our movie clip an instance name. Ensure you still have your circle movie clip selected. Look in the bottom-left of your screen where the Properties panel should be, and give your movie clip the instance name circle:

[ give your circle movie clip the instance name 'circle' ]

5. Let's now add some code. Select the first frame in your Timeline, and press F9 or go to Window | Development Panels | Actions. Copy and paste the following code into your Actions window:

dupMovie = function () {
  for (i = 0; i < 100; i++) {
    circle.duplicateMovieClip("circle" + i, i, {
      _x: Math.random() * 300,
      _y: Math.random() * 200,
      _alpha: Math.random() * 50
    });

    with (eval("circle" + i)) {
      _xscale = _yscale = Math.random() * 300;
    }
  }
};

dupMovie();

[ add the above code to the first frame of your movie ]

6. If you preview the animation, you will find your one circle replicated into a hundred more circles.

Code Explanation

As always, here is an explanation of what the code does:

dupMovie = function () {
  for (i = 0; i < 100; i++) {
    circle.duplicateMovieClip("circle" + i, i, {
      _x: Math.random() * 300,
      _y: Math.random() * 200,
      _alpha: Math.random() * 50
    });

    with (eval("circle" + i)) {
      _xscale = _yscale = Math.random() * 300;
    }
  }
};

dupMovie();

I first create a new function called dupMovie that contains all of our code. While you do not have to create a new function to execute the code for our trivial animation, it is easy to manage or re-run code when it is contained in its own little function.

Notice that I make a call to our dupMovie function by writing dupMovie();. Simply declaring a function does not necessarily mean the code in the function is executed. Since this function does not have any event handlers attached to it, I have to manually make a call in order to execute any code contained within it.

for (i = 0; i < 100; i++) {
  circle.duplicateMovieClip("circle" + i, i, {
    _x: Math.random() * 300,
    _y: Math.random() * 200,
    _alpha: Math.random() * 50
  });

  with (eval("circle" + i)) {
    _xscale = _yscale = Math.random() * 300;
  }
}

I create a simple for loop in the above section of code. I initialize a variable i, and I continue executing any code contained until the value of i reaches 99, which is less than 100.

for (i = 0; i < 100; i++) {
  circle.duplicateMovieClip("circle" + i, i, {
    _x: Math.random() * 300,
    _y: Math.random() * 200,
    _alpha: Math.random() * 50
  });
}

This is the line that contains our duplicateMovieClip code! The format for using the duplicate movie clip function is:

mc.duplicateMovieClip(newName, depth, { parameters });

In the above format, mc is the name of the movie clip you will be duplicating, newName is the new name of your duplicated movie clip, and depth is the depth of your newly duplicated movie clip. The parameters section allows you to easily change movie properties of your new duplicated movie clip from within the duplicateMovieClip function itself.

In our code, circle is the movie clip we are duplicating. Each newly duplicated movie clip will follow the format "circle" + i. In other words, your movie clips will be called circle0, circle1, circle2, and so on up until the final value of i as determined by our for loop.

For the depth, I simply use the value i. For more complicated movies, you would use something that takes into account the depth of other objects on your stage by using getNextHighestDepth().

The most exciting feature is the ability to adjust the properties for duplicated movie clips! For example, in my above code, I adjust the x position, y position, and alpha:

{
  _x: Math.random() * 300,
  _y: Math.random() * 200,
  _alpha: Math.random() * 50
}

Basically, any movie clip property you can adjust, you can use in your duplicate movie clip function. Just be sure to notice that instead of typing in the usual format of this._y = 100, you would instead use the format _y:100.

Of course, you don't have to modify properties from within the duplicateMovieClip function. You can still use the old fashioned method of adjusting movie clip properties by using a this[object] or eval statement:

with (eval("circle" + i)) {
  _xscale = _yscale = Math.random() * 300;
}

I use a with statement combined with eval to adjust the _xscale and _yscale properties of the duplicated movie clip. Of course, eval("circle" + i) returns an object value such as circle0, circle1, circle2, etc. It's the same as you manually typing circle0 as the movie clip you want to work with.

mc.duplicateMovieClip(newName, depth);

I have provided a source file for you to look at:

Download the final source

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇