- Creating Sliding Panels for Navigation and Transition Effects
- Other Uses of the Slide Algorithm
- Multiple Mouse Slide
- Coding the Multiple Movement Algorithm
- Using Functions to Make Efficient Code
- Passing Parameters to Functions
- Duplicating the Movie Clip On-the-Fly
- Adding Scale to the Effect
- The Sliding Mask Transition Effect
- Creating the Function for X and Y Movement
- Adding to the Transition Effect
- Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
Duplicating the Movie Clip On-the-Fly
To duplicate the movie clip many times, when the movie is run, you need to add some code to the main timeline. This code is run only once.
To duplicate a movie clip, use the built-in function duplicateMovieClip. This function has two parameters. The first is the new name of the duplicated movie clip. The second is the level number of this new clip. Note, however, that you can only have one movie clip per level. Any new clip put onto a level where there is an existing movie clip will delete the old clip. So, to duplicate the panel1 movie clip, for instance, you could enter the following code:
_root.panel1.duplicateMovieClip( "panel2",2)
This would duplicate the movie clip with the instance name of panel1 and give it a new instance name of panel2. This new clip is put onto level 2. When you duplicate a movie clip, you get an exact copy, complete with all the attached onClipEvent handlers, and in exactly the same place on the stage.
Using a Loop to Duplicate Movie Clips
In your movie, you want to duplicate the original movie clip (panel1) 10 times. To do this, use a for loop as follows:
for ( loopCount = 1; loopCount < 10; loopCount ++ ) {
}
for loops repeat code that is in between its own curly brackets until a certain condition is met. In the previous example, a variable called loopCount was set to 1 as follows:
loopCount = 1;
This is its starting value. The loop continues as long as loopCount is less than 10 (the condition).
loopCount < 10;
So, how do you increment the value of loopCount? This is done by the last part of the for loop as follows:
loopCount ++
This is exactly the same as writing loopCount=loopCount+1. It's just a shorthand way of writing it.
You can now add the code that you want repeated—inside the for loop's curly brackets as follows:
_root.panel1.duplicateMovieClip( "panel" + loopCount, loopCount)
Notice that the new instance name you give each duplicated clip is made from taking the word "panel" and then sticking the current value of loopCount on the end:
"panel" + loopCount
So if loopCount is 3, then the instance name for this new clip is panel3. Consequently, the next time the loop comes around, the new instance name for the next duplicated clip is panel4.
You also use the value of loopCount to set the level of each new duplicated clip. Because loopCount is increased with every pass of the loop, each new duplicated movie clip will be on its own level.
You need to add this code into your main timeline, and you might as well put it into the function layer. The following steps show you how to do this:
-
Double-click the first frame in the functions layer to display the Frame Actions panel. You should see the existing function (see Figure 3.17).
Figure 3.17. If this is what you see on your screen, adding a little more code will enable you to start duplicating movie clips.
-
Add the following code into the Script window, making sure it's above the movePanel function:
){kind=link}
for ( loopCount = 2; loopCount < 10; loopCount ++ ) {
_root.panel1.duplicateMovieClip( "panel" + loopCount,
loopCount)
}
The loopCount variable is set to 2 rather than 1, as this is the level at which you want to start duplicating the movie clips.
Changing the Speed of Each Panel
Each successive panel needs to be slightly slower than the one before. If you remember from the earlier example, you can alter the speed of each panel by increasing the number in the movePanel function call (the higher the number, the more slowly the panel moves). Because you are duplicating panels on-the-fly, you want to automatically set each panel at a slower pace than the last as they are duplicated. To do this, make use of the onClipEvent(load) event handler, which you attach to your first panel.
-
Select the panel movie clip on the panel1 layer. Press Ctrl+Alt+A (Cmd+Opt+A on Mac) to display the object actions for this clip.
-
You should see the enterFrame clip event script in this window (see Figure 3.18).
-
Add the following code to the Script window:
-
Use this information to set a variable called speed as follows:
){kind=link}
Figure 3.18. You can duplicate panels and set their movement speeds on-the-fly with just a little scripting.
onClipEvent(load) {
_root.counter = _root.counter + 1;
speed = _root.counter
}
When the movie clip loads, it increases a variable called counter on the main timeline by an increment of one:
_root.counter = _root.counter + 1;
This helps you keep track of how many of these panels you have on the stage. Each time the panel is duplicated, this script runs and increases the value of counter. This variable will always match the number of panel movie clips on the stage.
speed = _root.counter
The speed variable is then used in the function call in the enterFrame event handler to set the speed of the panel. Your Script window should now look like Figure 3.19.
){kind=link}
Figure 3.19. The order in which the onClipEvents appear in the Script window doesn't matter.