Making long press touch not trigger clicking?

[kwontae]

Hi Jack

I got your help last time in solving the conflict problem between clicking my movie-clip and dragging the scroll. If the mouse has moved less than 3 pixels in either direction when the mouse is released, I can click the movie-clips inside the scroll. Otherwise I can drag the scroll. It works well with mouse. But when I drag slowly with my finger on my iPad and stop on a movie clip, the last touch triggers clicking. I guess the touch is a long press touch. So I assume that if I make the long press touch not trigger clicking, it would be much better. I hope it would act more like the IOS scrolling which is clickable only when the time and length of the touch are all short. I'd like to insert another condition regarding about the time. How about that when the touch lasts less than 0.5 second, treat it as a click otherwise ignore it? I have been studied the Action-script 3.0 for the last couple of weeks but I couldn't find a clue about the code. Could you give me some help about the code? Here is the code you gave me last time. And I attached the FLA file.

Thank you so much.

 

 

 

var btnspeak:Array = [btnspeak01,btnspeak02,btnspeak03,btnspeak04,btnspeak05,btnspeak06,btnspeak07,btnspeak08,btnspeak09,btnspeak10,btnspeak11,btnspeak12,btnspeak13,btnspeak14,btnspeak15,btnspeak16];

for(var i:uint = 0; i < btnspeak.length; i++) {
  btnspeak[i].stop();
}

var btns:Array = [btn01, btn02, btn03, btn04, btn05, btn06, btn07, btn08, btn09, btn10, btn11, btn12, btn13, btn14, btn15, btn16];
var mouseDownX:Number; //for recording the x position of the mouse when it is pressed
var mouseDownY:Number; //for recording the y position of the mouse when it is pressed
var clickedButton:DisplayObject; //for recording the button that is pressed

for (i = 0; i < btns.length; i++) {
btns[i].addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
}

function mouseDownHandler(event:MouseEvent):void {
   stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
  //now record the mouse position and button that's pressed
  mouseDownX = stage.mouseX;
  mouseDownY = stage.mouseY;
  clickedButton = event.target as DisplayObject;
}

function mouseUpHandler(event:MouseEvent):void {
  stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
  //if the mouse has moved less than 3 pixels in either direction when the mouse is released, treat it as a click. Otherwise ignore it.
  if (Math.abs(mouseDownX - stage.mouseX) < 3 && Math.abs(mouseDownY - stage.mouseY) < 3) {
  clickHandler(clickedButton);
  }
}

function clickHandler(button:DisplayObject):void {
  for (var i:int = 0; i < btns.length; i++) {
  if (btns[i] != button) {
	 btns[i].gotoAndStop(1);
  }
  }
}

question_about_the longpressed_time.zip

[jamiejefferson]

Ok hopefully this should sort you out. It's untested but the logic is simple enough.

 

Just initiate mousedown as being 'possibly a click', then after 0.5 seconds, change it to prevent it being a click. TweenLite even helps in this regard with its handy delayedCall() function.

 

I've added

var isClick, clickTime

function notClick()

and a few pieces inside your mouseup/down handlers

 

var btnspeak:Array = [btnspeak01,btnspeak02,btnspeak03,btnspeak04,btnspeak05,btnspeak06,btnspeak07,btnspeak08,btnspeak09,btnspeak10,btnspeak11,btnspeak12,btnspeak13,btnspeak14,btnspeak15,btnspeak16];

for(var i:uint = 0; i < btnspeak.length; i++) {
btnspeak[i].stop();
}

var btns:Array = [btn01, btn02, btn03, btn04, btn05, btn06, btn07, btn08, btn09, btn10, btn11, btn12, btn13, btn14, btn15, btn16];
var mouseDownX:Number; //for recording the x position of the mouse when it is pressed
var mouseDownY:Number; //for recording the y position of the mouse when it is pressed
var clickedButton:DisplayObject; //for recording the button that is pressed

for (i = 0; i < btns.length; i++) {
btns[i].addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
}

var isClick:Boolean = false;
var clickTime:Number = 0.5;

