8.
Calling Objects & startDrag()/stopDrag()
Conceptual Objectives:
1. Students will be able to use startDrag & stoptDrag.
2. Students will understand event.currentTarget.
Review:
Open the PowerPoint: REVIEW FOR LESSON 7 – Boolean Logic. The following format is suggested:




Each student is to receive a piece of paper folded into quarters with the letters A, B, C, & D.
The PowerPoint is brought up with the first question.
The students are to individually consider the question and, upon the signal of the teacher, are to
raise their answers. This allows the teacher to quickly evaluate the students’ understanding of
the topic.
If there are many incorrect answers give time to the students to discuss their answers with one
another and then have someone explain the correct answer.
Anticipatory Set:
Open CurrentTarget.swf. So far we have created functions that will only work when one object
calls them. Such as when we made a function that changed the x, y coordinates of box_mc in
lesson three. Drag the smile_mc into the box on the left. Click Run function on. This function
runs on whatever object is inside of its box. Click Reset. Drag in the plus_mc. Click Run function
on. Make note that whatever object is sent to the Run function (placed in the Run function on
box) the same code is executed on it. In this case, it is shrunk each time the function is run.
How does this work?
Content:
event.currentTarget
Many times in programming we want to perform the same action on many different objects. For
example, what if we had 5 boxes and every time we clicked on a box on the screen we wanted it
to shrink to 80% of its previous size? We could add an event listener to each object that in turn
calls its individual function that would shrink just that object, but then we end up with 5
different functions performing exactly the same action, merely on a different object. An easy
way to resolve this is by referring to the calling object inside the function rather than an
individual instance name. To refer to the calling object (whatever object was clicked to call the
function) we simply use event.currentTarget. Open a new file, make two instances of a
movieclip named box1_mc and box2_mc. Type:
box1_mc.addEventListener(MouseEvent.CLICK, scaleMe);
box1_mc.addEventListener(MouseEvent.CLICK, scaleMe);
and write this function to:
function scaleMe(event:MouseEvent):void
{
event.currentTarget.scaleX -= .1;
}
What is the calling object of this function? It is either box2_mc or box1_mc.
So why is this useful?
startDrag() & stopDrag();
Open up Game_Puzzle.fla. Test the movie. Drag out a couple of pieces into their proper place.
Make note that when you hold down the mouse on a piece, you can drag it and when you let go
of the mouse it stops dragging. This is very, very useful. Tell them there are 26 puzzle pieces on
the stage. Have them guess how many functions there are to make this game work… the correct
answer – there are only 2 functions (because we use event.currentTarget like explained above).
Go back to the new file with box1_mc & box2_mc. Add this event listener to both:
box1_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragMe);
box2_mc.addEventListener(MouseEvent.MOUSE_DOWN ,dragMe);
Have the students help define the dragMe function. It should come out like this:
function dragMe(event:MouseEvent):void
{
event.currentTarget.startDrag();
}
Test the movie. Notice how you can drag both objects but you can’t let them go! Have the
students decide how to define a function that will let the objects go. Ask them questions like:
“When should we stop dragging the object?” – when the mouse is let go (MOUSE_UP).
“What should be a useful name for our new function?” – something like letMeGo.
The Code should look like this:
Go back to the new file with box1_mc & box2_mc. Add this event listener to both:
box1_mc.addEventListener(MouseEvent.MOUSE_UP, letMeGo);
box2_mc.addEventListener(MouseEvent.MOUSE_UP ,letMeGo);
function letMeGo(event:MouseEvent):void
{
event.currentTarget.stopDrag();
}
Guided Practice:
The way that guided practice will work is by splitting the class up into groups of two. One student
will control the mouse but cannot do anything except what the other student tells them to do.
These two students should be partners for at least a week. For each assignment they will switch
roles.
Tell the students that when they get stuck to follow a few steps before asking for help:
1. Use their notes. 2. Ask a neighbor. 3. Refer to video, if available. 4. Then ask the teacher for help.
Once they are done, have them raise their hands for the teacher to check them off.
1. Students will be split into groups of two. Have them open FILENAME.flv. Have them open the
actions panel and follow the instructions, which are:
/*
This assignment is to help you understand calling objects and startDrag & stopDrag. Under each
comment below,
write out the necessary code. Once you are done save it as: lastnameFirstnameCallingObject.flv
*/
//
1.
names.
Drag out four instances of the Box movieclip in the library and give them unique instance
//
2.
Add an event listener to the first two boxes waiting for a mouse click.
/*
3.
Define a single function that will shrink either of these first two instances by 90%
and change its x & y position to a random position within the stage.
(hint: try using Math.random()*stage.stageWidth()?) */
/*
4.
Add two event listeners to the last two instances. These should respectively call
two functions - one to start dragging the calling object and one to stop dragging
the calling object. */
//
5.
Define the function to start dragging the calling object.
//
6.
Define the function to stop dragging the calling object.
/*
Test your movie and verify that it is working. If it is not, follow these steps:
1. If you get a compile error, go to the line that contains the error and fix it yourself.
2. Look at your notes!
3. Ask a neighbor for help.
4. Raise your hand and ask the teacher for help.
Once you are done save it as: yourlastnameFirstnameCallingObject.flv */
Independent Practice:
1.
Students should individually open the Drag&DropAssignment.fla. An outline with some empty
functions is given. The students are to follow the instructions inside of the game.
2.
The finished code is included Drag&DropAnswers.fla.