Slider Interaction and Motion Paths
Oct 04, 2019
Hi, everyone!
So I've been literally "spinning my wheels" trying to make this interaction work! The idea is the car moves down the road (on the curved path) when the slider moves. When it reaches a green dot, a callout will popout. (note: generic text is utilized as my content it under privacy protection).
Slider is set up on a scale from -15 to +15. Each dot represents 5 increments of the slider. I made a separate motion path for each curve of the road (so far I've done 3 movements forward. I learned (based on the resources below) that I need to make separate paths backwards... and somehow make a "chaser" variable that tracks where the slider has been so it knows what paths to travel forward and back but... this is as far as I got in about 3 hrs...
Link to Project in 360 Review:
https://360.articulate.com/review/content/92cc5712-9128-4504-8bfb-d09a65215739/review
Raw File: (see attached)
I've checked the forums... and found these resources helpful...
Trigger motion paths using a slider V2 (Charles Zoffuto)
Slider with motion paths demo video (Charles Zoffuto)
but I can't "grasp" the concept of the "chaser" variable Charles set up... Plus it's a little different... my slider needs to start at the beginning of the path-- not the middle of it... Help!
I was able to make the car start to move forward when the slider is moved right. (each curve is a new motion path). I've set triggers for 3 paths forward so far. You can see the "errors" when the slider is moved back though (currently there are no "back paths set). I thought I'd go ahead and post to see if anyone can give me some "direction" on this so I don't waste hours trying to figure it out on my own. Thank you for your help!
PS in the mean time... I'm turning it into a "clickable" interaction where you click a green "circle icon" and then the car and callout will show by the correct icon (via layer triggers). The car won't move down the path but "pop in" at the right places... and that I can do in about 20 min! (deadlines!) But I'd like to see this challenge through when I have time to work on it.
THANK YOU COMMUNITY! I appreciate your insights! :)
6 Replies
So I don't see a story file so can't see exactly what you are doing but what I would do is just build a slider that has exactly as many stops on it as green dots. Have the motion path go when the slide moves, then have the pop up appear when the animation completes? That removes the lag and jerkiness. If you want it to move backwards you would need different motion paths for those, and you could use a true/false variable to determine whether the slider is moving forwards or backwards at each step. That would be the most tedious part.
Also, I would orient your shape to path for the car so that it looks better but I am sure you knew that.
Did my attachment not attach...?? Boo. Let me try again..
Hi, Randy. Cool Avatar BTW. :)
... the "true/false" variable is intriguing... can you explain how that would work a little better to control movement forward vs backward? I concluded there will need to be separate paths for each curve so it will stop on the dots... do you think that's accurate? I do understand that there needs to be separate paths to go back when the slider is moved left...
I did NOT know to "orient shape to path" to look better. :) Thanks for the tip. I tried that just now and maybe it looks better? --the person driving isn't a very good driver! :) But it's kind of cool how it "slides" around the curves.
To get the callouts to pop up... I did a "show/hide" trigger with the slider. The current state on each callout is "hidden" and then when the slider reaches a specific interval... they show and when they are not in that interval... they hide. The callouts I'm less concerned with... it's creating that "back path" that's the real "fun!" :)
I'll experiment with your suggestion if I get some time and update with a new file when I can. Thank you!!
Here you go Correy. Yeah, the orient shape doesn't work well will a rough corner like this. An S pattern is not the easiest to do. Hopefully this helps.
Hi, Randy!
I spent sometime this weekend studying your thought process in the raw file. I made some notes so I could really understand it vs mindlessly copying your triggers. Then I recreated everything in this 16:9 formatted version (it fits the "road" better" I think).
See attached for the final successful "story" file.
Try it out here: Car/Slider Interaction Review Link
Note: I set some new "HIDE" triggers for each layer so that as soon as you move to the next "icon,", the current layer will "hide" so you can see the car move on the road without a pesky callout in the way.
Thank you for your help, Randy. I learned a lot from troubleshooting this with you. --Couldn't have done it without you and the e-Learning Community. Thanks! :)
PS-- I'll add a copy of my "notes" on this after I type them up. Hopefully my "logic" will help those new to variables and/or sliders better understand.
Nice job Correy! Glad I could help.
This discussion is closed. You can start a new discussion or contact Articulate Support.