and Dropping Using Drop Targets

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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:

  1. 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") {

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") {

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!

Kirupa's signature!




kirupa.com's fast and reliable hosting provided by Media Temple.