Animate Canvas : Swipe problem on Touch Device

[Olivier-R]

Hi there,

I have a probleme thi Swipe in touch devices. It's work well in Desktop (Swipe with Drag, Hold, Drop...).

Here the test : https://clientes.or-design.org/testSwipe/

If anyone has an idea that would be great!

Thanks,

[kglad]

1. there's no menu1 one in your first frame

2. do you have createjs.Touch.enable(stage, false, true); in your code?

[Olivier-R]

Hi kglad,

1. I don't understand this answer.

2. I have createjs.Touch.enable(true); 

And the buttons works but swipe not...

This is my code on the first frame:

var _root = this;

var page0 = new lib.mc_page0();
_root.mc_pages.mc_pageloader0.addChild(page0);
var page1 = new lib.mc_page1();
_root.mc_pages.mc_pageloader1.addChild(page1);
var page2 = new lib.mc_page2();
_root.mc_pages.mc_pageloader2.addChild(page2);




_root.testBT.addEventListener("click", testLocation.bind(this));
function testLocation(){
	//console.log(_root.mc_pages.mc_pageloader0.name);
	_root.mc_pages.mc_pageloader0.page0.gotoAndPlay(1);
}

_root.start = function()
{
	/*createjs.Touch.enable(true);
	stage.mouseMoveOutside = true;*/
	stage.dragTolerance = 10;
	pages = _root.mc_pages;
	pages.index = 0;
	pages.transitionDelay = 350;
	pages.transitionEase = createjs.Ease.quintOut;
	pages.on("mousedown", _root.mouseDownHandler);
}

_root.mouseDownHandler = function(e)
{
	e.currentTarget.pressedX = e.currentTarget.x;
	e.currentTarget.pressed = true;
	e.currentTarget.offsetX = (e.stageX / stage.scaleX) - e.currentTarget.x;
	e.currentTarget.on("pressmove", _root.pressMoveHandler);
	stage.on("stagemouseup", _root.stageMouseUpHandler);
}

_root.pressMoveHandler = function(e)
{
	e.currentTarget.dragDistance = pages.x - e.currentTarget.pressedX;
	e.currentTarget.x = (e.stageX / stage.scaleX) - e.currentTarget.offsetX;
}


_root.stageMouseUpHandler = function(e)
{
	if(pages.pressed && Math.abs(pages.dragDistance) > stage.dragTolerance){
		if (pages.dragDistance > 0 ){
			pages.index--;
			}
		else
			pages.index++;
		
		pages.index = Math.min(Math.max(0, pages.index), pages.children.length -1);
		//console.log(pages.index);
	}

	createjs.Tween.get(pages).to({x:-pages.index * (canvas.width / stage.scaleX)}, pages.transitionDelay, pages.transitionEase);
	pages.off("pressmove", _root.pressMoveHandler);
	stage.off("stagemouseup", _root.stageMouseUpHandler);
	pages.pressed = false;
}

setTimeout(_root.start,10);
_root.gotoAndStop(0);

[Olivier-R]

OK in that pice of script that I paste, the Touch script is commented, but, no change nothing.

[kglad]

1. touch enabling needs to be uncommented

2. i just noticed you have function names (eg, menu1) matching instance names.  fix that.

3. show your correct first frame code and upload the corrected files to your link so i can test.

[Olivier-R]

OK, done,

That is the new code :

var _root = this;

/**/
var actualpage = 0;
console.log("actualpage = " + actualpage);

var page0 = new lib.mc_page0();
_root.mc_pages.mc_pageloader0.addChild(page0);

var page1 = new lib.mc_page1();
_root.mc_pages.mc_pageloader1.addChild(page1);

var page2 = new lib.mc_page2();
_root.mc_pages.mc_pageloader2.addChild(page2);


_root.start = function()
{
	createjs.Touch.enable(true);
	stage.mouseMoveOutside = true;
	stage.dragTolerance = 10;
	pages = _root.mc_pages;
	pages.index = 0;
	pages.transitionDelay = 350;
	pages.transitionEase = createjs.Ease.quintOut;
	pages.on("mousedown", _root.mouseDownHandler);
}

_root.mouseDownHandler = function(e)
{
	e.currentTarget.pressedX = e.currentTarget.x;
	e.currentTarget.pressed = true;
	e.currentTarget.offsetX = (e.stageX / stage.scaleX) - e.currentTarget.x;
	e.currentTarget.on("pressmove", _root.pressMoveHandler);
	stage.on("stagemouseup", _root.stageMouseUpHandler);
}

