Jump to content
Search Community

startDrag blitMask problem [HELP]

Applauz test
Moderator Tag

Recommended Posts

So I'm using blitMask on a large movie clip that contains clickable buttons inside of it.

 

Everything works as expected... however I have just discovered that setting the bitmapMode of my blitmask to true when I begin the startDrag on the movie clip offers up better performance.

 

The problem with this is that now my clickable elements inside of the movie clip don't work because bitmapmode is set to true.

 

 

Im setting bitmapMode to TRUE on my MOUSE_DOWN and setting it to FALSE on MOUSE_UP ...

 

 

Here is what I am doing.. any help with this issue is appreciated!

 

var blitMask:BlitMask = new BlitMask(allChapters_mc, 0, 0, 1024, 706, false);

 TweenLite.delayedCall(1.5, blitMask.update, [null, true]);



 function _mouseDownHandler(event:MouseEvent):void {
  trace("Mouse Down");

 // THIS IS WHAT HAS IMPROVED PERFORMANCE BUT KILLED MY BUTTONS
  blitMask.enableBitmapMode();

  TweenMax.killTweensOf(allChapters_mc);

  _x1 = _x2 = this.mouseX;
  _t1 = _t2 = getTimer();

  curX = this.mouseX;


  allChapters_mc.startDrag(false, new Rectangle(_panelBounds.x - 999999, _panelBounds.y, 99999999, 0));

  blitMask.addEventListener(MouseEvent.MOUSE_UP, _mouseUpHandler, false, 0, true);
  this.addEventListener(Event.ENTER_FRAME, _enterFrameHandler, false, 0, true);





 }

 function _enterFrameHandler(event:Event):void {
  _x2 = _x1;
  _t2 = _t1;
  _x1 = this.mouseX;
  _t1 = getTimer();
  blitMask.update();

  trace("THE PANEL X is: " + allChapters_mc.x);

  GetHorizontalDirection();




 }

 function _mouseUpHandler(event:MouseEvent):void {


  trace("Mouse Up");

  prevX = 0;
  curX = 0;
  hDirection = "null";


  allChapters_mc.stopDrag();
  this.removeEventListener(Event.ENTER_FRAME, _enterFrameHandler);

  blitMask.removeEventListener(MouseEvent.MOUSE_UP, _mouseUpHandler);
  var elapsedTime:Number = (getTimer() - _t2) / 1000;
  var xVelocity:Number = (this.mouseX - _x2) / elapsedTime;




  //we make sure that the velocity is at least 20 pixels per second in either direction in order to advance. Otherwise, look at the position of the allChapters_mc and if it's more than halfway into the next/previous panel, tween there.
  if (_currentPanelIndex > 0 && (xVelocity > 500 || allChapters_mc.x > (_currentPanelIndex - 0.5) * -_panelBounds.width + _panelBounds.x)) {
   _currentPanelIndex--;
  } else if (_currentPanelIndex < _panelCount - 1 && (xVelocity < -500 || allChapters_mc.x < (_currentPanelIndex + 0.5) * -_panelBounds.width + _panelBounds.x)) {
   _currentPanelIndex++;
  }
  if (allChapters_mc == null) {
   trace("---ERROR! Null target");
   return;
  }

  trace("CURRENT PANEL INDEX START = " + _currentPanelIndex);



  TweenMax.to(allChapters_mc, 0.5, {x:_currentPanelIndex * -_panelBounds.width + _panelBounds.x, ease:Strong.easeOut, onStart:blitMask.enableBitmapMode, onUpdate:blitMask.update,onComplete:setTitle}); 

// bitmapMode is disabled in the setTitle function called above.


 }

Link to comment
Share on other sites

I'm confused - you only have bitmapMode = true between the MOUSE_DOWN and the MOUSE_UP, right? So during that time, why would you care if your buttons are clickable? How could the user click on a button if the mouse is already pressed on something else?

Link to comment
Share on other sites

Thats not the issue.

 

The issue is that when the user intends to touch the button... since that button is inside of the movie clip that is blitMasked... when they touch the button it triggers enabledBitmap .. which then voids the MouseUp on the button.

Link to comment
Share on other sites

Oh, I see what you mean - then it seems like the key would be to distinguish between a user's tap/click and their drag/scroll which you could do by watching for movement after the MOUSE_DOWN. Maybe set up a tolerance level too, so that if they move in any direction more than, I dunno, 2 pixels, then (and only then), it would kick into drag mode which would turn on bitmapMode and start movin'.

 

See what I mean?

Link to comment
Share on other sites

