- ActionScript Elements Used to Make Games and Toys
- Lesson 15: Controlling the Playback of a Movie Clip
- Lesson 16: Controlling the Properties of a Movie Clip
- Lesson 17: Dragging and Dropping Movie Clips
- Lesson 18: Movie Clips and Levels
- Lesson 19: Duplicating Movie Clips
- Lesson 20: Controlling Multiple Movie Clips
- Lesson 21: Detecting Collisions
- Lesson 22: Using Movie Clips to Change What Is on the Screen
- Lesson 23: Accepting Keyboard Input
- Lesson 24: Playing Sounds
This chapter is from the book
This chapter is from the book
This chapter is from the book
Lesson 20: Controlling Multiple Movie Clips
Now that you know how to create a bunch of movie clips with ActionScript, let's look at how to control them. You know that you can control one movie clip with code attached to it, but what if you have several movie clips that need to be controlled? What if these movie clips all need to behave in the same way?
If you place those movie clips on the Stage, you can copy and paste code from one movie clip on to the others. This has several disadvantages. First, there's the copying and pasting. Then, if you decide to change the code, you need to change it in all the instances of the movie clip.
Creating an "Actions" Movie Clip
One way to control several movie clips is to place code in one spot that controls all these clips. For instance, if you have 10 movie clips, you can place code on the first clip that controls all 10.
But rather than place the burden of control on one out of many clips, why not create a movie clip for the express purpose of controlling other clips? This common technique makes it easy to remember where you put your code. I call it the "actions movie clip."
Start by using the text tool to create a small text box on the Stage and type the word "actions" in it. (This is just so it can be identified easily.) Then, with this text box selected, choose Insert, Convert To Symbol, and turn it into a movie clip named "actions." Move it to the gray area off the Stage, so the word "actions" isn't visible to the user.
This movie clip is used to attach a script that will control all sorts of things in the movie. For instance, suppose you want to have a movie that creates 10 movie clip instances from a library symbol, and then rotates them all a little each turn.
Example file: actionsMC.fla
First, create the symbol. Set its linkage properties in the symbol's Properties dialog box to Export for ActionScript with a name "sample." You can see this in the example movie ActionsMC.fla.
The only code needed will be attached to the movie clip "actions." There will be two parts to this code, each inside an onClipEvent handler. The first such handler will react to a load event. The load event occurs when the movie clip first appears. The code in it will be executed once at this time. In this case, take the opportunity to create 10 new movie clips:
onClipEvent (load) {
// create 10 movie clips
for(i=0;i<10;i++) {
_root.attachMovie("sample","sample"+i,i);
// set the location
_root["sample"+i]._x = i*50+50;
_root["sample"+i]._y = 100;
}
}
Not only are the movie clips created, but their locations are set. The vertical location is set to 100, but the horizontal location is set to different locations starting at 50 and continuing to 500. You can see what this looks like in Figure 3.6.
){kind=small}
Figure
3.6 These 10 movie clips were created by ActionScript from a library symbol.
The second part of the code is inside an onClipEvent(enterFrame) handler. The code here executes every time the "actions" movie clip loops. If the movie is set to run at 12 frames per second, then the code should run 12 times a second.
onClipEvent (enterFrame) {
// loop through and rotate each movie clip
for(i=0;i<10;i++) {
_root["sample"+i]._rotation += 5;
}
}
This code loops through all the movie clips and rotates each one by 5°. The result is that there will be 10 movie clips on the Stage and all 10 will be rotating.
Example file: Gears.fla
I've also created a more advanced version of this movie that is set up in exactly the same way, except for the code. In Gears.fla, the movie clips are placed close together so that the cogs on the gears touch. To make them act like gears, each movie clip starts rotated 15° more than the previous one. Because the cogs are 30° apart, it makes the cogs of one gear interlock with the cogs of the previous one. Then, instead of each gear rotating in the same direction, each gear rotates in the opposite direction of the one before it. Here is this code:
onClipEvent (load) {
initialRotation = 0;
// create 10 movie clips
for(i=0;i<10;i++) {
// attach the movie clip
_root.attachMovie("sample","sample"+i,i);
// set its position
_root["sample"+i]._x = i*37;
_root["sample"+i]._y = 100;
// set initial rotation so each new one is off by 15 degrees
_root["sample"+i]._rotation = initialRotation;
initialRotation += 15;
}
}
onClipEvent (enterFrame) {
// loop through every other movie clip
for(i=0;i<10;i+=2) {
// make this one rotate clockwise
_root["sample"+i]._rotation += 5;
// make next one rotate counterclockwise
_root["sample"+(i+1)]._rotation -= 5;
}
}
To further understand how this code works, open the Gears.fla movie and play around with it. This code, like more code to come in this book, can be explained only so far with text. You need to open Flash and poke around at the examples to gain a full understanding of how they work.
Event Handlers
The only way to trap events such as "enterFrame" in Flash 5 was to use onClipEvent attached to a movie clip. However, in Flash MX there is an alternative. You can tell Flash to run a specific function when an event such as "enterFrame" occurs. Better still, you can do this in the main timeline, without creating an "Actions" movie clip.
Here is a simple example. This script, when placed in the main timeline, sends text to the Output window every frame.
_root.onEnterFrame = function() {
trace("enterFrame Event");
}
Instead of the trace command, you can insert the same sort of commands used earlier in this lesson. You can also define a separate named function to handle the event. Here is another way of writing the previous example:
_root.onEnterFrame = myFunction;
function myFunction() {
trace("enterFrame Event");
}
You can use this technique to get all sorts of events, such as onMouseUp, onKeyup, and onLoad. You can check out the documentation for a full list and descriptions of what triggers each event.
You can find this technique used in several games, starting with the Find the Picture game in Chapter 13.