Duplicating a Movie Clip

[ LiB ]

You're probably wondering why you would want to duplicate a Movie Clip. There are many reasons why you might want to do so, but in this chapter, I'm only going to concentrate on particle systems.

Before jumping right into what particle systems are and how to program them, allow me to introduce a smaller demo that will get you acquainted with duplicating Movie Clips. Figure 6.1 shows a small tank demo that I have written showing how you can duplicate an object that is already on the stageall the code within it also gets duplicated .

Figure 6.1. Duplicating objects on your screen


Open up GDA_PROG6.1a.fla from the CD. You'll find a nice little tank in the middle of the screen. This tank has been programmed to move up and then wrap around the bottom with the following code.

 onClipEvent(enterFrame) {   this._y -= 10;   if (this._y < -this._height)     this._y = 400; } 

Go ahead and test the SWF and make sure you understand how the code works. This code basically subtracts 10 from the tank's vertical position on each frameand when the tank hits a position off the top of the screen, the code resets the tank's vertical position to 400.

For the second part of this demo, I modified GDA_PROG6.1a.fla and saved it as GDA_PROG6.1b.fla. This demo duplicates the tank twice on the stagecode and all. It even assigns a different horizontal position to each duplicated tank. How was this done? Let's jump into the following listing, which is code that I wrote on the main Timeline, under the Actions layer, so you can see how it was done.

 duplicateMovieClip("tank", "tank0", 1); duplicateMovieClip("tank", "tank1", 2); 

 tank0._x = 100; tank1._x = 350; 

As you can see, the new method duplicateMovieClip was used here to create the two clones . The duplicateMovieClip method takes the name of the instance you want to duplicate in the first parameterin this case, "tank." The second parameter is the name of the instance clone that you want to create. The third parameter is instance's depth number. Each duplicated instance must have its own unique depth or else the clone cannot be displayedI'll speak more about this later. I'll introduce the method version of duplicateMovieClip a little later in this section. Which one you use is up to you.

So now that you know how to duplicate Movie Clips, what is a particle system? A particle sys tem is a program that can handle multiple, similar types of objects with different properties and attributes. The English translation is: A particle system is a program that can handle elements like snow, rain, sparks , dust and other elements that have similar characteristics.

I have prepared a demo for this section. You can find the SWF file under the GDA_CH06 folder on the CD. The name of the file is GDA_PROG6.2.swf. Check out Figure 6.2.

Figure 6.2. A particle system in action


If you play the demo, you'll see snow falling continuously. If you open GDA_PROG6.2.fla, you'll notice that there is only one snow particle. This snow particle is really a Movie Clip that has an instance name. This Movie Clip instance also has code in it.

If you look on the main Timeline, there is also code embedded in the first frame. This code duplicates the snow particle Movie Clip along with its code, allowing the snow particle Movie Clip to act as it does.

What would happen if you didn't duplicate this Movie Clip? Simple. The clip that is there now would move towards the bottom of the window and it would loop around the top of the window with code that you are already familiar with. When I set it to create additional copies, I made sure the new copies had different speeds and positions . It's a very cool effect, if you ask me. Try playing around with different attributes once you finish this section.

So what is this special method that can duplicate your Movie Clips? It happens to be the aptly-named duplicateMovieClip. duplicateMovieClip is a built-in method in all Movie Clips. Check out its usage:

 myMovieClip.duplicateMovieClip("newInstanceName", depth); 

This definition is true when myMovieClip is the instance name of your Movie Clip. So, if your named your instance "particle," you would be able to write:

 particle.duplicateMovieClip("newInstanceName", 1). 

The first parameter is a string representing the internal name of the new instance. The name could be anything, but be careful to not give the instance the same name as another instance or else Flash won't know what to do with it.

The second parameter is really special, and you have to keep track of it somehow. No two Movie Clips can be on the same internal depththey all have to be on their own layer or neither will be displayed. As this is the case, you have to be careful to assign a different layer depth to all the Movie Clips you create through ActionScript.

Examine the following listing. It was extracted from GDA_PROG6.2.fla, from the Actions layer. We'll examine the rest of the code (which is in the Movie Clip) in a little while.

 // GDA_PROG6.2.fla // Game Development with ActionScript // This program demonstrates how to // duplicate a movie clip with built in // event handlers... // Initialize the variable that decides // how many particles will fall numPart = 50; // One thing we can do here is // create some particles. for ( var index = 0; index < numPart; index++) {   // Duplicate them!   particle.duplicateMovieClip("Particle"+index, index); } 

The first thing I did in this code is initialize a variable that is set to 50. This variable was set to determine how many particles will be in this system. How will the particles be created? The duplicateMovieClip method was put in a loop that you will soon see.

Once you enter the loop in this example, you will immediately notice that it will loop 50 times. In other words, it will loop while index is less than numPart, which is currently 50. Once in the loop, you'll see the following line:

 particle.duplicateMovieClip("Particle"+index, index); 

This is a pretty standard (and slick) way of creating an instance name and assigning a layer automatically when you're in a loop. Let's look at the first parameter of the duplicateMovieClip method. I wrote it as this:


