Duplicate
Movie Clips (MX2004)
by kirupa | 7
August 2005
It's been about three years since I addressed this topic in the original
duplicate movie clips tutorial:
http://www.kirupa.com/developer/actionscript/duplicate.htm
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 the
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:
Create a new animation, and set the stage's width and height to
300 and 200 pixels respectively.
Now, draw a circle. It can be of any color and style, but I
will stick with the usual blue:
[ draw a circle ]
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.
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 mc the
instance name 'circle' ]
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 ]
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 (less than 100).
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 duplicateMovie 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, etc. 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,
for example, 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 duplicateMovie
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.
Specifying the parameters for your
duplicated movie clip is optional. You can get away with just specifying the
new movie clip name and the depth: mc.duplicateMovieClip(newName, depth)
I have provided a source file for you to look at:
Getting Help
If you have questions, need some assistance on this topic, or just want to
chat - post in the comments below or drop by our friendly forums
(where you have a lot more formatting options) and post your question. There are
a lot of knowledgeable and witty people who would be happy to help you out
Share
Did you enjoy reading this and found it useful? If so, please share it with
your friends:
If you didn't like it, I always like to hear how I can do better next time.
Please feel free to contact me directly at kirupa[at]kirupa.com.
Cheers!
This is a companion discussion topic for the original entry at http://www.kirupa.com/developer/actionscript/duplicatemovie_mx2004.htm
