Slider misalign - (attn Michael Hinze)
Nov 30, 2018
Hi folks. This one is probably more for the attention of the incredible Michael Hinze as it has to do with one of his many helpful slider examples.
I have encountered this issue anytime in the recent past I have made sliders that reveal information that is "offscreen" and eventually abandoned any efforts to fix the issue.
Recently I discovered the beautifully simple SliderMove_MH example that Michael provided illustrating the reveal of a large image of an airplane when the slider is moved left or right. As I demoed it the functionality worked brilliantly and I thought "Wow, eureka! Michael has done it and it is so simple. I'll be using this from now on."
But alas, when I demo it today I can see the misalignment issue occurring.
What seems to happen is that on first go of moving the slider left and right the image displays exactly as intended. But every subsequent left/right slide shifts the image ever further away from the left hand border. Sometimes it works if the slider is moved reeeeeaaaalllyyy slowly. Mostly not though.
I thought that the issue occurs if one changes direction of the slider movement mid-move and therefore the mathematics of the positioning of the image are shifted relative to the images position at that moment, rather than the position it should be at the next slider division point (does any of that make sense?).
But when I changed the motion path lengths to 1 pixel (and multiplied the steps by 10) the slider becomes even more misaligned for some incredible reason.
I updated Storyline last week (stupid, stupid, stupid - I know) and am wondering if this may be a reason why the misalignment issue is happening again. It definitely (almost absolutely, positively, confidently-ish) didn't manifest in this example just a month or so ago.
Any idea how to fix this or why it is happening?
4 Replies
Hm, I have upgraded too and can't go back anymore to compare if the older version had the same issue. I do know that the combination of slider and motionpath takes a lot of fiddling to get the length of each motion path in sync with the step width of the slider. Also, even with the shortest motion path (.1 sec.) you can 'confuse' the pic's left/right motion by moving the slider thumb rapidly back/forth. There is the option to use TWO sliders; one is used to move with the mouse and the other one has a thumb that is filled with the picture you want to move. With that you don't need any triggers or motionpaths, just two sliders that are controlled by the same variable. See attached a revised version and here the is the published example.
Oops, here is the attachment.
Hi Michael. Thank you so much for your response. I never thought the issue might be a 'time' thing but that makes absolute sense now. It's not pixels but time that determines the change response.
Did the original demo you provided above always work as intended or is this misalignment a "known issue" with regards sliders and motion-paths?
I love the solution of the two sliders but when I have tried that in the past I have encountered a glitch whereby the image that is the thumb becomes ever-so-slightly blurred when the mouse is over the 'control' thumb and only becomes 'sharp' when the mouse hovers over the slider image thumb. Weird. Inexplicable. One of my many adventures with Storyline doing odd things.
But I'll try that solution again with the new image and hopefully it works as intended.
I'm not certain whether the older example had this issue, but then again I didn't try to "break it". I had noticed the blurriness issue with slider thumbs in HTML5 too. As far as I remember, this has been fixed a while ago.
This discussion is closed. You can start a new discussion or contact Articulate Support.