Simple dragging code

Advertisement

 Introduction - simple dragging code

The screenshot shows a simple dragging application, i.e. you can move around the circle and the rectangle.

Step 1 - Draw an object

• Anything you like

Step 2 - Transform it into a Movie Clip

• Select the object (or if you created several objects for a drawing select them all)
• Right-click on the object and create a movie symbol
• Give the instance a name in the properties panel !

Step 3 - Adapt code below

Dragging code is really simple and follows the same principles we encountered for example in the Flash button tutorial.

• Associate an event listener with an event handler function. This time we listen to "mouse down" and "mouse up" events and for each we need to write a function that will do the dragging.

// Register mouse event functions
blue_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
blue_btn.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

red_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
red_btn.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

// Define a mouse down handler (user is dragging)
function mouseDownHandler(evt:MouseEvent):void {
 var object = evt.target;
 // we should limit dragging to the area inside the canvas
 object.startDrag();
}

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

Share This