How to select an item on the screen

Buttons allow the user to click and make an action occur. A different type of user interface element, however, allows the user to select an item on the screen.

The difference is that a user clicks to make a selection, and that movie clip changes its appearance. But nothing else happens. This way, the user can make or change her selections. After that, the user can click another button or perform another action.

We'll use selections as the first step toward learning how to drag and drop movie clips, the goal of this tutorial.

Button Inside the Movie Clip Method

A movie clip cannot simply react to a mouse click. Unlike a button, it cannot use an on (release) or on (press) handler.

So you have to be tricky. You put a button inside a movie clip. The button can handle the mouse clicks as long as it is big enough to cover the entire movie clip.

To turn this into a selectable movie clip, we'll have to make this into a multiframe movie clip. The first frame contains the button named Off Button. This button has the following script:

on (release) {
   this.gotoAndStop(2);
   }

By referring to this, the button is referencing the movie clip that it is in. Frame 2 of the movie clip contains a similar button named On Button. The difference is that the On Button is a little brighter, indicating that the movie clip has been selected. The script on this movie clip is similar:

on (release) {
   this.gotoAndStop(1);
   }

As you might guess, by clicking the button on frame 2, the movie clip goes to frame 1, where the original Off Button is located. By clicking the buttons in the movie clip over and over again, the movie clip goes back and forth between frames 1 and 2.

The only thing left is to place a stop(); command on the first frame of the movie clip.

hitTest Method

You can detect a mouse click in a movie clip without a button. However, this method is a little trickier. After you learn it, though, it is a much cleaner solution.

To detect a mouse click on a movie clip without a button, use the onClipEvent(mouseDown) or onClipEvent(mouseUp) movie clip handlers. For instance, you can place the following script on a movie clip:

onClipEvent (mouseUp) {
   this.gotoAndStop(2);
   }

Two frames are in the movie clip, each with a different colored circle. A stop(); command is on the first frame of the movie clip.

When you try this movie, you will see right away why the onClipEvent(mouseUp) handler is different from the on(release) handler used on buttons. If you click on one movie clip, they both react.

This is because all movie clips get the mouseUp event sent to them. It is not exclusive to just the movie clip under the cursor.

Determining Which Movie Clip Was Clicked

There is a way to determine which movie clip has been clicked. The hitTest function tests a mouse location with a movie clip to see whether the location is inside the movie clip. So, by modifying the script, we can only send the correct movie clip to its second frame.

onClipEvent (mouseUp) {
   if (this.hitTest(_root._xmouse, _root._ymouse)) {
   this.gotoAndStop(2);
   }
   }

The hitTest function can work a variety of different ways. In this case, it is fed the x and y values of the mouse location. It is prefaced with this so that it refers to the current movie clip. When the user clicks anywhere, the onClipEvent (mouseUp) handlers in all the movie clips get triggered. Then, both of the movie clips perform the hitTest test; only one that is under the mouse will test positive and jump to frame 2.

A Selection Script

To change this into a selection script, we have to allow the user to click the movie clip multiple times and change the state of the movie clip from off to on and back to off again.

The script has to determine which state the movie clip is currently in and then send the clip to the other frame. The script can determine the current state by looking at the current frame of the movie clip. This can be done with the aptly named _currentFrame property. This property reads 1 when the movie clip is on the first frame and 2 when it is on the second.

Here is the new script. This is a complex script because it first tests the location of the mouse and then tests the current frame of the movie clip.

onClipEvent (mouseUp) {
   if (this.hitTest(_root._xmouse, _root._ymouse)) {
   if (this._currentFrame == 1) {
   this.gotoAndStop(2);
   }  else {
   this.gotoAndStop(1);
   }
   }
   }

Now you have seen two completely different ways of making selectable movie clips. I like the second way better because you don't end up with the extra library symbols of the buttons. The advantage of using buttons, however, is that they can easily contain up, down, and over states, which are sometimes nice for user feedback as users make their choices