actionscript3 Drag and match learning application - dumb version

Advertisement

 Drag and match learning application - dumb version

The goal is to move objects to a textbox containing the first letter of its name. E.g. "Cat" should be moved to the "C" box. If there is a hit, the user will get some success message and can't move the object anymore. If he is done, he should get an extra message.

Step 1 - Create movie clips for object to be moved

• As above with the red and blue circle
• Each object should have an instance name

Step 2 - Create textboxes

• Also as above
• Create one for each object (E.g. a "C" for the cat, etc.)
• Make sure they are dynamic and they have a name.

Step 3 - Foreground/Background

Make sure that the textboxes are in the background or the movie clips in the foreground. Otherwise a dropped object will not find its target.

• Select all the movie clips, then right-click->Arrange->Bring to Front.

Step 3 - Write Action Script code

Code below is fairly awful since it lacks abstraction, but it has the advantage to use a minimal variety of AS3.

var hits = 0;

// Register mouse event functions

dog.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
dog.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
rocket.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
rocket.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
cat.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
cat.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
bat.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
bat.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 target object exists the we ask the test_match function
 // to compare moved obj and target where it was dropped.
 if (target != null)
 {
  test_match(target, obj);
 }
 obj.stopDrag();
}

function test_match(target,obj) {
 // test if either one of the four pairs match
 if ( (target == box_c && obj == cat) ||
             (target == box_d && obj == dog) ||
      (target == box_r && obj == rocket) ||
             (target == box_b && obj == bat) )
 {
  // we got a hit
  hits = hits+1;
  textField.text = "Yes ! You got one !";
  // make the object transparent
  obj.alpha = 0.5;
  // kill its event listeners - object can't be moved anymore
  obj.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
  obj.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
  // Test if we are done
  if (hits == 4)
  {
   textField.text = "Made it !!";
  }
 }
 else
 {
  textField.text = "Missed :(";
 }
}

Share This