_root.pressMoveHandler = function(e)
{
	e.currentTarget.dragDistance = pages.x - e.currentTarget.pressedX;
	e.currentTarget.x = (e.stageX / stage.scaleX) - e.currentTarget.offsetX;
}


_root.stageMouseUpHandler = function(e)
{
	if(pages.pressed && Math.abs(pages.dragDistance) > stage.dragTolerance){
		if (pages.dragDistance > 0 ){
			pages.index--;
			}
		else
			pages.index++;
		
		pages.index = Math.min(Math.max(0, pages.index), pages.children.length -1);
		//console.log(pages.index);
	}

	createjs.Tween.get(pages).to({x:-pages.index * (canvas.width / stage.scaleX)}, pages.transitionDelay, pages.transitionEase);
	pages.off("pressmove", _root.pressMoveHandler);
	stage.off("stagemouseup", _root.stageMouseUpHandler);
	pages.pressed = false;
}
setTimeout(_root.start,0);

_root.gotoAndStop(0);

[Olivier-R]

AN idea why don't work on mobile device?

[Olivier-R]

OK, I have done some changes. But I got the same issue... 😞
Here the link :  https://clientes.or-design.org/testSwipe/

And here my firstFrame script :

var _root = this;
var pages;

var page0 = new lib.mc_page0();
_root.mc_pages.mc_pageloader0.addChild(page0);

var page1 = new lib.mc_page1();
_root.mc_pages.mc_pageloader1.addChild(page1);

var page2 = new lib.mc_page2();
_root.mc_pages.mc_pageloader2.addChild(page2);


_root.start = function()
{
	createjs.Touch.enable(true);
	stage.mouseMoveOutside = true;
	
	pages = _root.mc_pages;
	pages.dragTolerance = 200;
	pages.index = 0;
	pages.transitionDelay = 350;
	pages.transitionEase = createjs.Ease.quintOut;
	pages.on("mousedown", _root.mouseDownHandler);
}

_root.mouseDownHandler = function(e)
{
	e.currentTarget.pressedX = e.currentTarget.x;
	e.currentTarget.pressed = true;
	e.currentTarget.offsetX = (e.stageX / stage.scaleX) - e.currentTarget.x;
	e.currentTarget.on("pressmove", _root.pressMoveHandler);
	stage.on("stagemouseup", _root.stageMouseUpHandler);
}

_root.pressMoveHandler = function(e)
{
	e.currentTarget.dragDistance = pages.x - e.currentTarget.pressedX;
	e.currentTarget.x = (e.stageX / stage.scaleX) - e.currentTarget.offsetX;
}

_root.stageMouseUpHandler = function(e)
{
	if(pages.pressed && Math.abs(pages.dragDistance) > pages.dragTolerance){
		if (pages.dragDistance > 0 )
			pages.index--;
		else
			pages.index++;
		
		pages.index = Math.min(Math.max(0, pages.index), pages.children.length -1);
		//console.log(pages.index);
	}

	createjs.Tween.get(pages).to({x:-pages.index * (canvas.width / stage.scaleX)}, pages.transitionDelay, pages.transitionEase);
	pages.off("pressmove", _root.pressMoveHandler);
	stage.off("stagemouseup", _root.stageMouseUpHandler);
	pages.pressed = false;
}

setTimeout(_root.start,0);
_root.gotoAndStop(0);

It work fine on desktop, but mobile not... 😞

Thanks for help.

[Olivier-R]

Anyone can help?

[Olivier-R]

There is no solution to this issue?
Adobe, are you alive?

[kglad]

1. no one here is adobe

2. follow directions and use createjs.Touch.enable(stage, false, true); 

p.s. clear your mobile browser cache when testing.

[Olivier-R]

Hello,
1. I know well that there are no Adobe people :), was a joke.

2. But you managed to make it work?
I use well createjs.Touch.enable(true); ... And nothing.

If you saw the error, if you managed to make it work, I want you to tell me how to do it, it would be very nice 🙂

Thank you in advance for your precious help!

[kglad · Accepted solution]

for the third time use createjs.Touch.enable(stage, false, true); 

[Olivier-R]

Hello,
I'm sorry, but I seem to have missed something.

I use this fonction :

_root.start = function()
{
	createjs.Touch.enable(true);

.......

I'm doing somthing wrong?

Thank you for your patience.

[kglad]

yes, you are doing something wrong.  can you see that:

createjs.Touch.enable(true);

is not the same as:

createjs.Touch.enable(stage, false, true);

[Olivier-R]

Thank you for your patience.

[kglad]

you're welcome.

is your swipe on mobile working now?

[Olivier-R]

Yes, many thanks!

[kglad]

good to hear!  (and you're welcome.)