• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Animate CC and touch issue on iPhone

New Here ,
Nov 18, 2016 Nov 18, 2016

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

Views

2.6K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Nov 18, 2016 Nov 18, 2016

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.

Votes

Translate

Translate
LEGEND ,
Nov 18, 2016 Nov 18, 2016

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 18, 2016 Nov 18, 2016

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 18, 2016 Nov 18, 2016

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 18, 2016 Nov 18, 2016

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 18, 2016 Nov 18, 2016

Copy link to clipboard

Copied

I tested on iPhone and iPad, and the touch worked in both of them.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 18, 2016 Nov 18, 2016

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 18, 2016 Nov 18, 2016

Copy link to clipboard

Copied

😞

I'm trying different solutions on my iPhone 4 for two days ...

and it does not work!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 18, 2016 Nov 18, 2016

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 19, 2016 Nov 19, 2016

Copy link to clipboard

Copied

I have iOS 7.1.2 (11D257)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 19, 2016 Nov 19, 2016

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Sep 22, 2017 Sep 22, 2017

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines