Actionscript 3 - detecting click to zoom or drag

Question

Hi,

I'm using Actionscript 3, and am building an image viewer. So far, I have the following functionality, based around the "onClick" mouse event:

1) When viewing the normal sized image, clicking will display a "zoomed" image.
2) When viewing the zoomed image, clicking will display the "normal" image.

Great stuff.

Now I want to apply the following behaviour, so the user can zoom in, and drag the zoomed image around - and have sketched out the following:

1) Removed the onClick event
2) Add an "onMouseDown" event, to record the mouse XY on mouse down
3) Add a "onMouseUp" event, and record the mouse XY on mouse up
4) If the XY onMouseDown = XY onMouseUp then assume a Click event - so Zoom
5) If the XY onMouseDown != XY onMouseUp then assume a Drag event - so drag the image

Now this only works if the user has a steady hand while clicking - and doesn't feel like a great solution. If the user has an unsteady hand, a drag event is assumed when they really wanted to de-zoom...

Can anyone suggest a better way of detecting whether to Drag the image or to Zoom the image than I have sketched out above?

Thank you for your thoughts / help,

Senior coconut.

Answer 1

Basic pseudocode follows:

import flash.utils.getTimer;

private var clickTime:uint;

function onMouseDown(event:Event):void {
    this.clickTime = getTimer();

    // Start drag even if they intend to zoom -- it won't hurt if it shifts a
    // couple pixels before zooming out
    startDrag();
}

function onMouseUp(event:Event):void {
    var delta = getTimer() - this.clickTime;

    // It's been less than a quarter second, so user probably meant to zoom
    // in/out.  Adjust this number to taste if it seems too low or high.
    if (delta < 250)
        toggleZoom();

    stopDrag();
}