Main Content

You are here:

Dragging and Dropping

Welcome to another one of Foundation Flash's free Flash and ActionScript tutorials. In this tutorial you are going to learn about how to set up MovieClips as being draggable by the mouse. A full copy of the source code we are using today is available, though there isn't much. This is what we will be making:

It's good to start off with a new project, but even if you don't, make sure you call the .as file DragDrop.as, and saving it in the same place as an .fla. Set the document class to "DragDrop" on the .fla.

Now some preparation work in the .fla. Bump up the frame rate or it will look awful, guaranteed. 40 should do it. Create a graphic for what needs to be dragged/dropped, convert it to a symbol and give it an instance name of 'dragme'. (Save and) move on to the .as. The first four lines are as follow:

package {                                                     
        import flash.display.MovieClip;
        import flash.events.MouseEvent;
        public class DragDrop extends MovieClip {
                public function DragDrop() {

We've looked at everything there before, I think. The only import thing to not is that we will be using MouseEvent, rather than the usual Event. So, we're in our constructor function, and we need to think about the event listeners we need to add: one for picking up (mouse down as were clicking the button down) and one for putting down (mouse up as we let go). We will apply these to the thing these to 'dragme', the thing we want dragged and dropped:

                     dragme.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
                        dragme.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
                }

Okay, we've got out two listeners, now for the functions themselves. For these, you're going to need to know about two functions, startDrag() and stopDrag(), which look like this:

object.startDrag([optional lockCenter, optional bounds]); object.stopDrag();

As you can see, you can't pass any parameters to stopDrag(), but with startDrag(), you can set the object to have its center at the mouse pointer, regardless of where on the object the user clicked, and the bounds where it can be dragged. We won't be using those optional parameters today. Instead, we will combining these simple functions with evt.target which is the object which had the event done to it, i.e. dragme. Using evt.target just makes the functions more universal:

             private function mouseDownHandler(evt:MouseEvent):void {          
                        var obj = evt.target;
                        obj.startDrag();
                }
                private function mouseUpHandler(evt:MouseEvent):void {
                        var obj = evt.target;
                        obj.stopDrag();
                }
        }
}

That's it. I'm deadly serious - that's everything. Nothing more to add. Not exactly a mountain of code, is it? Just the start and stop drag functions really. Oh well. Better see you next week for another free ActionScript tutorial I suppose.

Harry.

Comments