Skip to Content
Faculty of Design / Video Tutorials / Flash - AS2 / Using attachMovie() & duplicateMovieClip

Using attachMovie() & duplicateMovieClip

Author: Bill Trikojus

 
1

Document setup

 
2

Link and export dynamic movie clips

 
3

Positioning dynamic movie clips

 
4

Multiple instances and random effects

 
5

Duplicate movie clip

 
 
1

Document setup

 
 


Ok let's have a look at the attachMovie and duplicateMovieClip actions.

These 2 actions are quite similar - they both allow you to take a movieclip and duplicate it how ever many times you want. You can give these duplicates instance names (in fact you have to!) and then target them in any way you could target a movieclip that you manually placed on the stage.

This is what you will be making -

attachMovie()


Download source


duplicateMovie()


Download source

 
2

Link and export dynamic movie clips

 
 


Open Flash and change the stage size of the new document to 300X300 and the frame rate to 21fps.

Draw a small (button sized) rectangle on the stage. Type "reset" (using static text) on top of your rectangle. Select both the text and the rectangle (at once) and convert them to a movieclip - name it "resetButton" and ensure that the registration point is set to the top-left corner.

convert to Symbol

Now delete the resetButton mc from the stage so that it only exists in the library. Select it in the library and from the drop down menu up the top-right of the library choose "linkage". Check the "export for actionscript" box and give it an identifier of "myResetButton".

Linkage Properties

This is vital. If you do not tell Flash to export your symbol like this then, when it comes to publishing your movie, Flash will look at the stage and go "hmmm well that symbol didn't end up being used in this movie so I won't bother putting it in the swf". Setting up the linkage like this simply forces Flash to export our symbol so we can call it via actionscript.

OK. Click on the first frame of the only layer in your timeline. Add this action to the frame -

stop();
_root.attachMovie("myResetButton","newResetButton",200);


Ok what does this do? Well stop() obviously just stops the main timeline. The next line attaches our reset button to the main timeline (_root). It does this by first looking for the symbol with the identifier "myResetBut". When it finds it, an instance of our mc is attached to _root and given an instance name of "newResetButton". It is attached at a depth of 200.

Test your movie.

 
3

Positioning dynamic movie clips

 
 


You will notice that Flash aligns the registration point of the mc we are attaching with the registration point of whatever we are attaching it to. In this case, we are attaching it to _root so the registration point if the top left corner of the stage.

OK but maybe we don't want it there. Our new instance has an instance name so we can position it where ever we want. Add this code under the other actions -

newResetButton._x=200;
newResetButton._y=250;


What this does is move our instance to an x position of 200 and a y position of 250. Note - Flash will align the registration point of our mc (which is the top left corner in this case) with the co-ordinates that you give it.

Test your movie again.

 
4

Multiple instances and random effects

 
 


OK so our button is positioned where we want it on the stage but its not doing anything. Click on the drop down menu in the library and select "new symbol". Make it a movieclip, name it "shape1" and click OK. You should automatically be inside your new mc so draw a shape. Mine looked like this but do whatever you want -

Shape1

OK click on shape1 in the library and open up the linkage window. Check the "export for actionscript" box and leave its identifier as "shape1". Make another new symbol from the library drop down menu. Make it a movieclip, name it shape2 and again draw whatever you want inside it. Set up the linkage for the shape2 mc and leave its identifier as "shape2".

OK click on the "scene 1" button up the top left to get back to the main timeline. You should have nothing on your stage and 3 movieclips in your library (with linkage set up for each of them). Ok now we need to get our shapes on to the stage. Lets use attachMovie again but this time make our button do the attaching. Add this action under the others in frame1.

newResetButton.onRelease=function(){
_root.attachMovie("shape1","clip1",5);
_root.attachMovie("shape2","clip2",6);
}


Test your movie again and click on the button.

The shapes are attached to the main timeline and again have their registration points aligned to the top-left corner of the stage. Shape2 appears in front of shape1 because it was attached to a higher depth (6). OK now I'm sure you're all totally blown away by what you have seen so far but don't pass out from excitement just yet.

Let's use a couple of for loops to make our button attach many copies of our shape movieclips. Change the actions that you already have for the button to

newResetButton.onRelease=function(){
for(i=0;i<20;i++){
_root.attachMovie("shape1","clip1"+i,i);
_root["clip1"+i]._x=random(500);
_root["clip1"+i]._y=random(500);
_root["clip1"+i]._rotation=random(360);
_root["clip1"+i]._alpha=random(100);
}
for(i=50;i<60;i++){
_root.attachMovie("shape2","clip2"+i,i);
_root["clip2"+i]._x=random(500);
_root["clip2"+i]._y=random(500);
_root["clip2"+i]._rotation=random(360);
_root["clip2"+i]._alpha=random(100);
}
}


What this does is make 20 copies of shape1 and 10 copies of shape2. After making each copies, flash places the new instance at a random position on the stage, rotates it a random amount and gives it a random alpha value. You will notice that all the shape2 copies are still appearing above the shape1 copies. This is because they are placed on a depth between 50 and 59, whereas the shape1 copies are placed on a depth of between 0 and 19 (depending on what i was up to at the time - by this I mean i the variable, not I as in me :) ).

OK test your movie again and click on the button a few times. Everytime the button is click, new instances of our mcs are attached which replace the old ones (because they are being attached into the same depths). You can get some nice effects with this.

