• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Clip Events

The Movie Clip class, like the Mouse, Key, and Button classes, has its own set of events, which are referred to simply as clip events. Many clip events overlap the events of the Key class and the Mouse class; others are unique to the movie clip. You can assign clip event handlers to the movie-clip instance with the action onClipEvent (Global Functions > Movie Clip Control > onClipEvent).

The onClipEvent action for movie clips is analogous to the on action for buttons: The onClipEvent action assigns clip events to movie-clip instances, whereas the on action assigns button events to button instances. One notable difference, however, is that actions assigned to an onClipEvent pertain to the movie-clip Timeline, not to the main Timeline. You will learn more about navigating different Timelines in Chapter 5.

As you can with buttons, you can assign a clip event handler with anonymous functions on the main Timeline. Give your movie-clip instance a name in the Property Inspector and then assign a function to a clip event, as follows:

myMovieClip_mc.onMouseMove = function() { }

myMovieClip_mc is the name of your movie-clip instance, and onMouseMove is the clip event.

When you use anonymous functions to assign clip events, sometimes you can specify the main Timeline with the word _root as the name of the movie clip. You can assign the clip event onMouseMove to the main Timeline instead of a movie clip, as follows:

_root.onMouseMove = function() { }

Notice that this script is indistinguishable from the event handler for the Mouse class.

The clip events onKeyUp and onKeyDown are handled differently, depending on whether you assign them to a movie-clip instance or on the main Timeline with an anonymous function. When either of these events is assigned with an anonymous function, they must be assigned to a listener and registered to the Key class (see “Creating listeners for key events” earlier in this chapter). If events are assigned to a movie clip with the onClipEvent action, no listener is needed.

For easy reference, Table 4.5 contains a list of clip events and some information about them.

Table 4.5. Clip Events
onClipEvent (mouseDown)/onMouseDownWhen the left mouse button is pressed
onClipEvent (mouseUp)/onMouseUpWhen the left mouse button is released
onClipEvent (mouseMove)/onMouseMoveWhen the mouse is moved
onClipEvent (keyDown)/onKeyDownWhen any key is pressed
onClipEvent (keyUp)/onKeyUpWhen any key is released
onClipEvent (enterFrame)/onEnterFrameWhen each frame of the movie clip is updated; triggered at the frame rate of the movie
onClipEvent (load)/onLoadWhen the movie clip is instantiated and first appears in the Timeline
onClipEvent (unload)/onUnloadWhen the first frame after the movie-clip instance is removed from the Timeline
onClipEvent (data)/onDataWhen either external data or external .swf movies are loaded into the movie clip with the action loadVariables or loadMovie

Clip events are used in many ways. In this example, the keyDown clip event is coupled with a conditional statement that tests which key has been pressed.

To detect a key press with onClipEvent:

Create a movie-clip symbol, and drag an instance of it from the Library to the Stage.

Select the instance, and open the Actions panel.

Choose Global Functions > Movie Clip Control > onClipEvent.

A drop-down list of all available events associated with onClipEvent appears. Select keyDown (Figure 4.107).

Figure 4.107. Some of the events of the onClipEvent handler. Mouse Down, Mouse Up, and Mouse Move are the same events as those for the Mouse class. Key Up and Key Down are the same events as those for the Key class, although they can be used in a slightly different manner.

Insert a new line in between the curly braces of the onClipEvent handler and choose Statements > Conditions/Loops > if (Figure 4.108).

Figure 4.108. An if statement has been created.

With your pointer between the opening and closing parentheses for the if statement, choose Built-in Classes > Movie > Key > Methods > getCode.

The getCode() method appears as the condition parameter of the if statement.

After the getCode() method, enter two equals signs and the code key for the specific key you want to detect, or choose a Key property from Built-in Classes > Movie > Key > Constants.

The getCode() method of the Key class retrieves the key code of the last key pressed. Flash checks to see whether that key matches the one you specify after the double equal signs. The double equal signs (==) tell Flash to compare equality (Figure 4.109).

Figure 4.109. When a key is pressed, Flash checks whether it was the spacebar.

Before selecting the action for the if statement, begin this line with _root. Now choose an action as the consequence for this if statement.

In this example, choose Global Functions > Timeline Control > gotoAndStop (Figure 4.110).

Figure 4.110. Choose the gotoAndStop() method from Global Functions > Timeline Control. You can target the main Timeline with the word _root so that Flash moves the playhead of the main Timeline to Frame 5.

Because the onClipEvent action assigns code to the movie clip, all its actions pertain to the movie-clip Timeline, not the main Timeline. So you use the word _root to make the gotoAndStop action target the main Timeline. You’ll learn more about targeting different Timelines in Chapter 5.

Test your movie.

The onClipEvent action assigned to your movie clip detects when a key is pressed. The if statement checks whether the key is the spacebar and makes Flash go to a different frame of the main Timeline.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint