Copy link to clipboard
Copied
Hello to all,
I am creating an animation with Animate CC.
I set an event handler with the following syntax:
this.myButton.addEventListener ("mousedown", function () {
alert ("touched");
});
It works correctly, on deskyop, with:
- Chrome;
- FireFox;
- Safari;
- Microsoft IE
It works correctly also, on Android, with:
- Chrome Mobile;
But I can not make it work on an iPhone.
I also tried to insert the following code, and it does not change anything:
if (createjs.Touch.isSupported ()) {
createjs.Touch.enable (internships);
}
However, if I create a simple canvas without going through Animate CC, also the "TouchStart" event works on iPhone ...
It's like if EaselJS interfere with touch events on iOS.
Can someone help me?
Thank you
John
You have to add some things to the HTML head tag. Here are some example lines:
<meta name="viewport" content="user-scalable=no">
<style type="text/css">
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
And in a script tag add this:
document.ontouchmove = function(e){ e.preventDefault(); }
Those should help.
Copy link to clipboard
Copied
You have to add some things to the HTML head tag. Here are some example lines:
<meta name="viewport" content="user-scalable=no">
<style type="text/css">
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
And in a script tag add this:
document.ontouchmove = function(e){ e.preventDefault(); }
Those should help.
Copy link to clipboard
Copied
Hello and thanks for answering.
I have an iPhone 4.
I just tried to add the code that you suggested but nothing has changed.
Except that no longer works scroll and zoon (even on android) ...
Any other suggestions?
By the way, is required the following code?
document.ontouchmove = function (e) {e.preventDefault (); }
Thanks again
Copy link to clipboard
Copied
Normally when doing Canvas on mobile you want the user to not be able to scroll, at least if your application requires dragging, and you don't want drags to cause the page to highlight. That's what those lines are for. The ontouchmove line is the one to stop the window from scrolling while you drag on the canvas.
It seems unusual that you're mouse enabling something called internships. That normally would be 'stage'.
Is your non-working page online somewhere?
Copy link to clipboard
Copied
Instead, in my case, the canvas are used only to contain the animation and should remain at the top of the page.
Under the canvas I enter some text and other images.
Then the page should be smooth.
Here is a test link:
http://www.parrocchiavilladagri.it/2016/Includes/canvas/Italia.html
To test use the blue square in the lower left (instance: aaaaa)
Thank you
Copy link to clipboard
Copied
I tested on iPhone and iPad, and the touch worked in both of them.
Copy link to clipboard
Copied
Something else I noticed, your page animates slowly. If you are using a tween to bring the map downwards you should use a Classic tween, and also don't do any custom easing. In properties change the ease value to a number, don't go into the graph to make it different.
Copy link to clipboard
Copied
😞
I'm trying different solutions on my iPhone 4 for two days ...
and it does not work!
Copy link to clipboard
Copied
Which iOS version is on your iPhone 4? It's possible Apple fixed some things, and most people will not see any problems.
Copy link to clipboard
Copied
I have iOS 7.1.2 (11D257)
Copy link to clipboard
Copied
I don't have a way to test on iOS 7. I think it's less than 2% of iOS devices that are still on iOS 7, so not many people will see the problem.
Copy link to clipboard
Copied
I'm having a similar issue currently. I've created an HTML5 canvas project with some interaction in it. I'm actually exporting the project as an .oam file and using it in Adobe Captivate. When published via Captivate, the interaction works perfectly on Desktop and the "click" mouse interactions work fine on mobile (in this case an iPhone 6s Plus), however the 'dragging' interaction or the interactions with "mousedown" or "pressmove" methods don't work on mobile.
I tried adding
createjs.Touch.enable(stage);
to the first frame of the project (with the rest of my code), but that just made one of my movieclips rearrange itself and resize itself (very strange)?
I'm not very familiar with coding - where would I add:
<meta name="viewport" content="user-scalable=no">
<style type="text/css">
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
And in a script tag add this:
document.ontouchmove = function(e){ e.preventDefault(); }
In my animate project? in the actions panel with the rest of my code? or does it go somewhere else?
Any help is much appreciated!
Thanks.