Making Actions Happen with Event Handlers - Flash

The first six Basic Actions Go To, Play, Stop, Toggle High Quality, Stop All Sounds, and Get URL provide all the behaviors that you need to make an interesting interactive Flash movie. But those six actions can’t make your movies interactive on their own. They need to be told when to happen. To tell Flash when an action should occur, you need event handlers. Event handlers specify the condition(s) under which an action can be made to happen. For instance, you might want to mouse-click a button to initiate a Play action, or you might want a movie to stop when a certain frame in the timeline is reached. Creating interactivity in your movies is simply a matter of deciding what event you want to detect (mouse click, keystroke, and so on), adding the appropriate event handler to detect it, and specifying the action(s) that should be performed when it happens. Before we describe each event handler in detail, let’s see an example of exactly how an event handler merges with an action to form a functioning interactive button.

Combining an action with an event handler to make a functioning button
Imagine that you have a short, endlessly looping movie in which a wire-frame cube rotates. Now imagine that you want to add a button to your movie that, when clicked, stops the cube from rotating by stopping the playback of the looping movie. Here’s what you need to do.

For this exercise, you can use the rotatingCube.fla file located in the ch17 folder on the Flash 5 Bible CD-ROM. The finished file is named rotatingCube_complete.fla.

  1. Open your Flash movie (.FLA file), and make a new layer called button.
  2. Place a button on the button layer. (You could use Flash 5’s sample VCR stop button found in Window➪Common Libraries➪Buttons, in the (circle) VCR Button Set folder.)
  3. Bring up the Instance Panel for the button (as shown in Figure below) by selecting the symbol instance on the Stage and choosing Modify➪Instance (Command+I or Ctrl+I). If the Instance Panel was already open, then this command will close the panel. Reapply the command to open it again. With the button selected, make sure that the Behavior menu reads Button. If some other Behavior is shown, then change it to Button.
  4. Open the Actions Panel (Option+Command+A or Ctrl+Alt+A), and then open the Basic Actions booklet in the left pane. A list of all the Basic Actions appears.
  5. Double-click the On Mouse Event action, or drag it to the right pane. A list of parameters for On Mouse Event appears on the lower portion of the Actions Panel. This list contains all the event handlers for buttons.
  6. The Instance Panel for the VCR Stop button.

    Instance Panel for the VCR Stop button.

  7. By default, the Release option of the Event setting is already checked. The Release event handler is one of two kinds of mouse-click handlers (the other is Press; both are described late. You should notice that the Actions list in the right pane indicates the event handlers that are selected. You’ve now told Flash that you want something to happen when the mouse clicks the button. All that’s left is to tell it what should happen. In other words, you need to nest another action with the on (release){ and } code.
  8. Adding a Release event handler

    Adding a Release event handler

  9. Now we try another method for adding an action to the Actions list. Select the top line on (release){ in the Actions list (in the right pane). Then, click the plus (+) button in the top-left corner of the Actions Panel. From the popup menu, highlight Basic Actions, and select Stop from the submenu. A Stop action will be placed between the code on (release){ and }. The Actions list box should now read as follows:
  10. on (release){ stop(); }

The Stop action, represented by the code stop() shown in Figure below, is contained by the curly braces { and } that mark the beginning and end of the list of actions that are executed when the release event occurs (there could be any number of actions). Each action line must end with the semicolon (;) character.

This code will stop the Main Timeline playback when the button is clicked.

Code will stop the Main Timeline playback when the button is clicked

We now have a button in our Flash movie that stops the movie’s playback when it is clicked. You can use the Control➪Test Movie command to see if the button is working correctly. To make any interactivity in your movies, you simply have to apply the basic principles we used to make the stop button: Decide which action (or actions) you want to happen, and then indicate when you want that action to happen with an event handler.

The Flash event handlers
Three primary event handlers exist in Flash. Those that detect mouse activity on buttons (button manipulation), those that recognize when a key is pressed on the keyboard (key presses), and those that respond to the progression of the timeline (keyframes).

Button manipulation
Event handlers that occur based on the user’s interaction with a button rely entirely on the location and movement of the mouse pointer. If the mouse pointer comes in contact with a button’s Hit area, it changes from an arrow to a hand symbol. At that time the mouse is described as “over” the button. If the mouse pointer is not over a button, it is said to be out or outside of the button. General movement of the mouse without the mouse button depressed is referred to as rolling. General movement of the mouse with the mouse button depressed is referred to as dragging. Here are the mouse-based event handlers for Flash buttons.

A single mouse click can actually be divided into two separate components: the downstroke (the press) and the upstroke (the release). A Press event occurs when the mouse pointer is over the Hit area of a button and the downstroke of a mouse click is detected. Press is best used for control panel-style buttons, especially toggle switches. Press is not recommended for important user moves (such as irreversible decisions or primary navigation) because it does not give users an opportunity to abort their move.

A Release event occurs when the mouse pointer is over the Hit area of a button and both the downstroke and the upstroke of a mouse click are detected. Release is the standard button click Event Handler.

Release Outside
A Release Outside event occurs in response to the following series of mouse movements:
The mouse pointer moves over a button’s Hit area; the mouse button is pressed; the mouse pointer is moved off the button’s Hit area; and the mouse button is released. Release Outside can be used to react to an aborted button click.

Roll Over
A Roll Over event occurs when the mouse pointer moves onto the Hit area of a button without the mouse button depressed.

Roll Out
A Roll Out event occurs when the mouse pointer moves off of the Hit area of a button without the mouse button depressed.

Drag Over
A Drag Over event occurs in response to the following series of mouse movements:
The mouse button is pressed while the mouse pointer is over the Hit area of a button; the mouse pointer moves off the Hit area (mouse button still depressed); and the mouse pointer moves back over the Hit area (mouse button still depressed).

Drag Over is rather obscure, but could be used for special cases of interactivity such as revealing an Easter egg in a game (for example, when the mouse button is held down and mouse movement occurs over a specific area, then ActionScript can detect the coordinates of the mouse movement and reveal a Movie Clip instance that is otherwise invisible on the Stage).

Drag Out
A Drag Out event occurs in response to the following series of mouse movements:
The mouse button is pressed while the mouse pointer is over the Hit area of a button; and the mouse pointer moves off the Hit area (mouse button still depressed).

Key Press (or keystroke)
The Key Press event handler for an On Mouse event action lets you execute an action (or series of actions) when the user presses a key on the keyboard. The implementation method for a Key Press event handler may be confusing: To add a Key Press event handler, you must first place a button onstage at the frame where you want the keyboard to be active. You then attach the keystroke event handler to the button.

The Key Press event handler, which was introduced with Flash 4, opens up many possibilities for Flash. Movies can have keyboard-based navigation, buttons can have keyboard shortcuts for convenience and accessibility, and games can have keyboard-controlled objects (such as ships and animated characters). But watch out for some potential “gotchas” to keyboard usage, specifically with On Mouse event actions. If you’re planning ambitious keyboard-based projects, you may want to check this list of potential issues first:

  • The Esc key does not work as a key press.
  • Multiple key combinations are not supported. This rules out diagonals as two-key combinations in the classic four-key game control setup. It also means shortcuts such as Ctrl+S are not available. Uppercase is functional, however.
  • If presented in a browser, the Flash movie must have “focus” before keystrokes can be recognized. To “focus” the movie, the user must click anywhere in the space it occupies. Keyboard-based movies should include instructions that prompt the user to perform this initial mouse click.
  • Because the Enter, less than (<), and greater than (>) keys are used as authoring shortcuts in the Test Movie environment, you may want to avoid using them as control keys in your movies. If you need to use those keys in your movies, make sure that you test the movies in a browser.
  • Key Press events are case sensitive. For example, an uppercase letter “S” and a lowercase letter “s” can trigger two different actions. No case-insensitive keystroke event handler exists (one that would enable both cases of a letter to trigger the same action). Achieving case-insensitivity would require duplication of event handler and action statements.

The keyframe event handler depends on the playback of the movie itself, not on the user. Any action (except On Mouse event) can be attached to any keyframe on the timeline. An action attached to a keyframe is executed when the playhead enters the keyframe, whether it enters naturally during the linear playback of the movie or as the result of a Go To action. So, for instance, you may place a Stop action on a keyframe to pause the movie at the end of an animation sequence.

In some multimedia applications, keyframe event handlers can differentiate between the playhead entering a keyframe and exiting a keyframe. Flash has only one kind of keyframe event handler (essentially, on enter). Hence, as an author, you do not need to add keyframe event handlers explicitly they are a presumed component of any action placed on a keyframe. As mentioned in an earlier note, Flash 5 has a new onClipEvent handler, which allows an argument of enterFrame.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Flash Topics