Movieclip Event Handlers (or "Look, ma -- no more buttons!")

An event handler is a function assigned to an event property of a movieclip that tells the movieclip how to respond when that event occurs. This means that a movieclip can respond to events like being rolled over with the mouse (onRollOver), mouse-moved-off (onRollOut), mouse-clicked (onPress), and mouse-released (onRelease), the same as buttons can. In addition, event properties allow movieclips to respond to things like mouse-moved-while-movieclip-pressed (onMouseMove function defined within onPress function) and do-this-continuously-at-the-frame-rate-of-the-movie (onEnterFrame). All of the items in bold above are event properties of MovieClips. You can see a complete list by typing _mc. into the actions panel and noting the items in the list that pops up that begin with "on".

Event properties of movieclips can be assigned values, like any property of any class. The type of value to be assigned is a function. It can either be an unnamed function, or a named function that has already been set up. We've seen examples in previous pages of the onRelease property being assigned a function to make the movieclip cause something to happen when it is clicked. The generic form of event property assignments, using the onRelease property as an example, is:

or

The advantage of the second method is that the function can be assigned to numerous instances by simply repeating the last statement with different instancenames, instead of repeating the function code for each. It also allows you to assign different behaviors to a movieclip by changing the function assigned to it, or to enable and disable mouse clicks on a movieclip by assigning the function name to enable it and null to disable it.

Movieclips and frame actions vs buttons with button actions

In the image above, the code on the left can be put directly onto a button to control a movieclip named plane_mc on stage. The code on the right is put into a frame of the timeline in which planecontrol_mc exists (not in the timeline of planecontrol_mc itself, but in the timeline of its container -- ie, the main movie, if planecontrol_mc is a movieclip instance on stage), to make it control plane_mc on stage. Although more typing is involved in the second way, it offers more coding flexibility and code centralization than the first:

The main reason I can think of to use movieclips instead of buttons is because things (movieclips, textfields) inside buttons are not addressable with actionscript. If you want to code, use the thing that allows you maximum coding flexibility. As far as putting code in frames instead of on buttons, the former allows all of your movie's code to be put in one central location and so is easy for you (or someone else) to find when you reopen your project months later for modification. Also, once you get used to the idea of assigning functions to properties, using "this" inside the function to refer to the movieclip the function is assigned to, you can extend that concept to programming for any of the other classes in actionscript. To that end, let's take a look at some ways that we can set up movieclips to function like buttons. I'll use the word "control" to refer to such movieclips, so as not to confuse them with button symbols.

Examples of (Button) Controls made with Event Handlers

One common use of movieclip event handlers is to create button-like controls whose states (up, over, down, release) can be controlled with actionscript. Below are 5 combinations of movieclip structure and code that can be used as the basis for almost any kind of button-like control you want to make. (The controls don't control anything yet -- only their response to mouse behavior has been programmed here). Mouse over each one to see how it works. Open programmed_controls.fla in the class directory to examine or modify the code and/or contents of any of the controls.

Using the keyword "this"
When you write code to assign to an event handler of a control (a movieclip instance), you can use the keyword "this" to refer to the instance (as is done in all the examples below). You could also refer to the control by its name, but then the code you assign to the control's event handler will have to be modified if you also want to assign it to another control. If you don't refer to the instance with 'this' or by name, any function calls made inside the handler function will be done to the timeline on which this code is placed, that is, the main timeline (because that is the default scope, as described in the Scope note on this page).

You can download a fla with the 5 samples shown above via the link at right (subscription required).

The bee game uses a simple rollover like the one in the first example above. For a rollover involving continuous motion, like but a bit different from the fifth example, see the code for the controls in the photo slider example.