Looking for Javascript to create a swipe function on an html5 canvas

[Kookie222]

I have an animate document with multiple frames. Each frame contains a slide with some content on it (basically like a simple presentation) and you can navigate between the frames with arrows (buttons). 

Now I want to add a function which enables a swipe function (for mobile devices) so you can just swipe to get to the next or previouse frame. 

How do I make this work? 

(I've already tried multiple codes I found online but nothing seems to work...) 

Some help would be appreciated! Thank you. 

[kglad]

https://www.w3schools.com/jsref/obj_touchevent.asp

[Kookie222]

Thanks!
Still, I cant seem to get it work... I'm the worst at coding, so I've got no idea on how to make that work. :')

I've tried this for example:

canvas.addEventListener("ontouchmove", fl_MobileSwipe.bind(canvas));
function fl_MobileSwipe ()
{

{

if (this.navigationLoop && this.currentFrame == 0)

this.gotoAndStop(this.timeline.duration - 1);

else

this.gotoAndStop(this.currentFrame - 1);

};

this.nextFrame = function(e)

{

if (!this.navigationLoop && this.currentFrame == this.timeline.duration - 1)

return;

this.gotoAndStop(this.currentFrame + 1);

};

}

[JoãoCésar · Accepted solution]

Hi.

Here is an example.

Live preview:

https://bit.ly/49HdRDb

Javascript:

var swipeTolerance = 30;
var pressedX;

function main()
{
	createjs.Touch.enable(stage);
	root.loop = false;
	root.stop();
	
	root.on("click", onClick);

	stage.on("stagemousedown", onStageMouseDown);
	stage.on("stagemouseup", onStageMouseUp);
}

function onClick(e)
{
	switch(e.target.name)
	{
		case "prevButton":
			prevFrame();
			break;
		case "nextButton":
			nextFrame();
			break;
	}
}

function onStageMouseDown(e)
{
	pressedX = e.stageX;
}

function onStageMouseUp(e)
{
	var dragOffsetX = e.stageX - pressedX;
		
	if (Math.abs(dragOffsetX) >= swipeTolerance)
		swipe(dragOffsetX > 0 ? 1 : -1);
}

function swipe(direction)
{
	if (direction === 1)
		prevFrame();
	else if (direction === -1)
		nextFrame();
}

function prevFrame()
{
	root.gotoAndStop(root.currentFrame - 1);
}

function nextFrame()
{
	root.gotoAndStop(root.currentFrame + 1);
}

window.root = this;

if (!root.started)
{
	main();
	root.started = true;
}

Source / download / files / FLA:
https://bit.ly/3Ts9JB8

I hope this helps.

Regards,
JC

[kglad]

swipe() function looks reversed.

[JoãoCésar]

This is due to nature of the swipe gesture.

You can check the live preview for yourself.

[kglad]

the live preview is reversed when tested (using chrome and edge) using a mouse drag. eg, left to right, decreases the numbers.

[JoãoCésar]

Swiping to the left should bring the next frame.

[kglad]

it does.

[JoãoCésar]

Yeah. Pretty much every gallery works by swiping/dragging to the left to bring the next photo.

And remember that the numbers in the example are frames, so they should increase when dragging to the left.

[kglad]

it seemed counter-intuitive to me, but that is the way it should work.

[Kookie222]

Thank you!! It works perfectly. 

[JoãoCésar]

You're welcome!