If you look up to the loop, you'll realize that index is the loop's control variable. What this means is that index will be incremented after each iteration, which means a new string will be created in this linethis is what allows this script to assign a different name to the instance each time. To see some of the names that are assigned, look at the following example:

 Particle0 Particle1 ... Particle4 Particle5  Particle6 ... Particle49 



When concatenating a number to a string, the number will be converted to its string equivalent before being attached to the end of the original string.

So now that you know how the loop is creating the 50 new particles, how do you assign the layer depths? I'll be nice and give you the answer to thatby using the index variable again. Loops are great! Using the loop's variable allows us to have a variable that's steadily incrementing while killing more than two birds with the same stone. Just like in the last example, Particle0 will be on layer 0, Particle1 will be on layer 1, and so on.



Try not to confuse the depths and layers that I'm talking about in this section with the layers that you see on your Timeline.These depths (as Macromedia refers to them) are internal and have a really complex structure.You don't need more than what is being explained here to be able to completely work with them. Of course, you can move on and do more research if this chapter is not overwhelming enoughwho's stop ping you?



"Why 51?" you might ask. It's because you created 50 duplicates this does not include the original you duplicated. So, since you have 50 duplicates AND the original instance on your stage, this totals up to 51. Get it?

So, after this loop is done, you have 51 identical Movie Clips on your screen. I thought they were all supposed to have different personalities, you're thinking. They do! Let's go through the following listing, shall we?

 onClipEvent(load) {   // Initialize   // Math.random returns a number from   // 0 to 1. By multiplying a number,   // you can get it to return a certain   // range of numbers.   this._x = Math.random()*320; // Returns   0-319   this._y = Math.random()*240; // Returns   0-239   speed = Math.random()*2+6; } onClipEvent(enterFrame) {   // Moving code is here =)    this._y += speed;   if (this._y > 240) this._y = 0; } 

This listing was extracted from inside the Movie Clip that's in the project file GDA_PROG6.2.fla. This is the code that is duplicated into each of the new instances and that causes them to move themselves . This is also a great example of OOP.

Here we see two familiar event handlers. One is onClipEvent(load) and the other is onClipEvent(enterFrame) . Just to recap, onClipEvent(load) executes its body when the Movie Clip is first created (or duplicated) and loaded. onClipEvent(enterFrame) executes on every frame. This is where the motion code is contained.

Let's look at a snippet of what's inside the onClipEvent(load) function:

 this._x = Math.random()*320; // Returns 0-319 this._y = Math.random()*240; // Returns 0-239 speed = Math.random()*2+6; 

You are familiar with everything here, but let's go through it anyway. The first line in the snippet of code stores a number in the range of 0319 into this._x . In other words, the moment a value is pushed into this property of the Movie Clip it will immediately be placed in the respective screen position. Same thing goes for the _y propertyexcept that a value from 0239 is being assigned.

Now we encounter this new speed variable. You can tell it is global because I didn't use the var keyword. Also, as I created the speed variable within a Movie Clip (that is duplicated), it becomes a property of the Movie Clip (and is in each of the Movie Clips that are created).

Let's talk about what's happening in that last line with the calculation. By multiplying 2 by the Math.random method, we get a number from 0 to something close to 2then we add 6 to this result. So what's our new possible range? Our lowest number, 0, is added to 6, so our slowest speed is 6. And as our highest is something close to 2, our highest speed will almost be 8. In conclusion, our range for our speed is 6 to approximately 8. In the actual code, I modified that line so the speed varies exactly from 6 to 8, not approximately 8check it out. It's a great way to learn.



You might notice that I did not round before assigning values to the _x and _y properties.You might argue that I should have because there is no such thing as a .5 pixel position.That's true, but I wanted to show you that Flash could interpret these values to give you more of an exact translation.Therefore, you shouldn't worry about the conver sion when assigning floats to these properties.

Now that we know what happens when the Movie Clip loads, let's look into what happens every frame thereafter. I stripped down the onClipEvent(enterFrame) function and this is what I found inside:

 this._y += speed; if (this._y > 240) this._y = 0; 

This code is simple but effective. On every frame, the speed property is used to increment the _y property of the Movie Clip. If you look in the project file you will notice that I wrote speed as this.speed. this.speed is referencing the same variable, but I wrote it differently so you can get used to looking into other people's code and understanding exactly what it's doing. As far as those calculations go, the speed variable sums are accumulated in this._y and immediately reflected on the screen.

The next line, if (this._y > 240) this._y = 0; , is a conditional statement. It tests to see if _y is greater than 240this would mean the particle is off the bottom of the screen. If it is, the statement resets this._y back to 0and over we start again. Meanwhile, this very same logic is happening in all the other clips that were duplicated from this one.

And that's how easy the particle system was to create. I must admit though, the concepts were hard for me to grasp the first few times, so don't feel bad if you have to practice a bit to get it down.

[ LiB ]

Game Development with ActionScript
Game Development with ActionScript
ISBN: 1592001106
EAN: 2147483647
Year: 2004
Pages: 162
Authors: Lewis Moronta

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net