Where we left off

Last time we covered keyboard control, gravity and friction. This week we'll finish off by looking at drag actions and how to monitor the mouse speed.

Not now, I'm dragging

The next step is to allow the user to drag the ufos and 'throw' them around. The strategy is to track the object as it is being dragged around and calculate how fast it is being moved. When the user lets go the code kicks in which will keep the object moving along at the current speed. The strategy for doing this in Flash5 is quite a bit different to what we would have done in Flash4 (see the bouncing ball demo at http://www.zincroe.com for a Flash4 compatible method).

First, we are going to introduce two new ClipEvents to allow the user to reposition the ufo directly:

onClipEvent ( mouseDown ) {
   // Is the user clicking on the ufo? If so initiate a drag action.
   if (this.hitTest(/:_xmouse, /:_ymouse, true)) {
      dragged = true;
      startDrag ( this, false, left, top, right, bottom );
   }
}

onClipEvent ( mouseUp ) {
   // Let go of the ufo
   dragged = false;
   stopDrag ();
}

The hitTest method asks the question "Does this point lie within the boundaries of this movie clip?". I am using the _xmouse and _ymouse values here to find out if the cursor is over the ufo when the mouseDown event occurs. If it is, I set dragged to true and then initiate a drag action. The mouseUp ClipEvent stops the drag action and sets dragged to false.

Winging it

Why do we need to keep track of whether the object is being dragged? Because we need to put a halt to the code which is constantly repositioning the object while the user is dragging it. Otherwise the ufo would slide out from under the cursor. Instead, we want to calculate how fast the user to dragging the object. Then when the user lets go it will carry on with that speed.

onClipEvent ( enterFrame ) {
   if (dragged) {
      // Calculate the speed based on the position change per frame
      xspeed = _x-lastx;
      yspeed = _y-lasty;
      lastx = _x;
      lasty = _y;
   } else {
      // Reposition the ufo based on speed, friction, and gravity
      _x+=Number(xspeed);
      if (_x right) {
         xspeed = -xspeed;
      }
      else {
         xspeed *= friction;
      }
      _y+=Number(yspeed);
      if (_y bottom) {
         yspeed = -yspeed;
      }
      else {
         yspeed = (yspeed+gravity)*friction;
      }
   }
}

While the drag is taking place, the xspeed and yspeed are being calculated by comparing the object's current position to that in the last frame. The difference represents the speed of motion. Once the user releases the mouse button the original set of calculations take over and carry on the motion.

Wrapping Up

Quite a bit has gone into this little animation. Don't worry if you find this last section a little challenging. Spend some time with the source files and feel free to post your questions and ideas.