• Understanding how click and double-click works simultaneously in actionscript 3.0

    by  • December 1, 2011 • Titbits

    One fine day I was working in my office, developing my first big game Rummy. And my boss comes and tells me “dude, I want a feature in the game where players should be able to discard a card by selecting it and pressing on the discard button and if they want they can simply double-click to discard a card “.  No big deal, there is an event listener MouseEvent.CLICK and MouseEvent.DOUBLE_CLICK for single-click and double-click respectively. The only problem is they don’t work simultaneously :(.

    Well nothing is impossible 🙂

    Before I get into how it works, lets take a look on a simple code snippet.

    import flash.events.MouseEvent;
    
    btnClickDoubleClick.addEventListener(MouseEvent.CLICK, ClickDoubleClick);
    var m_nDoubleClickSpeed:Number = 300;
    var m_toMouse;
    
    function ClickDoubleClick(e:MouseEvent) {
    	if (m_toMouse != undefined) {
    		clearTimeout(m_toMouse);
    		HandleDoubleClick();
    	} else {
    		m_toMouse = setTimeout(HandleSingleClick, m_nDoubleClickSpeed);
    	}
    }
    
    function HandleSingleClick() {
    	trace("HandleSingleClick");
    	m_toMouse = undefined;
    }
    
    function HandleDoubleClick() {
    	trace("HandleDoubleClick");
    	m_toMouse = undefined;
    }

    Lets dig in 😉

    Line 1 imports the mouse event class that we gonna use to add mouse event listener to a simple button.

    Line 3 adds an mouse event listener to a button whose instance name is btnClickDoubleClick, ClickDoubleClick listens to the CLICK mouse event.

    Line 4 this variable determines the double-click speed. You can play around with the number and see what suits you best. 300 milliseconds works fine for me.

    Line 5 I will get back to this when I explain the listener function ClickDoubleClick.

     Line 16-19 you can put anything that you want to execute for single-click event. And you must reset m_toMouse back to undefined, I will explain why.

    Line 21-24 you can put anything that you want to execute for double-click event. And you must reset m_toMouse back to undefined, now its time to understand the mystery behind everything.

    Basically there are two states in which the system stays, I call them initial state and clicked state. Initial state when no click has happened. Clicked state between first-click and second-click. Lets dive into our listener function.

    Line 7-14 Where the magic happens. The system is in initial state, on first click it checks m_toMouse  and goes to the else statement. setTimeOut runs a specified function (here HandleSingleClick) after a specified delay in milliseconds (i.e. our double click speed m_nDoubleClickSpeed), and it returns a unique numeric identifier for the timed process in our case HandleSingleClick that gets assigned to m_toMouse. Now there are two possibilities either the second click happens before 300 milliseconds (double-click speed) or not.

    Case 1: when second-click happens before 300 milliseconds.  Now we go into the if part if the our listener function. First thing we do is to clear our timed function, so snippet for single-click don’t get executed. Then we call our function HandleDoubleClick. You can do anything you wanna do, I am just printing function name for testing purpose. Then I reset m_toMouse back to undefined. Now the system is in initial state. Any click after this is considered as first-click.

    Case 2: When the second-click doesn’t happen before 300milliseconds. As soon as it hits the 300 millisecond from the first-click our HandleSingleClick function gets executed. You can do anything you wanna do, I am just printing function name for testing purpose. Then I reset m_toMouse back to undefined. Now the system is in initial state againAny click after this is considered as first-click.

    Simple enough right 🙂

    I hope it helps you understand how you can implement single-click and double-click at the same time.

    About

    An accomplished Game Developer with 4 years’ experience covering all aspects of the game development life-cycle including designing, development, testing and maintenance. Have extensive experience in flash based web, desktop and mobile games and other rich internet applications like small websites, software prototypes, portfolios and many more.

    https://plus.google.com/117140375336587355364