This chapter is from the book
This chapter is from the book
This chapter is from the book
Messing with Movie Clips
Now that you know how to handle an event using a button (using the on() method we just talked about), let's look at handling events with movie clips. Movie clips have an event handler too, but it's called onClipEvent. Probably the biggest difference between on and onClipEvent is that, when it comes to mouse buttons, on can only see what happens directly on top of the button, while onClipEvent looks at the whole movie clip and the movie clip timeline. For example, if you click your mouse button down and up outside of a button, an on action will never see your mouse click. But a movie clip, which has to use onClipEvent, scans the entire movie and will see your mouse click, even if you clicked nowhere near the movie clip.
As you continue programming in ActionScript, you'll come across times when on will be most helpful and other times when onClipEvent will be the best choice.
Let's see it in action. Open up the movie chapter3/drag_jake1.fla. It's a simple little movie (one frame) with two symbols: Jake the Fish and a pea shark. The movie we're going to make will involve Jake swimming too close to the pea shark, and when the shark opens its mouth, Jake is scared until he swims away again. The user will determine Jake's position on the stage.
The symbols on the stage are both two-frame movie clips. One frame is the normal pose, where there is no close contact, shown in Figure 3–5.
)
Figure
3–5 Calm Jake and pea shark
Figure 3–6 shows the two when they get too close.
Let's get programming.
Open chapter3/drag_jake1.fla.
Click on Jake.
Figure
3–6 Agitated Jake and pea sharkOpen the Actions panel (it should say "Actions – Movie Clip" at the top).
Enter this code:
onClipEvent(enterFrame) { trace("mouse in movie"); }Control
Test Movie.
)
Figure
3–6 We've introduced two things here. The first is the onClip Event(enterFrame). This event occurs whenever the movie's playhead starts a new frame. If your movie is set at 12 frames per second (the default), then the enterFrame event occurs 12 times every second, and the code inside onClipEvent(enterFrame) is run 12 times every second. Note looping in movie clips is the default, so movies will always loop unless you set them not to.
So when the movie is running, the single line of code trace("mouse in movie") is called. trace is great tool—as you saw, it opens up a little output window and displays some text. It's my debugging tool of choice, and you'll be seeing more of it later.
Now let's do something more interesting than printing out some text.
Click on Jake.
Open the Actions panel.
Change the code to:
onClipEvent(enterFrame) { startDrag(this, true); }Control
Test Movie.
We briefly looked at startDrag earlier. It causes an object to follow a user's mouse anywhere in the movie. startDrag needs to be told which object on the movie should start following the user's mouse, and that's what this is for. It tells startDrag that the object to move is this one—that is, the object that the current action is attached to (in this case, the fish). The true signifies that the object to be dragged should have its center wherever the mouse cursor is.
As you might guess, startDrag is a useful component of many Flash games and adds a level of interactivity that would be hard to get otherwise.
if and hitTest
Continuing to build the movie:
Get to Jake's Actions panel.
Enter this code:
onClipEvent(enterFrame) { startDrag(this, true); if(this.hitTest(_root.shark)) { this.gotoAndStop("scared"); } }Control
Test Movie
We just added our first bit of conditional logic (if) and another function (hitTest). Let's look at the if statement. Here's the basic structure of an if statement:
if(condition)
{
statements;
}
It's pretty simple. If the condition is true, then the statements are executed. If the condition is false, then the statements are ignored. Here are some examples of conditions (note that conditions use two equal signs instead of one):
- x == 5
- _root._xmouse < 94
- this.hitTest(_root.shark)
All of these have to be either true or false—there's no in between. The last condition uses the hitTest function, which always returns a true or false value, so we don't need an equals or greater than sign.
hitTest determines whether a certain movie clip is overlapping another movie clip. If the two are overlapping, it returns a true value. If not, it returns false. Here's how the function is structured:
movieClip1.hitTest(movieClip2)
If movieClip1 is overlapping movieClip2, then this function returns a true value. For our code, determining movieClip1 was easy—we're just referencing Jake the fish, so we use this. Referencing the shark takes a little extra work, since we need to tell the Flash where movieClip2 is. If we just used
this.hitTest(shark)
Flash would assume that the shark object was a part of the fish object. However, both the shark and the fish are just objects on the main stage. We tell Flash that an object is on the main stage by prefacing it with _root, which means "start at the top level of the movie." So, if the user has dragged Jake over the shark, then this.hitTest(_root.shark) is true, and the statements inside the if statement are executed. The only statement there right now is
this.gotoAndStop("scared");
This is a little different than the gotoAndStop we saw earlier. Earlier, we were moving from scene to scene, but somehow, now we're just moving to a different frame in a certain symbol. How'd we do that?
The key is using this before gotoAndStop. We're telling gotoAndStop exactly which movie clip we want to move forward in, and that movie clip is the fish movie clip. If we didn't use this, Flash would look for the frame labeled "scared" in the main timeline. But since we're using this, it knows to look at the fish's timeline, not the main one.
NOTE
For those of you still used to Flash 4, this is a way to bypass the deprecated tellTarget function (yes, it's still around). You could also code
with(this)
{
gotoAndStop("scared");
}
to get the same effect, with syntax a little closer to tellTarget.
Let's finish the movie now. Enter the following code into Jake's Actions panel:
onClipEvent(enterFrame)
{
startDrag(this, true);
if(this.hitTest(_root.shark))
{
this.gotoAndStop("scared");
_root.shark.gotoAndStop("hungry");
}
else
{
this.gotoAndStop("calm");
_root.shark.gotoAndStop("normal");
}
}
Be sure to Control Test Movie.
We added an else statement that executes statements if the condition in the if statement isn't true. We're also moving the playhead in the shark symbol back and forth, depending on where the fish symbol is.
Now that you've manipulated multiple timelines based on user input (you did, honest), you're ready for the next step: changing actual properties of movie clips based on user input.