How to select an item on the screen

written by: Paulo Caldeira; article published: year 2007, month 07;


In: Categories » Computers and technology » Flash » 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

legal disclaimer

1) Our website is not responsible for the information contained by this article as well for any and all copyright infringements by authors and writers. E-articles is a free information resource. If you suspect this article for any copyright infringements, please read the Terms of service and contact us to investigate the problem.
2) The E-articles directory team is not responsible for inaccuracies, falsehoods, or any other types of misinformation this tutorial may contain and will not be liable for any loss or damage suffered by a user through the user's reliance on the information gained here. Please read the Terms of service

Useful tools and features

Translate this article to...    Send this article to you or to a friend

Link to this article from your page   
If you like this article (tutorial), please link to it from your web page using the information above. Linking to this page, this is the only way to help us improve our service, the same time providing your visitors with a way to improve their online experience.

related articles

1. ActionScript: Filling a Shape with a Solid or Translucent Color
Use the beginFill( ) and endFill( ) methods to initiate and close a shape drawn at runtime. To draw a filled shape, call beginFill( ) prior to any other drawing methods, including the custom methods you have defined such as drawCircle( ) and drawPolygon( ). Invoke endFill( ) after calling other drawing methods to create the shape. You cannot apply a fill to an existing shape drawn at authoring time or runtime. You must invoke beginFill( ) before drawing the shape to be filled. This example creates a solid blue ...

2. Drawing a rectangle using ActionScript
Create a custom MovieClip.drawSimpleRectangle( ) method using the Drawing API and invoke it on a movie clip. To draw a simple rectangle, specify the stroke's attributes using the lineStyle( ) method and then draw four lines using the lineTo( ) method: // Create rectangle_mc with a depth of 1 on the main timeline. _root.createEmptyMovieClip("rectangle_mc", 1); // Specify a one-pixel, solid, black line. rectangle_mc.lineStyle(1, 0x000000, 100); // Draw four lines to form the perimeter ...

3. How to draw a rectangle with rounded corners
You want to draw a rectangle with rounded corners, an offset, or rotation.Create a custom MovieClip.drawRectangle( ) method using the Drawing API and invoke it on a movie clip. The drawSimpleRectangle( ) method is, as the name suggests, quite simple. Let's create a more complex version that also: Draws a rectangle with a specified angle of rotation Let's you specify the rectangle center's coordinates Can draw a rectangle with rounded corners The drawRectangle( ) method accepts...

4. Reusing and Organizing Code in Flash Movies
You want to reuse code that you've created for one project in another Flash movie. Or you want to write your ActionScript code in an external text editor. Place your ActionScript code in external .as files and use the #include directive to add them to your Flash movies: // Adds all the code within MyActionScriptFile.as to your Flash movie. #include "MyActionScriptFile.as" Use the #include directive to incorporate code from external text files into your Flash movie during compilation from a .fla file ...

5. Drawing a Circle using ActionScript
Create a custom MovieClip.drawCircle( ) method using the Drawing API and invoke it on a movie clip. You can create a circle in ActionScript with eight curves. Fewer curves results in a distorted circle and too many curves hinders performance. Let's create a custom method of the MovieClip class for drawing circles. This method, drawCircle( ), allows for three parameters: radius The radius of the circle x The x coordinate of the circle's center point. If undefined, the circle is centered at x =...

6. ActionScript: Repeating a Task at Timed Intervals
You want to perform an action or actions at a specific timed interval. Use the setInterval( ) function. The setInterval( ) function allows you to specify an interval (in milliseconds) at which your Flash movie will invoke a function. Use setInterval( ) to perform a particular action over time but not necessarily at the frequency of the frame rate of the movie. // Define a function. function myIntervalFunction ( ) { // Output the difference between the current timer value and its value from the ...

7. Mouse Location Flash Script
Not only can you get the location of a movie clip on the screen, you can even get the location of the mouse, also known as the cursor. What is the difference between the mouse and the cursor? The mouse is the physical device attached to your computer. You may even have a track pad or tablet instead. The cursor is the graphic that moves around the screen as you move your mouse. So, technically, cursor is the term I should be using here. However, ActionScript uses the term mouse in its keywords. I will therefore use mouse and cursor i...

8. ActionScript: Performing Actions Conditionally
You want to perform an action only when a condition is true. Use an if statement or a switch statement. You often need your ActionScript code to make decisions, such as whether to execute a particular action or group of actions. To execute an action under certain circumstances, use one of ActionScript's conditional statements: if, switch, or the ternary conditional operator (? :). The conditional statements allow you to make logical decisions, and you'll learn from experience which is more appropriate for a given situ...

9. Enhancing Standalone Projector
You want to create an enhanced Standalone Projector with features such as borderless playback, custom titles, no Flash menus, and so on. Use a third-party tool such as SWF Studio or SWFKit to create the Projector from your completed Flash movie. SWF Studio is a third-party utility that helps you overcome some of the limitations of regular standalone Flash Projectors. However, SWF Studio produces Windows projectors only. Also note that the resultant projector files are rather hefty (minimum file size is around 1.5 MB). The...