Skip to main content
Participant
Mar 5, 2024 10:15 AM UTC
Answered

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

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. 

This topic is closed to new replies. Start a new post to keep the conversation going.
JoãoCésar17023019
JoãoCésar17023019Correct answer
Community Expert
Mar 8, 2024 12:24 PM UTC

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

12 replies

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
Mar 8, 2024 12:24 PM UTC

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

Translate
kglad
Community Expert
Community Expert
Mar 8, 2024 3:12 PM UTC

swipe() function looks reversed.

Translate
JoãoCésar17023019
Community Expert
Community Expert
Mar 8, 2024 3:17 PM UTC

This is due to nature of the swipe gesture.

 

You can check the live preview for yourself.

Translate
kglad
Community Expert
Community Expert
Mar 5, 2024 3:00 PM UTC
Kookie222Author
Participant
Mar 7, 2024 8:57 AM UTC

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

};

}

Translate