Copy link to clipboard
Copied
Hi.
I'm making an animated app on Animate CC (Canvas) that should work both on the web (HTML5) and on mobile devices.
A part of this app contains a scroll bar - which is a simple button that when dragged sideways it makes the movie clip that contains it show a different frame.
I made a code that seems to work fine. The only problem is that when I test it (It opens on Chrome and then I choose "Inspect" and I toggle the device toolbar to simulate a mobile device) the button is not dragged. other "press" buttons work fine with touch - just the drag.
I know about the need for "preventDefault" but every code I've seen in forums and tried doesn't work.
Here is the script on the first frame of the movie clip containing the scrollbar:
this.gotoAndStop(0);
this.pbar.gotoAndStop(0);
var drlFrames = this.totalFrames;
var canvasWidth = stage.canvas.width;
var btnMin = canvasWidth / 720 * 40;
var btnMax = canvasWidth / 720 * 680;
this.pbar_btn.x = 40;
var sliderX = btnMin;
this.addEventListener("tick", resize.bind(this));
function resize() {
canvasWidth = stage.canvas.width;
btnMin = canvasWidth / 720 * 40;
btnMax = canvasWidth / 720 * 680;
}
this.pbar_btn.ontouchstart = function(e){ e.preventDefault(); }
this.pbar_btn.addEventListener("pressmove"||"touchmove", sliderDrag.bind(this));
function sliderDrag(evt) {
var sliderX = evt.stageX;
if (sliderX < btnMin) {
sliderX = btnMin;
}
if (sliderX > btnMax) {
sliderX = btnMax;
}
evt.target.x = sliderX * 720 / canvasWidth;
this.gotoAndStop((sliderX - btnMin + 1) * drlFrames / (btnMax - btnMin + 1));
this.pbar.gotoAndStop((sliderX - btnMin + 1) * 99 / (btnMax - btnMin + 1));
}
I also put these lines in the root:
var stage = new createjs.Stage("canvasId");
createjs.Touch.enable(stage);
What am I doing wrong?
The fixes would be done in the HTML file. This meta and style information solves some of the problems:
<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 the script section of the HTML you would have this line:
document.ontouchmove = function(e){ e.preventDefault(); }
Copy link to clipboard
Copied
The fixes would be done in the HTML file. This meta and style information solves some of the problems:
<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 the script section of the HTML you would have this line:
document.ontouchmove = function(e){ e.preventDefault(); }
Copy link to clipboard
Copied
Somebody else in another country is doing the html - what he gets from me is only the OAM file.
Is there no way to fix this from inside the Animate file?
And also - providing that guy does what's necessary on his end - are there any changes I need to do to the code, or will it work as is?
Copy link to clipboard
Copied
OAM is just a zip file. You could rename it and unzip it, edit the HTML that is in the Assets folder, and zip/rename it again.
Animate does have HTML templates, so you may be able to edit one of those, and have it include the lines at publish time. I haven't tried that so I'm not sure of the steps.
Copy link to clipboard
Copied
It works!!! Tnx a lot
Copy link to clipboard
Copied
Sorry to be a nag...
after I did the HTML fixes suggested, the entire element can not be scrolled or swiped on mobile. Is there a way to keep the element scrollable and make just the specific button disable the scrolling (so it will be draggable)?
Copy link to clipboard
Copied
I haven't tried it, but the document.ontouchmove = function(e){ e.preventDefault(); } part is what stops dragging. You could remove that or perhaps add it to your button and not the whole document.
Copy link to clipboard
Copied
could you please write the correct way to write this code line in AS3? (applied to the button "pbar_btn" which is inside a movie clip)
and also - is there a code making the element scrollable again once you stop touching the button?
Copy link to clipboard
Copied
Did you try removing that line?
Copy link to clipboard
Copied
Yes. I removed that line. I also tried some changes like changing "user-scalable" to "yes", and "-webkit-touch-callout:" to "default".
Still stuck with the same problems:
1) the element can't be dragged - just the 'space' around it.
2) when the device orientation change, the stage doesn't scale to the visible window, like before.
Copy link to clipboard
Copied
Fall in the same trap as Eytanrose
Not able to drag elements on iPhone 5s (not tried anroid mobiles)
I think canvas based D&D not working on touch devices.. is it ?
Copy link to clipboard
Copied
Hi!
Actually I'm also fighting with Drag n Drop on touch devices. I successfully managed to adapt an example to work with mobile (Android & iOs) but I want to work it on standard desktop win systems with touchscreen as well. Unfortunately I didn't get it to run even with the above instructions. In one of the cases I switched to a framework (draggabilly) that works very well, but not inside Canvas and Animate.
Is there anyone out there with a solution that works on more devices? Or any experiences mixing canvas with jQuery and draggabilly or other touch js assets?