Skip to main content
Inspiring
April 18, 2012
Question

Swiping on a button.. Almost there [HELP]

  • April 18, 2012
  • 1 reply
  • 780 views

So I'm using blitMask and ThrowProps to handle swiping / dragging of my movieclips.   However inside my movieclips I have some buttons.   I have tried a solution detecting the mouse press MouseY, etc.  to detect if the user swiped or touched.

What is happening is that the variable comes up at NaN on the first touch of the screen.  Once the first touch is registered .. then it works.

Does someone have a better solution for this ?   Otherwise if a user drags on the button .. the button event will be fired.

Here is how I am doing it now.

---------

// Blitmasking for Section 1

TweenPlugin.activate([ThrowPropsPlugin]);

var blitMask:BlitMask = new BlitMask(audioVideoContent_mc, audioVideoContent_mc.x, audioVideoContent_mc.y, audioVideoContent_mc.width, audioVideoContent_mc.height, true);

blitMask.bitmapMode = false;

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

blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

function mouseDownHandler(event:MouseEvent):void {

 

 

          // FIX for Button events //

 

         offset = audioVideoContent_mc.mouseY;  //setting the offset from the origin

         mouseDX = mouseY;

 

          //

 

 

 

          trace("bitmapMode is now FALSE");

          blitMask.bitmapMode = false;

          TweenLite.killTweensOf(audioVideoContent_mc);

          y1 = y2 = audioVideoContent_mc.y;

          t1 = t2 = getTimer();

 

          audioVideoContent_mc.startDrag(false, new Rectangle(0, -99999, 0, 99999999));

          audioVideoContent_mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

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

 

 

}

function enterFrameHandler(event:Event):void {

 

  y2 = y1;

          t2 = t1;

          y1 = audioVideoContent_mc.y;

          t1 = getTimer();

          //blitMask.scrollX = 0;

          blitMask.update();

 

 

}

function enableBitMapMode():void{

 

          trace("bitmapMode is now TRUE");

          blitMask.bitmapMode = false;

 

}

function mouseUpHandler(event:MouseEvent):void {

 

          // FIX for button events in Throwprops //

         mouseUX = mouseDX;

         mouseDX = mouseY;

         vy = mouseDX - mouseUX;

        

         //trace("The RANGE was - " + Math.abs(mouseDX - mouseUX));

        

 

          audioVideoContent_mc.stopDrag();

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

          audioVideoContent_mc.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);

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

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

          var yOverlap:Number = Math.max(0, audioVideoContent_mc.height - audioVideoContent_mc.height);

 

 

          if (Math.abs(mouseDX - mouseUX) > tolerance){

            trace("Mouse up was not within range of mouse down (10px), so is not a button press");

           ThrowPropsPlugin.to(audioVideoContent_mc, {throwProps:{

                                                                                 y:{velocity:yVelocity, max:0, min:-1527, resistance:100}

 

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

                                                                      }, 10, 0.3, 0.2);

         }

 

 

 

          else if (Math.abs(mouseDX - mouseUX) < tolerance){

            trace("Mouse up was within range of mouse down (10px), so is a button press :)");

           

            //and will it work? No!

            trace("the detected button press was on: " + event.target.name);

         }

 

 

 

      }

                    

// LOAD THE VIDEO PATH

   var docs:File = File.applicationDirectory;

// VIDEO BUTTONS //

audioVideoContent_mc.intro1BTN.addEventListener(MouseEvent.MOUSE_DOWN, fl_intro1BTNa);

function fl_intro1BTNa(event:MouseEvent):void

{

                    // Solution to capture if a user is dragging or touching

         offset = audioVideoContent_mc.mouseY;  //setting the offset from the origin

         mouseDX = mouseY;

                    audioVideoContent_mc.intro1BTN.alpha = 0.3;

}

audioVideoContent_mc.intro1BTN.addEventListener(MouseEvent.MOUSE_UP, fl_intro1BTNb);

function fl_intro1BTNb(event:MouseEvent):void

{

          audioVideoContent_mc.intro1BTN.alpha = 0;

 

          trace("The BUTTON RANGE was - " + Math.abs(mouseDX - mouseUX));

 

          if(Math.abs(mouseDX - mouseUX) < tolerance){

 

 

                    MovieClip(parent).videoPath = "file://"+docs.nativePath+"/videos/introSummary.mp4" as String;

                    TweenMax.to(MovieClip(parent).mainHomeBTN, .5, {x:0, y:-40, ease:Expo.easeOut, startAt:{x:0, y:5},onComplete:MovieClip(parent).loadVideo});

                    TweenMax.to(MovieClip(parent).closeVideoBTN, .5, {x:0, y:5, delay:.6, ease:Expo.easeOut, startAt:{x:0, y:-40}});

  trace("Video Loaded");

}

 

          else {

 

                    trace("YOU ARE SWIPING");

 

}

 

}

This topic has been closed for replies.

1 reply

April 18, 2012

Didn't go through your code but how about this to distinguish between a swipe and a button tap.

Make your buttons execute the function on TOUCH_END instead of TOUCH_BEGIN or TOUCH_TAP however if after TOUCH_BEGIN is initiated set a made up variable to true intendToPress = true and if the user moves his/her finger more than 20 pixels (drags object) then set the intendToPress to false and have the TOUCH_END function only fire if intendToPress == true.

Would that work?

Applauz78Author
Inspiring
April 18, 2012

Will that work with my ThrowProps set up ?

April 18, 2012

I am not familiar with ThrowProps.