I have taken photos of a car from multiple angles and want to build a "product" rotation interaction.
I have got it working using buttons but think that the swipe gesture would be a more elegant interaction on a touch device.
I have observed users trying to interact with the product on a touch device and they ignore the buttons, instead automatically try swiping.
Q1: How do I enable swipe gestures in Storyline?
Q2: How do I detect whether the product is being viewed on a touch device (and therefore enable swipe and hide the buttons - the latter being useful in desktop viewing)?
This sort of thing might meet your needs. It's a straightforward set of a slides and triggers. There's a new image on each of 3 slides, and there's a couple of large invisible boxes linked to a 'dragged over' trigger that causes the slide to change, giving the impression that the image has changed.
You could check if the learner is using a touch device with a bit of javascript inserted in the story.html file. If their screen is below a certain resolution, you then direct them to another course. If you have one course for PC and another for touch devices, you could insert this at the top of the story.html file in an html editor, like wordpad:
"<script type="text/javascript">
<!--
if (screen.width <= 500) {
window.location = "THE WEB LOCATION OF YOUR TOUCH DEVICE COURSE";
}
//-->
</script>"
The .story is attached. Let us know if this is what you're after.
1 Reply
Hi Alfred,
This sort of thing might meet your needs. It's a straightforward set of a slides and triggers. There's a new image on each of 3 slides, and there's a couple of large invisible boxes linked to a 'dragged over' trigger that causes the slide to change, giving the impression that the image has changed.
Here's the published file: http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/stp180ko4klkoumkbt3fps8hp1e4/story.html
You could check if the learner is using a touch device with a bit of javascript inserted in the story.html file. If their screen is below a certain resolution, you then direct them to another course. If you have one course for PC and another for touch devices, you could insert this at the top of the story.html file in an html editor, like wordpad:
"<script type="text/javascript">
<!--
if (screen.width <= 500) {
window.location = "THE WEB LOCATION OF YOUR TOUCH DEVICE COURSE";
}
//-->
</script>"
The .story is attached. Let us know if this is what you're after.
Cheers,
Rich
This discussion is closed. You can start a new discussion or contact Articulate Support.