Touch Swipe in Edge

Hey turle, I sent you a PM, but I'll post here as well.

You would put the sym.play(); here:

this.onSwipeLeft = function()

{

          if( this.activeAnim > 1 )

          {

                    this.activeAnim--;

                    sym.play();

          }

}

You would put the sym.playReverse(); here:

this.onSwipeRight = function()

{

          if( this.activeAnim < this.animCount )

          {

                    this.activeAnim++;

                    sym.playReverse();

          }

}

Hope that helps!

Hi Turtle,

In order to scrub your timeline via a finger slide, you can use a little math to compare the ratio of these 2 props:

1) user's touch position in relation to stage width (or the width of your slide area)

2) playhead position in relation to the car's timeline length.

Here's the meat of that equation:

sym.animScrubPosition = (sym.scrollThumbXPos/sym.stageWidth) * sym.animTimelineLength;

Note: sym.scrollThumbXPos is set on Stage/touchstart and Stage/touchmove.

Here is an example (try on touch device):

www.timjaramillo.com/code/edge/swipe_v5/test.html

And source:

www.timjaramillo.com/code/edge/_source/swipe_example_v5.zip

Let me know how it goes!

Tim

Hmmm, are you saying you want to use swipe for both play/playReverse the timeline, as well as to scrub the timeline? It seems like those 2 interactions will conflict- unless you set up a separate area on stage for each of the interactions ...

Hey turtle, there must be a bug somewhere, the Stage.touchevent should be able to be triggered as soon as the stage content is visible.

Have you tried viewing your animation in-browser, with the javascript console open? To check for errors?

Have either of you (or anyone else) played with swipe-specific jQuery libraries like http://www.jqtouch.com/ or iscroll (http://cubiq.org/iscroll-4). I wonder if these offer smoother moves or just more overhead.

Hi Tim,

This was a great example, thank you it's tought me alot using swipe with edge animate. Any examples that can use drag with mouse and swipe? Also i noticed that iPad still tries to do other gestures while swiping on safari.

Is there an easy way to disable all iPad gestures other than what you have coded in edge?

Hi Anthony,

I don't have an example on hand, but you can add mouse-swiping by transferring the "touchstart" event to "mousedown", and "touchend" event to "mouseup". And on those events, you'd use "e.pageX", instead of "touch.pageX".

To disable other gestures on iPad, be sure to include "e.preventDefault();" on "touchstart", "touchend" events, and you might want to add it to the "touchmove" event if you're still having that issue.

Hey Tim,

I tried your mouse-swiping suggestion by changing "e.pageX", instead of "touch.pageX" but couldn't get it to work ... Is there something else that I need to change?

Thx

Hi there, you'd do something like this:

if ( e.pageX == undefined ) {

          var touch = e.originalEvent.touches [0] || e.originalEvent.changedTouches [0];

                   sym.getComposition().getStage().swipeEndX = touch.pageX;// (swipeEndX is defined as sym.swipeEndX on Stage.compositionReady)

                   sym.getComposition().getStage().onSwipe();

}

Thats exactly what I have and the touch swipes are working perfectly its the mouse (on desktop) swipes that are not registering at all ... changed touch.pageX to e.pageX and still nothing

For desktop, see this example (this has touch and mouse swipe):

example:

http://www.timjaramillo.com/code/edge/swipe_v2_touch_and_mouse/swipe.html

source:

http://www.timjaramillo.com/code/edge/_source/swipe_v2_touch_and_mouse.zip

// code on Stage.mousedown:

sym.getComposition().getStage().swipeStartX = e.pageX;

// code on Stage.mouseup:

sym.getComposition().getStage().swipeEndX = e.pageX;

sym.getComposition().getStage().onSwipe();

This might be just what I am looking for - I am a school teacher, making very simple 'flipbook' animations with young students - in the past we have animted these in Flash, but this is complex for them to do - animate is easier, using a mousemove, but I would really like this to scrub on touch screen devices as well - can you help please?

(I am not too technical...)    http://www.rosswallis.org/animate_scrubs/clara/test%20animation.html

Tim, just letting you know that this really helped me out on a project today. I have a wheel-of-furtune styled wheel UI that needed to rotate via Swipe Up/Swipe Down, and this code helped me get there! Thank you

Awesome Bill, glad to be of help! Good luck with your project!

Hello, im make a swipetouch Vertical, with your code, but have a bug. When i have some button with action on it, it was not able to click on.

to code is on the Stage.onmoveStart...etc.

I trying to put the trigger on a other symbol, but still not working for my button.

Did you know a  solution ?? Thanks

Hi there, it's hard to say why your button is not working, without seeing an example of the issue. Can you post/PM me a link to a simplified version of your source files?

A good place to start would be to add an 'alert' to your button's click event, to see if that's even firing. Then try to follow the trail and find out where things are stopping. Be sure to use your browser's console log to check for javascript errors as well.

alert('on button click');

Here is the link, work on desktop, but mobile or ipad no.

http://lix3.net/dev/touch/swipe_touch.html

Are you using Edge Animate for this touch interaction, or is this raw javascript?

the exemple is only js.

but this exemple is in edge

http://lix3.net/dev/maraudeurs/maraudeurs_homepage.html

Hi Tim,

          this.onSwipeLeft = function()

          {

                    if( this.activeAnim > 1 )

                    {

                              this.activeAnim--;

                              sym.play();

                    }

          }

Can I change this to work as onSwipeUp onSwipeDown?

Instead of Left and Right?

Hello TimJaramillo,

I'm trying out your beautiful code, but unfortunately I can not get the SwipeDown function to work at all.

http://kat-media.com/test/swipe.html

My current stage code is as following:

http://kat-media.com/test/swipe.js

Would be great if you could take a quick look.

Cheers,

Kat