Forum Discussion
storyline get user click position
Hi, I want the user to click on any location on the screen and keep that location within a variable. In the next slide I want to place an object in this variable (the position the user clicked on)....
Hi Maria,
Thanks for confirming that this is an existing feature request item!
Thanks for confirming that this is an existing feature request item!
As you can see in this quick sample... its easy enough to get the x/y positon of a mouse click. https://360.articulate.com/review/content/aaebbf95-1e39-4b6f-a2a0-8210869cfc6e/review
Actually only that is needed is an eventlistener that captures the click and passes that to a Storyline variable. Like this...
document.querySelector('body').addEventListener('click', updateClick);
function updateClick(e){
player.SetVar("clickedX", e.clientX);
player.SetVar("clickedY", e.clientY);
}
Ofcourse you can use any created element in Storyline for that instead of the body. Only thing you have to be aware of is the way SL works with the player. There is difference in the Classic Player vs the Modern Player...and as the Modern Player scales up or down content depending on viewport size you have to tackle that. Not that hard, but good to be aware of.
Here is my sample added.
Thanks, Math. I’d already looked over JS examples in HTML5, but your example puts it in Storyline context, which is helpful.
I'd still like to see this in native Storyline! JS is a bridge too far for most clients. :-)
Again, much appreciated!
Robert
The client doesnot have to deal with Javascript ;-) The designer/developer has...
Actually all happening in Storyline is controlled by Javascript, GSAP my favourite Javascript Tweening engine is even built into Storyline and used for all animations and transitions you make in Storyline. Agree however with you that it would be good if Articulate opened up Storyline for the better stuff that GSAP and Javascript is capable of.
I have messed around for days with Math's file (thank you so much for sharing!), and I seem to have finally hit upon something that moves a shape to where the mouse is clicked. It seems to also work when resized. My issue is I can't make it work with an image (see "marker"), only a shape. Any idea what I'm missing? Thanks again for this super useful file.
Plus it totally stops working if I rotate the shape.
Great work Marie-Jo.
So trying to fix your file i noticed that the marker image had the acc-name of 'path859.png'. Trying to use that, it failed. Checking in the console and in the media library...the marker image has an acc-name of 'location illustration 1.png'. This utterly surprised me, as in previous Storyline versions imported images kept their original name as acc-name. So maybe this is a change in an Storyline update. Using this acc-name or changing the acc-name in Storyline to a custom one and the movement works. Doing a test importing an image to see what name it gets by default now.
Mmmm.... i imported a png...and the acc-name stays at the original imported name. So somehow you managed to import a png ( copy-paste maybe ? ) and the acc-name got lost in the void.
So thats fixed... now checking the rotation issue.
Added a rotation value input box and a button rotating all the elements... and it works normally.
Adding a button with continuous rotation of the elements now...to check that...
What does surprise me in the latter case however is, that when clicking rotate continuously..they all start and rotate nicely.... but when then you set a value and click 'set Rotation' the marker and arrow keep rotating whereas the Triangle stops at the set value... ah no, thats clear...the overwrite: 'auto' at the Triangle causes that. The others have eases...and thus arenot overwritten.
Changed that now.
Sharing this as is now.
https://360.articulate.com/review/content/a1280461-dbb1-44ee-b644-14a2cde6f8c3/review
