< Day Day Up >
Using Clip Events
When a movie clip instance with attached scripts enters a scene, that scene can take on a
new look, feel, and function through the use of clip events. These events allow actions to
be triggered when an instance enters or leaves a scene, when the user moves the mouse
around in the scene, and in other ways.
This section describes the various clip events and provides real-world analogies for their
uses. Note that you can use clip events only with scripts attached to movie clip instances.
Presence: onClipEvent (load)
When someone or something enters a room or an area, there can be all kinds of ripple
effects: the demeanor of people already in the room changes; the environment can be
affected in some way; even the person (or thing) entering the room can change as a result
of what's going on inside. This event handler provokes a similar response by triggering a
script when a movie clip instance enters a scene—useful for initializing the movie clip,
for having it be affected by the environment it's entering, or for having it affect the
environment.
Absence: onClipEvent (unLoad)
If a movie clip instance can affect a scene when it enters, it can also affect the scene
when it leaves (sometimes in the opposite way). You can use this event handler to trigger
a script when a movie clip instance exits a scene.
Power, Energy: onClipEvent (enterFrame)
When an object is given energy or power, it usually signifies that it is taking action on a
continuous basis. Consider a clock: without power it sits motionless and useless. If you
provide power to it, it ticks, the hands on the face move, and you're able to use it to tell
time. This event handler is used to trigger a script continuously, at the same rate as that o
f
your movie as it plays. If your movie's frame rate is set to 20 frames per second, the
scripts this event handler triggers are executed 20 times a second. This event handler has
many powerful applications, as you'll learn from lessons throughout this book.
Movement: onClipEvent (mouseMove)
Think of this event as a motion detector within your movie. If a movie clip instance is
present in the scene to which this clip event is attached, a set of actions can be executed
each time the user moves the mouse—even if it's just a pixel. This event allows you to
create motion-related interactivity—for example, the ability to detect movement direction
(right, left, up, and down), current mouse position, and more.
Computer-Based Interaction: onClipEvent (mouseDown), onClipEvent (mouseUp),
onClipEvent (keyDown), onClipEvent (keyUp)
Because the mouse and keyboard are designed to interact with computers, these clip
events don't have real-world equivalents. However, they do provide a means of executing
scripts when the user presses (or releases) the mouse button or specific keys. While these
events may seem similar to the press, release, and keyPress events described earlier in
this lesson, they're a bit more powerful. Using the keyUp and keyDown clip events, you
can create key-combinations, or keyboard shortcuts, in your application so that action is
taken when a sequence of keys is pressed. In contrast, the keyPress mouse event allows a
single key to initiate action. The mouseUp and mouseDown clip events are different from
the press and release mouse events because while the latter only trigger scripts when the
user interacts directly with a button, the mouseDown and mouseUp events trigger scripts
when the mouse is pressed or released anywhere on the stage.
Receiving Instructions: onClipEvent (data)
In real life, incomplete instructions can lead to all sorts of problems. The same holds true
in Flash. Because Flash lets you load various types of data (variables, external SWFs,
JPGs) from external sources into movie clip instances, this event handler plays a vital
role because it triggers a script, attached to an instance, only after this data has been
completely loaded into it from the source. In doing so, it prevents you from receiving the
types of errors that result from incomplete instructions. You can use this event to re-
execute actions (refresh) if data is loaded into the clip more than once.
This is a visual representation of how clip events are triggered. The down arrow
represents pressing the mouse button or a key. The up arrow represents releasing
the button or key. The asterisk represents an occurrence of the event.
In the next exercise, we'll create a project that simulates a burglar's getting caught in the
act. The burglar's presence (or absence) will determine how the scene plays, and the
burglar himself will be programmed to respond to the environment in various ways using
clip events.
1. Open ClipEvents1.fla in the Lesson02/Assets folder. Open the Property Inspector.
This project contains a single scene that includes seven layers named according to
their content. Take special note of the two frames with labels. The one labeled
Clear represents the scene without the burglar, and the one labeled Burglar
introduces the burglar into the scene. (Move the playhead between these frames to
get a handle on this concept because it will be critical to the success of our
project.) The burglar graphic is actually a movie clip instance named burglar_mc,
which will contain most of the scripts that control our movie's interactivity (more
on that in a bit). The burglar_mc movie clip instance is the only movie element
that appears and disappears when the user navigates between these two frame
labels; all other elements are constantly present. Let's look at these constantly
present elements.
At the top-right of the stage are four buttons. The one that depicts the burglar with
the international sign for "No" (red circle with a line through it) on top will
eventually be set up to move the scene to the Clear frame, thus "removing" the
burglar from the scene. The other three buttons—Tiny, Small, and Normal—will
be used to dictate our burglar's size.
Below these buttons is a light-green circle graphic: a movie clip instance named
timer_mc. We will program timer_mc to spin when the burglar is in the scene,
giving the sense that it's tracking time.
Below the timer_mc movie clip instance is a text field named timeAmount_txt.
Here, we will be incrementing a number as long as the burglar is present—once
again to give the sense that we're tracking time.
Below this text field are two more text fields, one with an X beside it, the other
with a Y. We'll program our burglar to follow the mouse as it moves around.
These text fields—mouseXPosition_txt and mouseYPosition_txt, respectively—
display the current x and y coordinates of the burglar_mc movie clip instance as it
moves.
Below these text fields is the last text field. Named message_txt, this text field will
provide the current status of our environment ("All Clear," "ALERT!" and so on).
Our scene contains only two other elements—both movie clip instances that need
to be examined in depth to be understood.
2. Double-click the small circle in the top-left of the work area, just above the stage,
to edit this movie clip in place.
This movie clip has an instance name of siren_mc. With its timeline visible, you
can see that it's made up of three layers and two frame labels. At the frame labeled
On, there's a siren sound on the timeline. When this movie's timeline is sent to that
frame label, the sound will play. This will be used to simulate an alarm being
turned on. The other frame label on this timeline, Off, contains no sound; when the
timeline is sent to that frame, the alarm will cease playing.
3. Return to the main timeline. On the Lights layer, click the Show Layer button (red
X) to reveal a big black box that covers the entire stage. Double-click it to edit this
movie clip in place.
This movie clip has an instance name of lights_mc. With its timeline visible, you
can see that it's made up of four layers and five frame labels. This movie clip is
used to simulate various light angles in the movie. We'll be scripting our project so
that when the
burglar moves to a particular area of the screen, the appropriate light
will come on.
For example, if he moves left, the left "light" will come on (frame labeled Left).
On the Sound layer, we've placed a sound at each one of the frame labels that
gives the audio effect of a big switch being toggled (the light is turning on).
Now that the introductions are complete, it's time to start scripting!
4. Return to the main timeline. On the Lights layer, press the Hide Layer button to
hide the big black area that is the lights_mc movie clip instance. With the Actions
panel open, select Frame 1 on the Actions layer and attach this script:
5.
6. message_txt.text = "All Clear";
7.
8. var time:Number = 0;
9.
10. var size:Number;
11.
12. stop ();
13.
The first line places the text "All Clear" in the message_txt text field as soon as the
movie plays. Whenever the timeline is sent back to this frame label, this action
will execute again. Knowing this, we can deduce that whenever "All Clear"
appears in the message_txt text field, the main timeline is at Frame 1 and the
burglar is not present. An understanding of this functionality will prove important
in a moment.
The next two lines of script create the time and size variables, which both hold
numeric values. We haven't assigned values to the size variable yet, but some of