Jump to content


click event and scroll event conflict

Recommended Posts

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.


Link to comment
Share on other sites

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++) {

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) {

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 2 months later...

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
function onReleaseMyButton(event:MouseEvent):void {
trace("CHECK CLICK");
//testtest.x += 20;

var bounds:Rectangle = new Rectangle(0, 0, 1024, 768);
graphics.beginFill(0x888888, 0);
graphics.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
//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 {
//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;
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;
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);


Link to comment
Share on other sites

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


merry x-mass! :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.