I don't get how I could calculate that in a single mouseDown handler though. Its easy using MouseDown and MouseUp .. I can capture mouseX on mouseDown and mouseX again on mouseUP to compare the 2 values and make a plan from there.

 

But how can I do that all inside of my MouseDown function ?

Link to comment
Share on other sites

Yes ...

 

but when listening for MOUSE_MOVE .. it will work and I can see the x coordinates tracing... but at that moment when you press the mouse down... the MOUSE_MOVE mouseX is always the same value as the mouseX of the button press.

Link to comment
Share on other sites

Exactly. They'll match initially (good!) and you just keep watching until the distance exceeds a certain threshold. Remember, you record the initial value in your MOUSE_DOWN and then in your MOUSE_MOVE you do the comparison. Once the threshold is hit, you remove the MOUSE_MOVE listener, flip on your bitmapMode and away you go (dragging).

Link to comment
Share on other sites

ok ... I got it working. I only needed to do this to toggle the bitmapMode .. not to toggle dragging... ..

 

This is what I came up with. Does all of this look right to you? Do I need to call blitMask.update(); every time I toggle bitmapMode ? Any suggestions are appreciated.

 

 function onMouseMove(e:MouseEvent):void
{

  but1X = this.mouseX;


  if (but1X - but2X < 3 && but1X - but2X > -3){

   blitMask.bitmapMode = false;
   trace("CLICKED");
  }
  else {

   blitMask.bitmapMode = true;
   trace("DRAGGED");
  }

e.updateAfterEvent();
}

 function _mouseDownHandler(event:MouseEvent):void {
  trace("Mouse Down");


  stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);



  TweenMax.killTweensOf(allChapters_mc);


  _x1 = _x2 = this.mouseX;

  _t1 = _t2 = getTimer();

  curX = this.mouseX;


  but1X = this.mouseX;
  but2X = this.mouseX;


  allChapters_mc.startDrag(false, new Rectangle(_panelBounds.x - 999999, _panelBounds.y, 99999999, 0));

  blitMask.addEventListener(MouseEvent.MOUSE_UP, _mouseUpHandler, false, 0, true);
  this.addEventListener(Event.ENTER_FRAME, _enterFrameHandler, false, 0, true);

 }





 function _enterFrameHandler(event:Event):void {
  _x2 = _x1;
  _t2 = _t1;
  _x1 = this.mouseX;
  _t1 = getTimer();
  blitMask.update();

  startTouch = curX;
  endTouch = stage.mouseX;



  trace("THE PANEL X is: " + allChapters_mc.x);

  GetHorizontalDirection();




 }

 function _mouseUpHandler(event:MouseEvent):void {

  //Remove new mouse move option
  stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);

  trace("Mouse Up");

  prevX = 0;
  curX = 0;
  hDirection = "null";


  allChapters_mc.stopDrag();
  this.removeEventListener(Event.ENTER_FRAME, _enterFrameHandler);

  blitMask.removeEventListener(MouseEvent.MOUSE_UP, _mouseUpHandler);
  var elapsedTime:Number = (getTimer() - _t2) / 1000;
  var xVelocity:Number = (this.mouseX - _x2) / elapsedTime;




  //we make sure that the velocity is at least 20 pixels per second in either direction in order to advance. Otherwise, look at the position of the allChapters_mc and if it's more than halfway into the next/previous panel, tween there.
  if (_currentPanelIndex > 0 && (xVelocity > 500 || allChapters_mc.x > (_currentPanelIndex - 0.5) * -_panelBounds.width + _panelBounds.x)) {
   _currentPanelIndex--;
  } else if (_currentPanelIndex < _panelCount - 1 && (xVelocity < -500 || allChapters_mc.x < (_currentPanelIndex + 0.5) * -_panelBounds.width + _panelBounds.x)) {
   _currentPanelIndex++;
  }
  if (allChapters_mc == null) {
   trace("---ERROR! Null target");
   return;
  }

  trace("CURRENT PANEL INDEX START = " + _currentPanelIndex);



  TweenMax.to(allChapters_mc, 0.5, {x:_currentPanelIndex * -_panelBounds.width + _panelBounds.x, ease:Strong.easeOut, onStart:blitMask.enableBitmapMode, onUpdate:blitMask.update,onComplete:setTitle});
  //TweenMax.to(allChapters_mc, 0.7, {x:_currentPanelIndex * -_panelBounds.width + _panelBounds.x, ease:Strong.easeOut,onComplete:setTitle});


 }

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.
×
×
  • Create New...