Forum Discussion
Drag Along a Motion Path
Is it possible to drag an object along a designated motion path? This could be used to drag a car image straight along a road to the finish line, w/o it leaving the road. It could drag a golf ball along a parabola path on it's way to the green. It could drag a red line in a thermometer graphic to a guessed temperature. I can think of many applications for this. I once made an interaction in Flash where the user needed to make a guess of a percentage. They would drag their "guess", basically a big dot, and drop it somewhere up a straight line representing 0%-100%. Once dropped the true answer appeared and they saw how close they were to the correct answer. It required the ability to drag and drop along a straight line w/o deviating from that line. A "bounding box" would work, if it could be 1 pixel wide. I can see the potential in Storyline of combining drag and drop with a motion path, but so far haven't been able to get it to work. Is this possible? And if not, could it be a consideration for a future version?
What about using a slider with a picture for the thumb and for the road? Rudimentary example attached. :D
Nice! Thank you Elizabeth! I know about sliders, but didn't know they could be image customizable. I looked to see if it was, but apparently not deep enough. It's not a perfect solution as it is a bit choppy, but I should be able to work with it. Thanks!
-Ryan
It depends upon how much effort you want to invest in this. Using GSAP (part of Storyline) and the MotionPath plugin, you can extract the X/Y coordinates of any point along an SVG path. For example, if you had a parabola, you could advance a slider from 0 to 1 and traverse the entire length of the path. Probably easiest is to is to use GSAP to move your object along the path. See this post for an example of how to do that.
You would need to make sure you compensate for window resizing when using GSAP (i.e., you need to know where you item should be at any given time, so if things resize you can put it back in the right place.
Thanks Nathanial! Elizabeth's reply was closer to what I was looking for, but if the choppyness bugs me too much, I'll dive more into your response.
-Ryan
Ryan - if the slider is choppy, that just means you need to add more steps. Instead of having the step be 1 in the Slider Design tab, set it to something like 0.1. The car will move smoothly!
Thanks! Yeah, I discovered those settings, and changing it from the default of 10 steps to 1000 has the same result. Very smooth. :)
