- 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 17: Dragging and Dropping Movie Clips
Example file: Dragsimple.fla
An important part of many interfaces, whether they are games or applications, is the ability to drag elements around on the screen. This can be done several ways in Flash. Let's look at three of them.
The startDrag command tells Flash to make a movie clip automatically follow the cursor. The example movie Dragsimple.fla demonstrates how to use this command in the most basic way.
A movie clip with a circle drawn in it has been placed on the Stage and named "circle." As soon as the movie runs, the following command starts the circle following the cursor. It also tells the main timeline to stop animating so the movie doesn't continue past this frame.
startDrag("circle",true);
stop();
The startDrag command is using two parameters in this case. The first is the name of the movie clip to drag. The second is the keyword true, which in this case tells startDrag to lock the object's center to the cursor. If you used a false in this second parameter, the distance between the cursor and the center of the movie clip would remain the same as when the startDrag command was issued.
NOTE
The keywords true and false are called Boolean expressions. They can be used in cases in which an attribute is either on or off. They are also the results of comparisons, such as "a == b."
The example movie Dragsimple.fla forces the movie clip "circle" to follow the cursor. However, a more typical use of dragging is to have the user click an item to start dragging it, and then release the mouse to drop it.
Example file: Dragcomplex.fla
The drag and release behavior can be done by making a movie clip that contains a button inside it. In Dragcomplex.fla, an invisible button has been placed in the same circle movie clip. The button was made invisible by placing content on only the "Hit" frame inside the button.
So, the "circle" movie clip contains the same graphic as in Dragsimple.fla, but also a button. The following script has been attached to this button. It executes the startDrag command when the user presses down, and a stopDrag when the user lifts up the mouse button.
on (press) {
startDrag("",false);
}
on (release) {
stopDrag();
}
The empty quotes inside the startDrag command tell Flash that you want the current movie clip to be dragged. Because the button is inside the "circle" movie clip, that particular clip can be dragged. The false as the second parameter means that the movie clip will not lock its center to the cursor, but instead maintain the original distance between the cursor and the movie clip center. This makes it appear as if the cursor has grabbed a part of the circle and is dragging the circle by that point.
The stopDrag command needs no parameters. Only one movie clip can be dragged at a time, so all it needs to do is stop the current dragging action, which will return the movie clip to its immobile state.
One of the problems with the startDrag command is that only one movie clip can be dragged at a time. In addition, the dragging is happening automatically, which makes it hard for you to monitor the movie clip's progress as it is dragged. For these reasons, it is useful to know how to drag a movie clip without using the startDrag command.
Example file: Dragbetter.fla
The example movie Dragbetter.fla contains some code that does this. The movie is set up the same way as Dragcomplex.fla, with a movie clip that has an invisible button inside it. The script attached to this button, however, is different. All it does is set a variable called "drag" to true when the user presses down on the button, and false when the mouse button is lifted.
on (press) {
drag = true;
}
on (release) {
drag = false;
}
The "drag" variable becomes a global variable, which is shared by all the code associated with the movie clip. Therefore, the script attached to the movie clip can tell the value of "drag" and use it to determine whether or not the movie clip should follow the cursor.
The script attached to the movie clip sets the _x and _y properties of the movie clip to the _xmouse and _ymouse properties of the main timeline. These last two properties give you the mouse location relative to the Stage.
onClipEvent (enterFrame) {
if (drag) {
this._x = _root._xmouse;
this._y = _root._ymouse;
}
}
The this keyword is used to indicate that the object being referred to is the current one. The script is attached to the "circle" movie clip, so this refers to that clip. In the next section, you'll look at different ways of referring to movie clips at different levels.