Demo 1 - Flash demo of hitTest function's Usage 1
There are two different ways hitTest function can be used and we will explore them in this tutorial.
Usage 1: first usage of this function tests a movie clip against a point on stage and returns true or false based on its test. Three parameters are required when hitTest function is used to test against a point.
hitTest( x , y, shapeFlag )
x : x-coordinate of point against which movie is to be tested
y : y-coordinate of point against which movie is to be tested
shapeFlag : shapeFlag can have value true or false. When its set as true, only the covered area of shape inside movie clip will be considered e.g. if a hollow ring is calling hitTest function to test against a point, which lies in hollow center of ring, hitTest will return false, why ? Because we have told hitTest function to test x,y point against outer solid perimeter of ring. The empty area inside ring will be ignored.
On other hand, if we set shapeFlag to false, now hitTest function will test x,y point against the bounding box (the outermost border and every thing inside it, empty or non-empty). Lets take same example of ring above, if we now set shapeFlag to false, hitTest function for same ring and point will return true, why ? because now hitTest function don’t consider the shape of movie, rather take it as a filled circle, not a ring.
Ok enough talking, lets practically do both of above scenarios, and things will be much clear
Launch flash and open a new blank document. If Rulers are not visible, make them visible by selecting View > Rulers.
Left click on horizontal ruler on top, and drag it down till it touches 100 mark on left vertical ruler. Then click-drag left vertical ruler line till it touches 100 mark on horizontal top ruler. Stage should look like this.
Fig. 1 - selected virtual point with help of horizontal and vertical rulers
We have just marked a point on stage that has x = 100, and y =100 coordinate. We will test our ring against this point, so next step is to create a ring
Select Oval tool from Tools menu and open properties panel, enter 10 for Stroke (Pencil) width. Select Null for Fill Color, Properties panel should look like this before drawing a ring
Fig. 2 - properties panel before drawing a ring
with above settings, draw a ring around the point we have market using rulers. Select Selection Tool and right click on border of the ring to pop-up a menu. Select Convert to Symbol from menu.
Convert to Symbol window will appear, enter Ring for Name, and select “Movie clip” radio button for Type, press Ok button
A new symbol should be created in library (Window > Library) and our drawn ring on Stage is converted to movie clip. If it is not selected, click on ring movie clip on stage, and in properties window for this ring, enter ring_mc for instance name, as shown below.
Fig. 3 - Ring movie clip on stage and instance name set in properties window
Now we will add some ActionScript to test if this ring hits the selected virtual point (100,100) or not. Press + icon on Timeline that adds a new layer. Click on first empty frame of newly created layer and open Actions Panel (Window > Development Panels > Actions). Make sure ring movie on stage is not selected.
Enter this line of code below, in Actions panel for first frame of new layer.
result = ring_mc.hitTest(100, 100, true);
trace ( "hitTest result is: " + result );
|
Fig. 4 - ActionScript added on first frame of new layer
Here ring_mc is the name of movie clip that needs to be tested against our virtually marked point, and it calls the hitTest function through dot notation i.e. called function automatically knows who called him.
Select Control > Test Movie. Movie runs, and result false is traced out in Output panel, which makes sense because our virtual point is inside the empty area, and hitTest considers the outer ring only because shapeFlag is set to be true.
Fig. 5 - Result of hitTest function traced in output panel
Note: virtually marked point (100, 100) by rulers don’t appear on compiled movie, because rulers are only available in design time and have no effect in compiled movie. We marked it only for understanding and spotting our point.
For same line of code, change true to false in parameter list of hitTest function, now code will look like
Select Control > Test Movie again. Movie runs, but this time true is traced out in Output panel, which makes sense because nothing changed other than area we wanted hitTest function to consider, which is now whole ring including its inner empty portion, just like a circle.
Play around with demo flash application above and see if now it makes sense.
Usage 2: Usage two of hitTest function is pretty simple. It tests a movie clip against another movie clip, if they overlap at any point, whether they are hollow or not. It returns true or false based on hit test. In this usage only one parameter is required to be passed, and that is the target movie clip name against which we need to test our movie clip.
Demo 2 - Flash demo of hitTest function's Usage 2
hitTest( test_mc );
test_mc : Movie clip name against which we need to test overlapping / hitting
In same flash file which we used for Usage 1 above, drag another instance of ring movie clip from Library (Window > Library) onto stage, so that it touches ring_mc at any point. In properties panel enter test_mc for instance name of this new ring.
Fig. 6 - New instance of Ring having instance name test_mc
Select same frame where we placed our ActionScript in Usage 1. Open Actions panel and change hitTest parameters, this usage of hitTest function only expects a target movie clip, against which calling movie clip should be tested. Code will look like this now
result = ring_mc.hitTest( test_mc );
trace ( "hitTest result is: " + result ); |
Select Control > Test Movie ( Ctrl + Enter ) to test this movie. Result will be traced out as true in Output panel.
Exercises:
- What does x and y parameters in Usage 1 tell to hitTest function?
- Explain in your words what is the purpose of shapeFlag in Usage 1?
- Think of three implementations or scenarios where you would recommend one of the above three variations of hitTest function.
- In Usage 2, there is no shapeFlag parameter, but how does the ring_mc behaves to test_mc? Does it assume it to be true or false by default? Have you verified your answer, by dropping red ring inside black ring so that they don’t touch, in Demo 2 application above?
- Extend the functionality of Usage 1 file (created through this tutorial or downloaded) so that it copies the functionality of demo given in top of this tutorial.
|
