Adobe Edge Mobile Image Gallery

Question

I am using Adobe Edge Animate to create a large portion of my website, but I want to make a mobile version as well, and so obviously instead of onClick events, I want to use onTouch events. I just can't seem to find any good information on how to use touch events as I have never used them before.

I want to make a simple image gallery that plays forward when you swipe to the left, and plays reverse when you swipe to the right.

The big problem here is, how do I tell a touch event to do different things based on the direction of the swipe?

Answer 1

first of all, you're right, you want to use three event handlers: touchstart, touchmove, touchend

one approach you might take is to compare the starting position of the user's finger(s) to the ending position. although the code will vary based on how many fingers you want to detect, i'll outline a basic method you can adapt. in order to detect one finger, enter the following in a "touchstart" event handler:

var xStart = e.originalEvent.touches[0].pageX;
sym.setVariable('xStart', xStart);

that will store the starting x-position of the first finger in a variable and then make it globally accessible by other event handlers. then maybe do the same thing in a "touchend" event handler. use some logic to compare the two values.

xStart = sym.getVariable('xStart');
var xEnd = e.originalEvent.touches[0].pageX;

if (xEnd > xStart)
{
    sym.playReverse();
}
else if (xEnd < xStart)
{
    sym.play();
}

then you'll have some stop frames to hold at those images.

that's just an example, but hopefully it'll help you get going. good luck!