Macromedia Flash MX 2004 ActionScript 2.0 Tutorial and Free Online Training Course
In this section, you will learn about:
- The MovieClip Object
- Duplicating move clips
- Using the setInterval() function
- Removing duplicated movie clips
- Using the hitTest method of the MovieClip Object
- Attaching movie clips
- Using onMovieClip
- The Sound Object
Objects
Objects are simply elements with changeable characteristics. Each object in Flash can have events, methods, and properties that can be accessed using dot syntax. You’ve already seen several examples of this in the tutorial. For example, movie clips are instances of the MovieClip object. When you place an instance on the stage and name it, you can access the built-in events, methods, and properties of the MovieClip object, which include gotoAndPlay(), gotoAndStop(), _alpha, _x, _y, _xscale, and _yscale.
gotoAndPlay() and gotoAndStop() are methods—actions the object can perform. You’ll recognize them as the same stand-alone actions you can insert into frames. For example, the following line of code, when inserted into a frame on the main timeline, moves the main timeline to the second frame and plays the movie:
gotoAndPlay(2);
Similarly, the following line, when placed somewhere in the main timeline, moves the playhead to the second frame of the myMovie_mc movie clip and plays it:
_root.myMovie_mc.gotoAndPlay(2);
Properties describe the object and often begin with an underscore (_). You saw examples of movie clip properties being changed in the section on loops, which changed the transparency, position, and size of different movie clips:
_root.myMovie_mc._alpha = i; //where i is a value in percent
_root.myMovie_mc._x = i; //where i is a value
_root.myMovie_mc._xscale = 50;
_root.myMocie_mc._yscale = 50;
You also learned that arrays are simply instances of the Array object, which gives you access to the push, pop, unshift, shift, and sort methods of the object, among others.
There are many built-in objects in ActionScript, but you can also create your own objects to organize information. Recall that object is a data type, and when you create a new object as an object, you can give it your own properties. The simplest way to see this in action is to compare the definition of an object with the creation of an array. The following code, taken from our section on Associative Arrays, creates an array containing two items, “Anne” and “Smith”, each with its own unique key. The unique key, given in either quotation marks and brackets [“fName”] or using dot syntax (.fName) lets us access a specific item in the array:
var UserInfo = new Array();
UserInfo.fName = “Anne”;
UserInfo.lName = “Smith”;
Then, to access an item, we’d type something like the following:
var message = “Welcome, ” + UserInfo.fName;
Now, compare this code with the definition of a new object and its properties:
UserInfo = new Object();
UserInfo.fName = “Anne”;
UserInfo.lName = “Smith”;
As you can see, there really is no difference. To change the lName property of our UserInfo object, we’d use the following code:
UserInfo.lName = “Johnson”;
This lack of practical distinction between arrays and objects is why objects are often advocated for organizing information in ActionScript.
The rest of this tutorial gives you a chance to practice using what you’ve learned so far about event handling, variables, conditionals, loops, and arrays, with objects and their methods and properties to create functioning applications.
The MovieClip Object
Each instance of a movie clip in your movie is an object. By now, you should be familiar with a few of the MovieClip object’s properties and methods, and how to use them. This section continues to explore the methods and properties of the MovieClip object, and gives you some practice using conditionals, loops, and functions to manipulate your movie clips.
Duplicating Movie Clips
Dynamically-generated movie clips are placed on the stage during run-time—that is, after the movie starts playing. They can be useful for a number of things; a common use is in games, which may require a varying number of obstacles, asteroids, bad guys, etc., depending on the user’s current level, what’s happening in the game, or other settings you’ve defined.
Below, we’ve created a simple variation on the traditional Asteroids game, with a ship interior and an asteroid positioned in the distance:
The ship is just an instance of a graphic symbol, placed in the first frame of the layer named “Ship”. The asteroid is an instance of the “asteroid_clip” movie clip, which we’ve called “asteroid_mc”. The asteroid_mc movie clip is a simple tween animation that moves the asteroid forward (toward the ship), while enlarging it (for perspective). Just to keep organized, we’ve placed it on a separate layer (called “Asteroids”), also in the first frame.
The third element is a play button, located in the lower right corner of the movie. We want the play button to dynamically generate more asteroids coming at the ship.
If you’d like to follow along and build your own Asteroids game, we’re using clip art available from Microsoft’s clip art collection (http://www.office.microsoft.com/clipart) and a play button from Flash’s common library.
Before we get started, it will be helpful to look at the code we’ve already added for controlling the start of the movie. First, we don’t want the asteroid on the stage to be visible to the user until he or she clicks the play button. We also don’t want it to start moving toward the ship until the play button is clicked. We can take care of this with two simple lines of code in the first frame of the main timeline:
asteroid_mc._alpha = 0;
asteroid_mc.stop();
The first line sets a property of the MovieClip object instance—the _alpha property, which controls the transparency. Set to 0, the asteroid_mc movie clip is invisible. The second line uses the stop() method of the MovieClip object to prevent the asteroid_mc movie clip from playing. These lines are the first to appear in the code, in the first frame on the main timeline, on a layer we’ve named “Actions”. Remember that it’s a good practice to keep all your actions on a separate layer.
The only other code that appears in the movie so far is a stop action at the end of the asteroid_clip movie clip timeline:
The first 20 frames in the movie clip timeline consist of the motion tween that moves and enlarges the asteroid. At this point, the asteroid is visible on the screen (by default, it’s visible—only by changing the _alpha property in code in the main timeline did we make it invisible at run-time). The last frame, Frame 21, makes the asteroid invisible again; for this, we simply used the Property Inspector to change the alpha to 0 in Frame 21. In the same frame, in the Actions layer, we added the stop action, as you can see above.
These few lines of code form the foundation of the movie. All the user will see when the movie starts is the interior of the ship and the play button. We now need to add an event handler to the play button that duplicates the asteroid_mc movie clip and makes it visible, and then starts it playing:
- First, we need to add a variable to the main timeline to keep track of our duplicated movie clips. This variable functions as a counter, but we’ll also use it to refer to our new movie clips: Select the first frame of the Actions layer on the main timeline and, in the Actions panel, add the following line of code:
var num_clips = 0;
- Now, select the button and add the on(release) event handler, with the following code:
on(release) {
//make our existing movie clip visible and start it playing
asteroid_mc._alpha = 100;
asteroid_mc.play();
//increment our movie clip counter
num_clips++;
//duplicate our movie clip
asteroid_mc.duplicateMovieClip(“asteroid_mc” + num_clips, num_clips);
//position our new copy of the movie clip
_root[“asteroid_mc” + num_clips]._x = Math.random() * 550;
_root[“asteroid_mc” + num_clips]._y = 1;
}
We’ll go through the code line by line. The first two lines should be familiar, since you’ve seen how the _alpha property is used. We’ve simply made our existing asteroid_mc movie clip visible again by setting the alpha value to 100%. Then we’ve used the play method to start playing the movie clip. At this point in the code, the asteroid will appear in the distance and begin moving forward, growing larger as it does so. (Note: When we created the motion tween, we positioned the asteroid in the last keyframe of the tween so that it would stop where the middle of the ship’s windshield appears on the stage.)
The third line in the code increments our num_clips variable. At the start of the movie, in the main timeline, num_clips was set to 0. At this point, it will be set to 1.
The next line actually creates the duplicate movie clip, using the duplicateMovieClip method of the MovieClip object. There are 2 arguments: the name we’re giving the new movie clip and the level in which we’re placing it in the movie. This is where the importance of that num_clips variable comes in. As we duplicate movie clips, we’re going to name them by appending a number to the name of the original—this way, we’ll be able to refer to each one later in our movie. Our original movie clip instance is named “asteroid_mc”. Our first duplicate will be named “asteroid_mc1”. We accomplished this by placing the string “asteroid_mc” with the addition operator (+) and the num_clips variable to concatenate the name of the original clip and the value of the variable.
The second argument uses the same num_clips variable to specify the level in the movie in which to place the new clip. This is important, because if you don’t place new movie clips on different levels, the new clip will replace the original clip. You can see, then, that we’re using the num_clips variable to do a number of things: first, it keeps track of the number of asteroids on the screen. It also helps us to name and refer to each of those clips, and it places each of the clips on a different level that corresponds to its name. Each time a clip is created, the variable is incremented.
The last two lines of code position the new movie clip in a random location at the top of the stage. We want all our asteroids to begin at coordinate 1 on the y-axis—near the top of the stage—so we set the _y property to 1. This ensures that the asteroids stop near the windshield of the ship. However, we want the asteroids to appear in random locations from left to right—the x-coordinate. Because the stage is set to 550 pixels in width, we used the random method of the built-in Math class to set the x-coordinate of the new clip to a random number between 0 and 550.
You may, however, have noticed that the code as it is now only creates one duplicate movie clip when the play button is clicked. You could keep clicking the play button to create more asteroids on the screen, but a user wouldn’t expect to have to do that. We can solve this problem by placing the code that duplicates the movie clip in a while loop:
while (num_clips <= 10) {
//increment our movie clip counter
num_clips++;
//duplicate our movie clip
asteroid_mc.duplicateMovieClip(“asteroid_mc” + num_clips, num_clips);
//position our new copy of the movie clip
_root[“asteroid_mc” + num_clips]._x = Math.random() * 550;
_root[“asteroid_mc” + num_clips]._y = 1;
}
The loop limits the number of asteroids being produced to 10. As long as the num_clips variable is less than or equal to 10, the loop will continue to execute, creating a new duplicate on a different level each time. Later, we could add a menu that lets the user choose the level, and associate that value with the number of asteroids to produce.
There’s still a problem, though. All the asteroids seem to appear at the same time. It would be much more effective for our purposes if a second or two passed between the appearance of each asteroid. To accomplish this, we can use one of ActionScript’s built-in functions, setInterval().
