Steven Kury: Interactive Media Development, Business Analyltics and Strategy

Let's Explore Mouse Event Handling!

Click here to download the .fla file for this tutorial.

The event handling functionality in Flash 9 is a sophisticated system of processing the various event types that exist in it. If you have not encountered a system of this nature before, it may be foreign and confusing to you. If you are familiar with a full blown object oriented language, such as Java, it is nothing new. This tutorial is to give you a jumpstart on how it works so that you can understand the relevant event flow and immediately put it to work in your projects.

We will explore the relationship of the mouse event object and its listeners. (The Flash 9 documentation describes in detail its event flow, with three phases of it. This tutorial will focus on the second and third of the phases, target and bubbling.) I am choosing the mouse event object in particular because several display objects can be arranged to overlap each other, and a mouse click on the topmost one of them can bubble through them until it hits the stage. The target processes the event first, and its containers process it in their order of their nested connections to the target.

The mouse event listeners on the stage are the end of the line for a mouse event object. The not so obvious complication to this is the fact that just because the display objects appear to be part of a chain, they are not necessarily so.

To see this first hand, follow the steps that follow the Mouse Event Handling Explorer below.  Or, test the .fla file in the authoring environment.  The text field in it serves as an output window to view the simulated trace message calls from the event listeners.




Follow these steps to use the mouse event handling explorer:

  1. Click on the stage. You will see that the two mouse event listeners attached to it are triggered. In this case the stage is the target and no bubbling occurs.

    Notice also that they are triggered in the order that they are attached to the stage. If you reverse the order in which they are attached, the order in which they are triggered will reverse.

  2. Click on “MClip 1,” the yellow one. You will see that the handler attached to it is triggered before the event object is passed through it to the stage, when the stage’s event listeners are triggered. “MClip 1” is the target and the stage receives the event in the bubbling phase.

  3. Click on “MClip 2 in MClip 1,’ the blue one on the lower right. You will observe that the event object passes through it to “MClip 1,” and on to the stage. Now click on the right hand side of it, where it appears to not overlap “MClip 1.” The event object still passes through “MClip 1” to the stage. Here, “Mclip 2” is the target and “MCLip 1” and the stage process the event as it bubbles through them.

    This might not make sense to you as the mouse was not clicked over “MClip 1,” but the event passes through its container movie clip regardless of whether or not the mouse was clicked over it. Make note of this, as this is “the way it is” with mouse events and movie clips.

  4. Click on “MClip 3 in MClip 2.” The mouse event object bubbles through it to “MClip 2 in MClip1,” to “MClip 1,” and finally to the stage. Like “MClip 2 in MClip 1,” this happens whether or not the mouse is visibly clicked over “MClip 1.” It even appears to be over the stage by itself, not visibly overlapping any other movie clip. “Mclip 3” is the target and “MCLip 2,” “MClip 1,” and the stage are the containers it is nested in that process the event in that order.

    This shows that the mouse event object will pass through movie clips nested within one another, whether or not the clicked movie clip is visibly over its container movie clip.

  5. Click on “MClip 3 in MClip 1,” the pink one to the left. Even though it is a part of “MClip 1,” the event object does not bubble through it to “MClip 1.” This is because I placed a stopPropogation() command in the method of its mouse event listener.

    This command ensures that the mouse event object does not go any further in along in the chain. This is relevant because, more likely than not, you will only want the display object that is visibly clicked on to have its listener triggered. You have the option to let the event object bubble through or not.

  6. Click on “MClip 2 of the stage.” While it appears to be part of “MClip 1,” as is “MClip 2 of MClip 1,” and it appears to be so except for the label which gives it away, the output window shows that the event object went directly from it to the stage. It visually bypassed “MClip 1” entirely, even if you clicked a part of “MClip 2 of the stage” that overlapped “MClip 1.” It also bypassed “MClip 3 of MClip 1” of the stage.

  7. Click on the “Mouse Event Handling Explorer” text field and the various parts of the scrolling output field.  None of them has an event listener attached to it but they pass the event object through them to the stage, except for the scrollbar.

    Note that it is not necessary to have an event handler attached to a display object to pass the event object through it.

The take away from this exploration is that a mouse event object bubbles from the clicked upon display object, through its parent container(s), and stops at the stage, not through the display objects that are visibly beneath it. The arrangement of them that is apparent to the eye has nothing to do with it. They don’t have to overlap in the slightest.

The diagram below shows these paths from a lateral view:


Lateral view of mouse event bubble paths.

This take away is significant because event handling must be understood in simplicity in order to be utilized in complexity.  If you develop an intricate user interface program with overlapping display objects, such as nested movie clips, and are not clear on this, you may easily create a confusing situation that you won’t know what to do with.

Play with the explorer, move the various movie clips around so that they overlap visibly in different arrangements, and view the mouse event flow in the output display field.  Once you have this down, go make money using it.

. . .

Steven Kury, MBA, is an interactive media developer and producer. Over the past 12 years he has contributed to several rich Internet application (RIA) systems, as well as a breadth of marketing communications solutions. Contact him at steve@steve-kury.biz or (717) 350-6781 to discuss what he can contribute to your project.