Adobe Community: Message List - Touch Swipe in Edge

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Thu, 28 Aug 2014 17:36:57 GMT

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

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Tue, 26 Aug 2014 16:58:36 GMT

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?

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Fri, 07 Mar 2014 20:41:58 GMT

the exemple is only js.

but this exemple is in edge

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

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Fri, 07 Mar 2014 20:18:07 GMT

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

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Fri, 07 Mar 2014 20:14:22 GMT

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

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

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Fri, 07 Mar 2014 17:23:21 GMT

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');

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Fri, 07 Mar 2014 13:37:46 GMT

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

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Tue, 29 Oct 2013 01:05:59 GMT

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

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Tue, 29 Oct 2013 01:02:49 GMT

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

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Mon, 29 Jul 2013 18:35:15 GMT

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

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Mon, 13 May 2013 21:27:57 GMT

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();

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Mon, 13 May 2013 20:19:58 GMT

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

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Mon, 13 May 2013 19:59:40 GMT

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();

}

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Mon, 13 May 2013 19:43:46 GMT

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

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Thu, 18 Apr 2013 17:06:01 GMT

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.

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Tue, 16 Apr 2013 12:05:39 GMT

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?

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Tue, 23 Oct 2012 00:22:20 GMT

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.

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Mon, 22 Oct 2012 18:24:52 GMT

No bugs. No errors. Could it be the js?

I'll email you my link.

But after I noticed how slow my page loaded, I looked at your example swipe2.html file on the ipad, and it loads super slow too.

I thought maybe it was because I used 12 car images, but your file just uses straight 1,2,3 txt.

Hmmm...

Let me send you my URL.

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Thu, 18 Oct 2012 23:23:55 GMT

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?

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Thu, 18 Oct 2012 23:04:03 GMT

I actually like the way it's working now, without the scrub. But I added some buttons to my layout, and now I think that's interferring with my swipe. It's not smooth & fast like it was without all the buttons.

PLUS, it's taking alot longer to load now.

My swipe seems to take about 40+ seconds before your able to swipe.

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Tue, 16 Oct 2012 22:08:06 GMT

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

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Tue, 16 Oct 2012 21:14:12 GMT

Thank you sooo much. I ran into some problems because I added this new code to your previous code. Now nothing is working.

I wanted my car to do both actions....swipe & glide.

The new code uses a container, old code used the labels. I tried putting a 12 symbols (cars) into a container, but it still didn't work.

But I understand your code, just need time to play with it. I'm new to Adobe Edge, so it might take a while.

Thanks soo much for your help.

I really appreciate it.

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Tue, 16 Oct 2012 18:28:37 GMT

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

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Tue, 16 Oct 2012 16:13:32 GMT

Thanks it worked!!!

1 more question, and I promise not to bug you anymore today.

The effect I'm creating is a car spinning at 360 degrees. I'm using 12 car images. The finger swipe works well. But do you know of a way to do a "continuous finger slide". So instead of swipe-swipe-swiping to the next image. You glide you finger across & watch the car spin?

Thanks again.

Re: Touch Swipe in Edge

forums_noreply@adobe.com — Mon, 15 Oct 2012 23:59:47 GMT

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!

Touch Swipe in Edge

forums_noreply@adobe.com — Mon, 15 Oct 2012 17:40:43 GMT

I used the script from TimJaramillo for my edge file and it worked!!

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

But I still can't figure out where to put sym.playReverse() code.

Can someone tell me exactly where to place the sym.play() or sym.playReverse() code, if I simply wanted the animation to play forwards or backwards when swiped left or right?

Also, is there a way to speed up the swipe action. It's alittle slow.

THANKS