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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.