function mouseDownHandler(event:MouseEvent):void {
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
// now record the mouse position and button that's pressed
mouseDownX = stage.mouseX;
mouseDownY = stage.mouseY;
clickedButton = event.target as DisplayObject;

// indicate that this event can be interpreted as a click for
// 'clickTime' seconds
isClick = true;
TweenLite.delayedCall(clickTime, notClick);
}

function notClick():void {
// clickTime has passed so prevent interpretation as click
isClick = false;
}

function mouseUpHandler(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
// check if this can still be interpreted as a click, and if
// it can, then see if the mouse has moved less than 3 pixels
// in either direction when the mouse is released, treat it
// as a click. Otherwise ignore it.
if (isClick
	&& Math.abs(mouseDownX - stage.mouseX) < 3
	&& Math.abs(mouseDownY - stage.mouseY) < 3) {
  clickHandler(clickedButton);
}

// removes the delayed function if it hasn't been
// called, to prevent multiple calls stacking (especially
// in case you want to increase clickTime)
TweenLite.killDelayedCallsTo(notClick);
}

 

If any of this is unclear, or doesn't solve your problem let us know and I'll see what I can do.

[kwontae]

Thank you so much Jamie!

It worked well on my computer and the galaxy tab 10.1 but not on my iPad. It's weird that the same code responses differently.

One more question! I have 16 buttons inside the scroll. When I click the first button(btn01), the first movieclip(btnspeak01) should play and the rest 15 movieclips should stop. And then I click the second button(btn02), the btnspeak02 should play immediately. But clicking the btn02 only stop all other buttons. I have to click the btn02 twice to play the btnspeak02. I guess this problem is related to "fl_ToLoad:Boolean = true;". But I can't find the solution. Here is the code below only for the 5 buttons. I'm sure that the code for the 16 buttons will be extremely long. I guess there should be a way to make it shorter. If you can help me about that, I'd appreciate it if you help me.

 

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
var btnspeak:Array = [btnspeak01,btnspeak02,btnspeak03,btnspeak04,btnspeak05,btnspeak06,btnspeak07,btnspeak08,btnspeak09,btnspeak10,btnspeak11,btnspeak12,btnspeak13,btnspeak14,btnspeak15,btnspeak16];
for (var i:uint = 0; i < btnspeak.length; i++)
{
btnspeak[i].stop();
}
var btns:Array = [btn01,btn02,btn03,btn04,btn05,btn06,btn07,btn08,btn09,btn10,btn11,btn12,btn13,btn14,btn15,btn16];
var mouseDownX:Number;//for recording the x position of the mouse when it is pressed
var mouseDownY:Number;//for recording the y position of the mouse when it is pressed
var clickedButton:DisplayObject;//for recording the button that is pressed
var isClick:Boolean = false;
var clickTime:Number = 0.5;
var fl_ToLoad:Boolean = true;

btn01.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
function mouseDownHandler(event:MouseEvent):void
{
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
mouseDownX = stage.mouseX;
mouseDownY = stage.mouseY;
clickedButton = event.target as DisplayObject;
isClick = true;
TweenLite.delayedCall(clickTime, notClick);
}
function notClick():void
{
isClick = false;
}
function mouseUpHandler(event:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
if (isClick && Math.abs(mouseDownX - stage.mouseX) < 3 && Math.abs(mouseDownY - stage.mouseY) < 3)
{
 clickHandler(clickedButton);
}
TweenLite.killDelayedCallsTo(notClick);
}
function clickHandler(button:DisplayObject):void
{
if (fl_ToLoad)
{
 btnspeak01.play();
 for (var i:uint = 0; i>1 && i < btnspeak.length; i++)
 {
  btnspeak[i].stop();
 }
}
else
{
 for (i= 0; i < btnspeak.length; i++)
 {
  btnspeak[i].stop();
 }
}
fl_ToLoad = ! fl_ToLoad;
}

