Question

I want to imitate the iPhone scroll behavior in a Flash app I am developing. The idea is to enable drag-drop with a certain amount of inertia/deceleration (you know, when you drop something while your cursor is still moving and the thing would continue moving for a moment and then stop).

I am using the TweenMax library for my animations.

Any ideas will be appreciated.

Thanks

Answer 1

When I recently created something like this, I simply listened for MOUSE_DOWN and MOUSE_UP, and whenever I reckoned that the mouse button was pressed (i.e. in-between those two events, also respecting Event.MOUSE_LEAVE) I would flag it as such, e.g. using a _mouseIsDown class-scope variable.

Then I would have an ENTER_FRAME event handler, or a timer, that would behave differently depending on whether the button was pressed or not.

When the mouse button is down, the ENTER_FRAME handler simply moves the target object to the new mouse position. It will also subtract the current mouse position from the previous one, to get a speed vector. Finally, it would log the current mouse position to allow the above to happen again the next frame.

If the mouse button is released however, it will not just move the target object using a 1:1 mapping to the mouse position, but rather, move it according to the speed vector. It would also decrease the length of the speed vector each tick, until it’s close enough to zero for the entire system to be put into idle state to save up resources.

A simplified solution would look like this, ignoring the setting and resetting of the mouseIsDown flag.

private function _handleEnterFrame(ev : Event) : void
{
  if (_mouseIsDown) {
    // Set speed here, but don't use it while mouse is pressed
    _speed.x = stage.mouseX - _prev_mouse_pos.x;
    _speed.y = stage.mouseY - _prev_mouse_pos.y;

    // Instead, just move target object accordingly
    _targetObject.x = stage.mouseX;
    _targetObject.y = stage.mouseY;
  }
  else {
    // Mouse is released, meaning that it has been tossed, so move
    // object according to speed vector, and decrease speed.
    _targetObject.x += _speed.x;
    _targetObject.y += _speed.y;

    _speed.x *= 0.8;
    _speed.y *= 0.8;


    // Negligible speed, so stop the processing to save resources
    if (_speed.length < 0.05) {
      this.removeEventListener(Event.ENTER_FRAME, _handleEnterFrame);
    }
  }

  _prev_mouse_pos.x = stage.mouseX;
  _prev_mouse_pos.y = stage.mouseY;
}

Obviously, you will need to start listening for the ENTER_FRAME event whenever the mouse is pressed. Also, you need to have the appropriate class-scope variables _prev_mouse_pos and _speed, both instances of flash.geom.Point, as well as the _targetObject which is whatever display object you wish to affect by dragging.