You can download this attachMovie example from here.

Two more things about attachMovie.  Using the square bracket syntax about can get pretty messy if you need to do lots of things to your newly attached clip, so to clean the code store the new clip in a temporary variable and then use that variable to set the new clips properties like this:

for(i=0;i<20;i++){
newClip= _root.attachMovie("shape1","clip1"+i,i);
newClip._x=random(500);
newClip._y=random(500);
newClip._rotation=random(360);
newClip._alpha=random(100);
}

You can also attach events to the new clips as soon as they are attached to the stage.  

for(i=0;i<20;i++){
newClip= _root.attachMovie("shape1","clip1"+i,i);
newClip._x=random(500);
newClip._y=random(500);
newClip.onRelease=function(){
trace('You just clicked '+this._name);
}
}

 

When using this temporary var syntax, please note that there is no point trying to do things to 'newClip' after you have exited the for loop - newClip will only be storing the last clip that was attached.

 

5

Duplicate movie clip

 
 


OK that will do for attachMovie. Let's look at duplicateMovieClip. The only real difference between attachMovie and duplicateMovieClip is that attachMovie takes your mc our out of the library via its linkage name and makes a copy of it, whereas duplicateMovieClip needs the mc you want to copy to be on the stage with an instance name. Lets make an example of duplicateMovieClip.

Make a new document in Flash - the default size and everything will do.

Draw a rectangle down the bottom of the stage somewhere and convert it to a button - name it myButton and give it an instance name of "button1". OK now draw a circle and convert it to a movieclip. Name it myCircle and give it an instance name of "circle1". Move circle1 off to the left of the stage. Make a new actions layer and place this action on the first frame.

button1.onRelease=function(){
for(hiThere=1;hiThere<8;hiThere++){
circle1.duplicateMovieClip("circleCopy"+hiThere, hiThere);
_root["circleCopy"+hiThere]._y=100;
_root["circleCopy"+hiThere]._x=hiThere*circle1._width;
}
}


OK the first line tells us that this is an action that will happen when we click on button1. We then get into another for loop. This time I have used "hiThere" as our variable just to prove to you that it really doesn't matter what you name your varaibles ("i" is not a magical letter). So you can see from the parameters of out for loop that the code underneath with run 7 times. Each time it is run, our circle1 mc is duplicated, given a new (and unique) instance name and placed on a depth between 1 and 7. We then position our duplicate at 100 y. To get the new x position, we multiple hiThere by the width of circle, which will make all our copies line up right next to each other.

Test your movie and click on the button.

Ok that will do from me. Have a play with attachMovie and duplicateMovieClip and try and do something interesting with it.

You can download this duplcateMovieClip example from here.

I have included below a little something that I got and slightly adapted from a source file provided with the book "Flash MX - Upgrade Essentials". Some of the actions covered are too complex for this tute but it does use attachMovie and duplicateMovieClip so if you want to have a look at the source click here.  To learn more about attachMovie and duplcateMovieClip in Actionscript 1.0, check out 'ActionScript for Flash MX: The Definitive Guide' by Colin Moock.

Click on the balls and watch what happens.

 

 

bulletBack


Share

Like this? Click a link below to share it...


Subscribe and Download

Subscribe to the Swinburne Faculty of Design Podcasts

Comments

2008-05-24: Ravinder Kumar said:
Hey, very good examples here it is really helpfull to understand the functions like duplicateMovieClip() and other.

Thaxxxxx

2008-06-21: Indyaner said:
Not one of the Downloadlinks from above works. =(

2008-06-21: Bill Trikojus said:
download links should be ok now

cheers

2008-06-27: rupu said:
this example is extraordinary.
but the thing is
when I create duplicate movie clip it goes only x-axis. actually when duplicateMovieClip touch the end of the stage I want it comes to next row.
Please tell me solution

2008-06-28: Bill Trikojus said:
The most common way of create a grid of dynamic clips is to use a for loop inside a for loop - one for rows and one for columns

eg


// AttachMC Grid Layout Code
// Jesse Stratford, www.actionscripts.org
rows = 10;
cols = 15;
height = 10;
width = 10;
count = 10;
for (var r = 1; r<=rows; r++) {
for (var c = 1; c<=cols; c++) {
count++;
name = 'clip'+r+'_'+c;
_root.attachMovie('myClip', name, count);
with (_root[name]) {
_x = c*width;
_y = r*height;
}
}
}



cheers

2009-01-14: Tracey said:
Bill Trikojus, I was wondering if you could do the same grid pattern but place the movie clips beginning in the center and going out with an equal number of circles around the center point?

2009-05-12: Junior said:
very, very very very goooooooood!
thank you!

2009-06-27: manas said:
how i download?

Post a comment

Garbage posts and SPAM will be deleted.

* Name:
* Email: (will not be made public)
* Comment:
* Reply Notification:

Search this site

Features

Graduate Gallery

Online Tutorials

Photoshop
Maya
Flash
More...

Blackboard

Login to Blackboard

Contact Information

Current students and general enquiries

Prospective students Domestic TAFE & University enquiries

International student enquiries

Prospective students Domestic Postgrad enquiries

Gallery Work

Flash Game

Flash Sound Module

Pirate Attack - Flash Game

Flash Sound Module

Suggest a tutorial