btn02.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler_2);
function mouseDownHandler_2(event:MouseEvent):void
{
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler_2);
mouseDownX = stage.mouseX;
mouseDownY = stage.mouseY;
clickedButton = event.target as DisplayObject;
isClick = true;
TweenLite.delayedCall(clickTime, notClick);
}
function notClick_2():void
{
isClick = false;
}
function mouseUpHandler_2(event:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler_2);
if (isClick && Math.abs(mouseDownX - stage.mouseX) < 3 && Math.abs(mouseDownY - stage.mouseY) < 3)
{
 clickHandler_2(clickedButton);
}
TweenLite.killDelayedCallsTo(notClick);
}
function clickHandler_2(button:DisplayObject):void
{
if (fl_ToLoad)
{
 btnspeak02.play();
 btnspeak01.stop();
 for (var i:uint = 0; i>2 && i < btnspeak.length; i++)
 {
  btnspeak[i].stop();
  }

}
else
{
 for (i= 0; i < btnspeak.length; i++)
 {
  btnspeak[i].stop();
 }
}
fl_ToLoad = ! fl_ToLoad;
}

btn03.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler_3);
function mouseDownHandler_3(event:MouseEvent):void
{
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler_3);
mouseDownX = stage.mouseX;
mouseDownY = stage.mouseY;
clickedButton = event.target as DisplayObject;
isClick = true;
TweenLite.delayedCall(clickTime, notClick);
}
function notClick_3():void
{
isClick = false;
}
function mouseUpHandler_3(event:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler_3);
if (isClick && Math.abs(mouseDownX - stage.mouseX) < 3 && Math.abs(mouseDownY - stage.mouseY) < 3)
{
 clickHandler_3(clickedButton);
}
TweenLite.killDelayedCallsTo(notClick);
}
function clickHandler_3(button:DisplayObject):void
{
if (fl_ToLoad)
{
 btnspeak03.play();
 btnspeak01.stop();
 btnspeak02.stop();
 for (var i:uint = 0; i>3 && i < btnspeak.length; i++)
 {
  btnspeak[i].stop();
 }
}
else
{
 for (i= 0; i < btnspeak.length; i++)
 {
  btnspeak[i].stop();
 }
}
fl_ToLoad = ! fl_ToLoad;
}

btn04.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler_4);
function mouseDownHandler_4(event:MouseEvent):void
{
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler_4);
mouseDownX = stage.mouseX;
mouseDownY = stage.mouseY;
clickedButton = event.target as DisplayObject;
}
function mouseUpHandler_4(event:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler_4);
if (Math.abs(mouseDownX - stage.mouseX) < 3 && Math.abs(mouseDownY - stage.mouseY) < 3)
{
 clickHandler_4(clickedButton);
}

}
function clickHandler_4(button:DisplayObject):void
{
if (fl_ToLoad)
{
 btnspeak04.play();
 btnspeak01.stop();
 btnspeak02.stop();
 btnspeak03.stop();
 for (var i:uint = 0; i>4 && i < btnspeak.length; i++)
 {
  btnspeak[i].stop();
 }
}
else
{
 for (i= 0; i < btnspeak.length; i++)
 {
  btnspeak[i].stop();
 }
}
fl_ToLoad = ! fl_ToLoad;
}

btn05.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler_5);
function mouseDownHandler_5(event:MouseEvent):void
{
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler_5);
mouseDownX = stage.mouseX;
mouseDownY = stage.mouseY;
clickedButton = event.target as DisplayObject;


}
function mouseUpHandler_5(event:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler_5);
if (Math.abs(mouseDownX - stage.mouseX) < 3 && Math.abs(mouseDownY - stage.mouseY) < 3)
{
 clickHandler_5(clickedButton);
}

}
function clickHandler_5(button:DisplayObject):void
{
if (fl_ToLoad)
{
 btnspeak05.play();
 btnspeak01.stop();
 btnspeak02.stop();
 btnspeak03.stop();
 for (var i:uint = 0; i>4 && i < btnspeak.length; i++)
 {
  btnspeak[i].stop();
 }
}
else
{
 for (i= 0; i < btnspeak.length; i++)
 {
  btnspeak[i].stop();
 }
}
fl_ToLoad = ! fl_ToLoad;
}