actionscript3 Drag and drop over another object

Advertisement

 Drag and drop over another object

The goals is to write a little Flash application that will tell the user whether he correctly dragged and dropped an object over another one.

Step 1 - Start from the file above

• I.e. we want to have the user drag the red circle over the blue rectangle.

Step 2 - Add a text box

This textbox should initially display instruction, then display feedback: "made it" and "missed".

• Use the Textool in the tools panel to enter the text.
• Then in the properties panel, change the type to Dynamic Text.

Step 3 - Action script code

// 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.dropTarget will give us the reference to the shape of
 // the object over which we dropped the circle.
 var target = obj.dropTarget;
 // If the object exists AND it is the blue button, then we change
 // the text in the TextBox. 
 // Since obj.dropTarget is a Shape, we need its parent.
 if (target != null && target.parent == blue_btn)
 {
  textField.text = "Made it !!";
 }
 else
 {
  textField.text = "Missed :(";
 }
 obj.stopDrag();
}

Share This