Jump to content
GreenSock

jameslavis

help with click vs. drag

Moderator Tag

Recommended Posts

Hey folks,


I'm doing a mockup of a webpage that you drag and have content bands that you can click. These content bands are separate movieclips and contained within a long parent movieclip called "main". I have an arrow in that I'd like to trigger one of the content bands to change to another keyframe. Seems simple enough. But I think the listener for the parent drag is overriding it's ability to change or get recognized. I went with the mouse down listener for the drag and the mouseclick for the button tap. Still doesn't kick. Logically I can't see why. Ideas? Have the areas bolded. Really simple stuff in theory. I'm pretty new in the coding world so I hope someone can point me in the right direction.


 


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.*;


TweenPlugin.activate([ThrowPropsPlugin]);


main.bandfourarrow.addEventListener(MouseEvent.CLICK, ofbandsevenbutton);


 


 


var bounds:Rectangle = new Rectangle(0, 0, 1280.15, 720);


var blitMask:BlitMask = new BlitMask(main, bounds.x, bounds.y, bounds.width, bounds.height, false);


 


var t1:uint, t2:uint, y1:Number, y2:Number, yOverlap:Number, yOffset:Number;


 


blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);


 


function mouseDownHandler(event:MouseEvent):void {


  TweenLite.killTweensOf(main);


  y1 = y2 = main.y;


  yOffset = this.mouseY - main.y;


  yOverlap = Math.max(0, main.height - bounds.height);


  t1 = t2 = getTimer();


  main.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);


  main.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);


}


 


 


function mouseMoveHandler(event:MouseEvent):void {


  var y:Number = this.mouseY - yOffset;


  //if main's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior)


  if (y > bounds.top) {


  main.y = (y + bounds.top) * 0.5;


  } else if (y < bounds.top - yOverlap) {


  main.y = (y + bounds.top - yOverlap) * 0.5;


  } else {


  main.y = y;


  }


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


  y2 = y1;


  t2 = t1;


  y1 = main.y;


  t1 = t;


  }


  event.updateAfterEvent();


}


 


 


function mouseUpHandler(event:MouseEvent):void {


  main.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);


  main.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);


  var time:Number = (getTimer() - t2) / 1000;


  var yVelocity:Number = (main.y - y2) / time;


  ThrowPropsPlugin.to(main, {throwProps:{


  y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:50}


  }, onUpdate:blitMask.update, ease:Strong.easeOut


  }, 2, 0.3, 0.5);


}


 


function ofbandsevenbutton(e: MouseEvent): void


{


main.bandfourarrow.gotoAndStop(2);


}


Link to comment
Share on other sites

Hi its very difficult to look at all this code and imagine what might be wrong. 

 

If your button is in a MovieClip that that is the target of a BlitMask, then its possible your button is just a bitmap and not interactive at all. 

Are you sure the bitmapMode = false when you are interacting with the button?

Another problem may be that even though you are telling the clip to gotoAndStop(2), you may need to update the BlitMask by calling 

 

blitMask.update(null, true)

 

http://greensock.com/asdocs/com/greensock/BlitMask.html#update()

 

Remember, the content of a BlitMask is a bitmap, so you lose all interactivity and other MovieClip behavior (like changing frames).

 

 

The topics below are all worth reading as they address similar issues and have some solutions that you can download.

 

http://greensock.com/forums/topic/6777-clickable-movieclip-in-movieclip-throwprops/?hl=blitmask+click#entry26095

http://greensock.com/forums/topic/10540-throwprops-list-mobile-touchevents/?hl=blitmask+click#entry41979

http://greensock.com/forums/topic/7808-throwprops-button-clicked-when-trying-to-throw/?hl=blitmask+click#entry29797

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.
×