Dragging and
dropping objects involves....dragging and dropping objects.
The objects are movie clips, and this tutorial extends upon
simply dragging a movie clip. Unlike dragging an object, you
are dropping the object in a location that will trigger an
event. The location that you drop the object in is a movie
clip as well, and you will learn in this tutorial how to
trigger an event based upon the location an object was
dropped.
To help you see what I am
talking about, drag a color brush and place it on the
computer in the following animation:
When you dragged a color
brush and dropped it on the computer, you should have
noticed that the computer's color changed to reflect the
color from the brush. You will create something similar to
this in the following tutorial while learning how to drag
and drop objects!
Dragging
and Dropping Objects:
To expedite the learning process, I have provided the
partial source file with the interface and minor coding
automatically done for you. Don't worry, the minor coding
does not go beyond stop and frame labels. You will have to
add the code to make the brushes 'drag and drop'.
Download the
partial source code by clicking here.
Once you have downloaded the partial code, make sure you
have it displayed in Flash. We need to first add the drag
and drop action to the paintbrushes. Actually, I'll
explain how to add the actions to one paintbrush, and you
can add the actions to the other paintbrush yourself.
Select the yellow paintbrush, and select the Instance tab.
The yellow paintbrush is conveniently named 'yellow'.
The instance name is useful when trying to code. Right
click on the yellow paintbrush and select Edit in Place.
We are going one level deeper into the movie clip. You
will now see the button that will be holding the drag and
drop code.
Right click on the button inside the yellow movie clip and
select Actions. Press Ctrl + E to go into expert mode and
copy and paste the following code:
Preview the animation by pressing Ctrl + Enter. Drag the
yellow paintbrush and drop it on the computer.
Why the
Animation Worked Because you copied and pasted the code, I
will explain why the code worked so you can replicate the
drag and drop technique in your own animations. I will
explain each section of the code:
on
(press) {
startDrag ("_root.yellow");
}
I am initializing the drag
action for the yellow movie clip (the yellow paintbrush).
Because the button that I am trying to drag is located
inside the movie clip, I need to call the movie clip from
the timeline itself. _root tells Flash to start from the
main timeline. The .yellow following _root is the name of
the movie clip of the yellow paintbrush. If you deleted all
the code and left just this section of code, you will be
able to drag the paintbrush around the movie. We haven't
added the drop code and the stop drag code. We will do that
next.
on
(release) {
stopDrag ();
This section of code is
pretty self-explanatory. When the mouse pointer is released
from the paintbrush, the drag action should stop. If this
code is not there, the paintbrush will follow the mouse
cursor around the movie.
if (_root.yellow._droptarget
== "/computer") {
_root.computer.gotoandStop("yellow");
}
}
The code colored in blue is
the drop code that checks whether the paintbrush was dropped
on the computer. The instance name of the computer is
computer, therefore, the first line checks to see if the
movie clip, yellow, drops on the movie clip,
computer. To check for the drop, the _droptarget
property is used.
if (_root.yellow._droptarget
== "/computer") {
_root.computer.gotoandStop("yellow");
}
}
The section in blue tells
Flash what do if the paintbrush does in fact drop on the
computer. Because the movie clip, computer, is located in
the main timeline, I am referring to it by using the syntax
_root.computer.
After referring to the movie clip computer, I am
assigning the action. The action is
gotoandStop("yellow").
Note that yellow in this line of code is not the movie clip,
but yellow is the frame label inside the computer movie clip
in which the computer's color is changed from gray to
yellow.
Now, you should understand
how the code for the yellow paintbrush causes it to be
dragged and dropped to change the color of the computer.
Your job is to code the green paintbrush. The information
you need to know:
Green paintbrush instance
name: green
Frame label in the
computer movie clip that corresponds to the green color:
green
The code for the green
paintbrush is pasted below, but you should try your best to
code the paintbrush without having to refer to the code:
Instant Replay: Animation
Walkthrough When you click the button (which is
inside the movie clip), you are starting the startDrag
action. You can press and hold the button and move your
mouse, and the object will follow. When the button is
released, the stopDrag action initializes and separates the
mouse and button. That is the first and easy part to
comprehend
The second part involves
checking where the dragged object (paintbrush movie clip)
was dropped. To check whether the paintbrush was dropped on
the computer, the _droptarget property is used. An If
statement is used to ask Flash if the paintbrush was dropped
on the target, which is the computer movie clip. If Flash
responds 'yes' (digitally of course), the computer's color
would reflect the color of the paint brush.
The paintbrush was
created by inserting a button inside a movie clip. The
reason behind that is dragging involves use of the mouse
pointer. Only buttons support mouse actions such as
press, rollover, etc. For the _droptarget and for the
dragging, a movie clip needed to be used. Since the
button is the paintbrush, I could not create a button
that was external to the movie clip and have another
object other than the movie clip being dragged; the
button and the movie clip had to co-exist. Therefore, I
created a movie clip first, then inserted the button of
the paintbrush inside the movie clip. I was able to
appease both of Flash's demands of having a button with
mouse events and a movie clip with an instance name for
coding!
Of course, in classic
kirupa.com tradition, the final source code has been
provided so you can compare your FLA to that of mine. Click Here to Download the
Source Code.Tutorials related to this topic
are:
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
Dragging
and Dropping
Using Drop Targets
