Table of Contents

13.10 Input Focus and Movie Clips

As of Flash Player 6, movie clips instances (but not main movies) can receive keyboard input focus, allowing them to be controlled by keystrokes, much like a button object is controlled. Input focus is most commonly used by components that take input in complex graphical user interfaces. For example, a list box can allow the user to scroll through its items via the up and down arrow keys. The Enter key activates the selected item.

Generally speaking, if a keyboard-driven action is not tied directly to a specific movie clip, you should use the Key object's listener events — not movie clips with input focus — to trap the keystrokes. See Key in the Language Reference.

Despite what you might assume, movie clips do not receive keyboard input focus when they are clicked. Instead, they receive focus either due to the Tab key being pressed or, programmatically, by using the setFocus( ) method. To allow a movie clip to receive input focus programmatically, we must explicitly set its focusEnabled property to true. In contrast, movie clips with button handlers can always receive input focus, even when focusEnabled is false. Once focusEnabled is true for a clip, we can focus the clip programmatically with Selection.setFocus( ). The user can also focus the clip with the Tab key, provided that the movie clip's tabEnabled property is true. The movie clip's position in the tab order is dictated by its tabIndex property.

When a movie clip has input focus, its onKeyUp( ) and onKeyDown( ) event handlers become active in their callback-function form. From these handlers, we can implement keyboard-specific behaviors, such as expanding a hierarchical menu when the right arrow key is pressed or jumping to the nearest item in a list when a letter is pressed.

We can detect when a movie clip gains and loses input focus via the onSetFocus( ) and onKillFocus( ) events, defined both by the MovieClip class and the Selection object.

By default, keyboard focus is indicated by a yellow rectangle. The highlight is useful for debugging the tab order, but it may not be visually appealing. To remove the yellow rectangle, set the MovieClip._focusrect property to false. If you do this, you should give the end user some indicator as to which screen element has keyboard focus at runtime. To do so, use the clip's onSetFocus( ) and onKillfocus( ) handlers, as shown in the next example, to toggle some indicator of focus.

In Flash Player 6, moving the mouse while a movie clip or button has focus removes focus from that clip or button.

The following simplified code shows how an item in a shopping basket might respond to being focused and deleted via the X key. In a real application, the behavior would most likely be implemented at the class level rather than on a specific movie clip instance. The doHighlight( ) and doRemoveHighlight( ) methods are left as an exercise for the reader. You might use those handlers to jump the playhead to a label that shows or hides some focus indicator, such as the dotted line or thick border typically seen around the button with focus in Windows or Macintosh dialog boxes.

// Allow user to focus item_mc via Tab key
item_mc.tabEnabled = true;
   
// Allow Selection.setFocus( ) to focus item_mc
item_mc.focusEnabled = true;
   
// Highlight item_mc when it is focused
item_mc.onSetFocus = function ( ) {
  this.doHighlight( );
}
   
// Remove highlight from item_mc when it loses focus
item_mc.onKillFocus = function ( ) {
  this.doRemoveHighlight( );
}
   
// Remove item_mc when "x" is pressed and item_mc has focus
item_mc.onKeyDown = function ( ) {
  if (Key.getCode( ) =  = 88) {  // The keycode for "x" is 88
    this.removeMovieClip( );
  }
}

For much more information on movie clip input focus, consult the ActionScript Language Reference entries for the properties and methods discussed in this section.

Table of Contents