Hit
Test
(Collision Detection)
To make your movies more interactive, Flash 5 included
numerous built-in functions that automated the process of
movie clips interacting with other objects. One such
function is HitTest. HitTest enables you to ask Flash "Is
this movie clip colliding or in contact with that movie
clip?". If Flash could talk, it would say, "Yes, Masta Flash
Programma, the movie clip is in contact with this movie
clip!" or "No, the movie clip is not in contact......!".
Let's tune back into the
world of reality. The following animation is a good example
of the HitTest function at work:
|
|
|
[ notice how the text
changes when the two circle and the square collide ] |
To make your strenuous
programming life easier, I have provided an incomplete
source file for you to work on. Don't worry, the source file
does not include the ActionScript necessary to make the hit
test work. The animation merely contains the movie clip of
the circle and the square. Click the link in the following
table to download the incomplete FLA file for this tutorial:
Here is
how to program HitTest:
-
Open the hittest.fla
file you downloaded from the above link.
-
Select the circle movie clip. Once the circle movie clip
has been selected, click the Instance tab to display the
Instance panel. In the Name field of the Instance panel,
enter the word circle:
[ the movie clip has been
given the name 'circle' ]
-
Because it takes at least two objects to create a
collision, you will need to name the second object: the
square movie clip. Select the blue square and give it the
name: block. You would enter the word 'block' in
the Instance panel just like you did for the circle movie
clip in Step ii.
-
Once you named the block movie clip, it is time to add the
actions. Right click on the circle movie clip and select
Actions. The Object Actions window will appear. Copy and
paste the following code into that window:
[ copy and paste the above
code in the Object Actions window ]
-
That's it! You are done with creating the hitTest
function. The following section explains every detail of
the code you simply copied and pasted. Preview the
animation to see it work!
How Does the
Code Work?
The following section will basically
deconstruct how the code you copied and pasted enables Flash
to determine whether a collision occurred or not:
onClipEvent
(enterFrame) {
if (_root.circle,
hitTest(_root.block)) {
_root.text = "Collision Detected";
} else {
_root.text = "No Collision";
}
}
The first line is the On
handler for the movie clip. The code following this
statement will be enabled each time the frame of the movie
clip loads. Basically,
enterFrame,
enables the action to loop continuously. The
enterFrame
handler really simplifies the developers life by enabling
him to not have an empty movie clip with actions on two
blank keyframes to create a loop.
onClipEvent
(enterFrame) {
if (_root.circle,
hitTest(_root.block)) {
_root.text =
"Collision Detected";
} else {
_root.text = "No Collision";
}
}
This line contains the
if
action and the
hitTest function (I know
I'm pointing out the obvious). I am not going to go into
great detail into the if statement because this tutorial
does not deal with the if function. Click
here for a good tutorial on how to use the if
statement.
The hitTest function
basically follows the following syntax:
if (movieclip1,
hitTest(movieclip2))
{
actions
}
You can expand upon the
if
statement as you see fitting. In my example, I added the
else
argument as well. Enough with if, let's talk about the code
highlighted in green. The
movieclip1
is the movie clip you are using as your control. This movie
clip is used by
hitTest to see if
anything 'hit' it.
Movieclip2
is the bully movie clip. This is the clip that will go hit
your good
movieclip1. The hitTest
function simply asks, "Did
movieclip2
go hit movieclip1" If
movieclip2
did hit movieclip1,
then there was a 'hit'. There was a collision. If
movieclip2
did not go hit movieclip1, there was no collision.
If you have some prior
programming language, you might have inferred that the
hitTest
function is a Boolean expression. When the
hitTest
function is invoked, you will basically get a "Yes" or "No"
response; a 1 or 0. That's why you don't see an equal
operator in the first line of the if statement. Flash
automatically understands there should be a
==1
after the parentheses in the if statement.
onClipEvent
(enterFrame) {
if (_root.circle, hitTest(_root.block)) {
_root.text =
"Collision Detected";
} else {
_root.text = "No Collision";
}
}
This line features the action
that will start if "hitTest" is deemed to be true. In other
words, if there is a collision between the movie clips, the
action in this line will start.
onClipEvent
(enterFrame) {
if (_root.circle, hitTest(_root.block)) {
_root.text = "Collision Detected";
} else {
_root.text = "No Collision";
}
}
If Flash determines, by means
of the hitTest
function, that a collision did not occur, the action
following the else
statement will execute. This line is entirely optional. You
can simply end with the
if
statement. I included
else
to display the text 'No Collision' when there was no
collision.
Downloads
Even though I make every effort to make
sure that my tutorials are legible and understandable for
all users, I am also infallible. Therefore, I have provided
the final source code for you to see how the animation I
used to write this tutorials turns out.
Conclusion
These two sentences
conclude the section on detecting collision. This is a
fundamental Flash function that you will use when creating
games, shopping carts, drag-drop features, and more! The
following animation shows a basic use of this function:
[ download FLA for above animation by
clicking here ]
[../../pages/me.htm]
|