storyline get user click position

Hi Yotam,

That sounds like some neat interactivity you're creating! I'm not sure if there's a way to track the location of a mouse click, but hopefully someone in the community can offer some tips!

I'm also looking for this feature. We need to display a text box (or highlight) wherever the user clicks, as a kind of annotation interaction like adding a comment in word.

Here's an interesting workaround that takes it somewhat in the right direction, but none of this will work unless Storyline can store the last cursor or click position and make it available as the value of a variable. Storyline - X and Y - Moving Objects Anywhere on Screen in Realtime - YouTube

Any change to storyline in the last few years that would make this easy? I know it's possible to use javascript to grab the cursor position or click position, but would rather not go that route if possible.

Hi, Robert.

Thank you for reaching out!

While not currently a feature in Storyline, we have a feature request logged to add the ability to recognize click position.

I will update this discussion if I have any news to share or if this request makes it to our feature roadmap. 

You can get the x y position of any element in Storyline...so also the Mouse click.

Here is a sample i did for following the mouse position with Javascript.

https://community.articulate.com/discussions/articulate-storyline/pageelement-to-follow-the-mouse-in-storyline

Im quite sure the Storyline has code to make it possible to get the mouseclick position.

Kind regards,

Math

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

At breakfast i quickly checked this last one on my mobile and did notice Touchevents were not registered...so it didnot work on Mobile devices.

Fixed that now.
https://360.articulate.com/review/content/a1280461-dbb1-44ee-b644-14a2cde6f8c3/review

Added a function in the code that checks for Touch or Clickevents and then uses the proper syntax to return the clicked position.

clientX = getOffsetPosition(e,document.querySelector('body')).x;
clientY = getOffsetPosition(e,document.querySelector('body')).y;

function getOffsetPosition(e, parent){
let position = {
x: (e.targetTouches) ? e.targetTouches[0].pageX : e.clientX,
y: (e.targetTouches) ? e.targetTouches[0].pageY : e.clientY
};

while(parent.offsetParent){
position.x -= parent.offsetLeft - parent.scrollLeft;
position.y -= parent.offsetTop - parent.scrollTop;

parent = parent.offsetParent;
}

return position;
}

Now it works nicely on both desktops and mobile devices.

Here is the file...

I've noticed before that SL doesn't update the name of some img/vid files when they get replaced... which is a pain when you want to make sure you have the latest version of a file in your .story. But that's probably what happened - I replaced the image and didn't notice the name was now "wrong".