Mouse Events

The mouse is the most common way your audience interacts with your Flash creation, so a lot of events center around the mouse. The MouseEvent class detects all sorts of mouse events, including a variety of clicks and mouse movements, like mouse over (when the cursor moves over an object) and mouse out (when the cursor moves away from an object). Such events are the stuff that buttons and other smart objects are made of. So, roll up your sleeves, and get ready to create a mouse event listener. If you have a project deadline looming and just need bulletproof code for a simple mouse-over event, see the box on this page.

Note

A mouse event refers to an event generated by any kind of pointer device, whether it's a mouse, a trackpad on a laptop, or a drawing pad.

Frequently Asked Question: Create an Event Handler in a Snap

I need an ActionScript 3.0 event handler now! Where can I find some cut-and-paste code?

Events and event handlers are fundamental to most ActionScript projects, so it's great to have a thorough understanding of their workings. You'll get that in the following pages. But if you don't have time to look up references and write the code, Flash CS5 can help you out with Code Snippets. These predesigned chunks of ActionScript 3.0 code are ready for you to drop into your project. So, if you need a mouse-over event handler, select a movie clip symbol and then choose Window→Code Snippets. Expand the Event Handler, and then click Mouse Over Event. Flash adds several lines of code to your project and displays it on the Actions panel. The code has comments and instructions to help you customize the snippet to work in your project.

This first example uses two movie clip objects: a circle and some text. The goal is to create an event listener that recognizes when the mouse is over the circle and when it's not—your basic rollover action. When the mouse moves over the circle, the text changes to say "mouse over." When the mouse moves out of the circle, the text changes back to the original message, "mouse out." Not an earthshaking event, but you have to start somewhere.

Note

You can create your own movie clip as described in the steps below, or you can download 13-1_Mouse_Event.fla from the Missing CD page at www.missingmanuals.com/cds. If you want to see how the final project works, download and test 13-2_Mouse_Event_done.fla.

Here are the steps to set up a Flash document with the necessary symbols for the mouse event experiment.

1. In a new Flash document, draw a circle, and then create some static text that reads "mouse out."

   When you're done, you have two objects in Frame 1 of your movie, as shown in Figure 13-2.

2. Convert both the circle and the text to movie clip symbols (Modify→Convert to Symbol).

   This creates two symbols in the Library and leaves instances of the symbols on your desktop. As you create the symbols, use whatever name seems appropriate, like Circle and Text. The symbol names in the Library aren't as critical as the instance names described in the next step. Your ActionScript code will use these instance names.

3. Select the circle movie clip instance on the stage, and then, using the Properties panel, name it "mcCircle," as shown in Figure 13-2. Select and then name the text movie clip instance "mcText."

   You can use any name you want for instances on your desktop, but it's helpful to add something to the name that identifies the type. Here, mc indicates that the symbol instances are movie clips.

   

   Figure 13-2. Before you can program the instances of the symbols on the stage, you need to give them names. Here the circle is a movie clip symbol named mcCircle. The text is a movie clip symbol named mcText.

4. Double-click mcText to open the movie clip symbol for editing.

   As shown in Figure 13-3, the Text movie clip opens, and the toolbar shows you a new button with the Library symbol name (not the instance name). The text remains boldly colored to indicate that it's part of the symbol you're editing. The circle is faded to indicate that it's not part of the symbol you're editing.

5. Click Frame 2 in the timeline, and then press F6 to add a keyframe that includes content from the previous frame.

   A new keyframe appears containing your text.

6. Use the text tool to change the text in Frame 2 to read "mouse over."

   Click anywhere in the text to begin editing. When you're done, just click outside the text or choose another tool from the Tools palette.

7. Use the Properties panel to label Frame 1 out, and then label Frame 2 over.

   You can use either labels or frame numbers as references in ActionScript programming. In many ways, labels are the best choice because they make your code easier to understand when you read it. A good label explains more than a number any day. Also, if you insert new frames in the timeline, the frame numbers in your ActionScript will no longer be valid.

8. Click Scene 1 to exit the mcText movie clip and go back to your main movie clip.

   The symbol closes, and you're back on the main timeline.

9. Add a new layer to your main movie clip, and then name it "actions."

   It's always best to create a special, well-labeled layer to hold your ActionScript code.

Figure 13-3. When you double-click a movie clip symbol on the stage, Flash changes to symbol edit mode, and the symbol's name appears in the Edit bar. Any changes you make to a symbol change all the instances based on that symbol.