Forum Discussion
touch screen interface on 360 content.
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
https://www.w3schools.com/jsref/obj_touchevent.asp
Checking for an actual Storyline sample now.
Basically this is the workflow.
Add this in a Slide Trigger that gets executes on timeline start.
/*
As Storyline doesnot support all mouseEvents default we are adding that here
*/
var wrapper = document.querySelector("#wrapper");
//var rotateButton = document.querySelector("[data-acc-text='rotateButton']");
if (wrapper.addEventListener)
{
// IE9, Chrome, Safari, Opera
wrapper.addEventListener("mousedown", MouseDownHandler, false);
wrapper.addEventListener("mouseup", MouseUpHandler, false);
// Firefox
wrapper.addEventListener("DOMMouseDown", MouseDownHandler, false);
wrapper.addEventListener("DOMMouseUp", MouseUpHandler, false);
}
// IE 6/7/8
else
{
wrapper.attachEvent("onmousedown", MouseDownHandler);
wrapper.attachEvent("onmouseup", MouseUpHandler);
}
Now your complete Storyline will act on touch.
Use the handlers to act upon the touches.
function TouchStartHandler(event) {
var touches = event.changedTouches;
}
function TouchEndHandler(event) {
var touches = event.changedTouches;
}
Do check this article to learn more about the results you can get from the touchevents. Remember...touching can be done with multiple fingers, so you get more info then with a mouseclick.
https://jenkov.com/tutorials/responsive-mobile-friendly-web-design/touch-events-in-javascript.html