click event and scroll event conflict

[kwontae]

Hi Jack

I was surprised to discover the amazing site, GreenSock and feel secured because I'm a novice in AS3. I gladly signed up. I hope this membership will help me learning AS3.

I got stuck on my first project, making the clickable scroll for my NewiPad. I inserted my clickable movie-clip (vertical) inside the code from the Flick-scrolling example and tested the scroll on my New iPad. It worked well but the problem is that clicking my movie-clip and dragging the scroll conflict. When I scroll, I only want it to trigger the scroll event. Right now mouse click event and scroll event are firing at the same time. So I switched all the mouse click events into the touch events but still the same problem occurs.

I only want that click event or touch event fired when I tap the button not drag the scroll. Your help will be much appreciated. Thanks.

question_about_coflict01.zip

[GreenSock]

To distinguish between the user's intent to drag vs. click/tap, you should record the mouse position when it is pressed, and then when it is released, compare it to that position and if it is less than a threshold (like 3 pixels), treat it as a click/tap. Otherwise, treat it as a drag.

 

You can simplify the hundreds of lines on your first frame to something like this:

 

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);
     }
  }
}

[kwontae]

Jack, thank you so much. Your solution sounds awesome. I was wondering how I can make the scroll like the IOS scroll. Now I know the secret thanks to you. And I was stunned by the only four lines with which you had simplified the hundreds of lines.

Let me fix the problem with your solution. Have a good weekend!

[wearn]

Hello, i want to integrade this option to my code below. I am not having the knowledge of doing it on my own. Can anyone please help me out? I have the button testtest working, but it also works when i drag on this movieclip.

 

Hopefully anyone can help me out.

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
import flash.geom.Rectangle;
import flash.utils.getTimer;
import flash.events.MouseEvent;
import flash.text.*;
import flash.display.*;


import flash.events.MouseEvent;
import flash.net.URLRequest;


import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

//var myTween:Tween = new Tween(blitMask, "alpha", Strong.easeOut, 0, 1, 3, true);
// onRelease
myMovieClip.testtest.addEventListener(MouseEvent.CLICK,onReleaseMyButton);
function onReleaseMyButton(event:MouseEvent):void {
trace("CHECK CLICK");
//testtest.x += 20;
}





TweenPlugin.activate([ThrowPropsPlugin]);
var bounds:Rectangle = new Rectangle(0, 0, 1024, 768);
graphics.beginFill(0x888888, 0);
graphics.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
graphics.endFill();
//here is where I reference the MovieClip.
var mc:Sprite = myMovieClip;

myMovieClip.cacheAsBitmap = true;
myMovieClip.cacheAsBitmapMatrix = new Matrix();
//myMovieClip.werner.text = "bureaustoelen";
//myMovieClip.werner2.text = "web 2 print";

var blitMask:BlitMask = new BlitMask(mc, bounds.x, bounds.y, bounds.width, bounds.height, true);
//blitMask.bitmapMode = false;
var t1:uint, t2:uint, y1:Number, y2:Number, x1:Number, x2:Number, xOverlap:Number, xOffset:Number, yOverlap:Number, yOffset:Number;
blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
blitMask.bitmapMode = false;

function mouseDownHandler(event:MouseEvent):void {
TweenLite.killTweensOf(mc);
//x1 = x2 = mc.x;
//xOffset = this.mouseX - mc.x;
//xOverlap = Math.max(0, mc.width - bounds.width);
y1 = y2 = mc.y;
yOffset = this.mouseY - mc.y;
yOverlap = Math.max(0, mc.height - bounds.height);
t1 = t2 = getTimer();
mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);


}
function mouseMoveHandler(event:MouseEvent):void {
var y:Number = this.mouseY - yOffset;
//if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior)
if (y > bounds.top) {
 mc.y = (y + bounds.top) * 0.5;
} else if (y < bounds.top - yOverlap) {
 mc.y = (y + bounds.top - yOverlap) * 0.5;
} else {
 mc.y = y;
}
var x:Number = this.mouseX - xOffset;
if (x > bounds.left) {
 mc.x = (x + bounds.left) * 0.5;
} else if (x < bounds.left - xOverlap) {
 mc.x = (x + bounds.left - xOverlap) * 0.5;
} else {
 mc.x = x;
}
blitMask.update();
var t:uint = getTimer();
//if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second
if (t - t2 > 50) {
 x2 = x1;
 x1 = mc.x;
 y2 = y1;
 t2 = t1;
 y1 = mc.y;
 t1 = t;
}
event.updateAfterEvent();
}
function mouseUpHandler(event:MouseEvent):void {
mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
mc.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
var time:Number = (getTimer() - t2) / 1000;
var xVelocity:Number = (mc.x - x2) / time;
var yVelocity:Number = (mc.y - y2) / time;
ThrowPropsPlugin.to(mc, {throwProps:{
	 y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300},
	 x:{velocity:xVelocity, max:bounds.left, min:bounds.left - xOverlap, resistance:300}
    }, onUpdate:blitMask.update, ease:Strong.easeOut
   }, 10, 0.3, 1);

}

[wearn]

i have to integrade this option for my graduation in to weeks, so is there anyone who can help me out?

 

merry x-mass!