Triggering Motion Paths Using a Slider V2

Jun 28, 2015

This is a follow up to my How to pan the screen left and right using a slider and motion paths post. The problem is, that if you are using motion paths with relative start points, they can be thrown off kilter if someone moves the slider back and forth really fast for a while. As a result I redeveloped this concept using not just a left and a right motion path with relative starting positions, but a motion path for each movement.

diagram one

As you can see for a slider with five stops, you will need eight motion paths. The number with out the parentheses are if you want to move an object on the screen (ie move the box) and the number in the parentheses are for changing the view (ie  panning the image). Just like in my first attempt, you will still need a chaser variable.

The reason this works is that each motion path is absolute and doesn't rely on the objects last position. It is a little more work which is why I didn't completely replicate the original example.

Also I found it much easier to create a small box, do all of my motion path work, then fill the box with the image I wanted to use. 

View Demo



43 Replies
Mary Ann Kowalczyk (Hagemann)

Thank you everyone. Walt, I like your file.  After watching it, it made me think.  I think the way I would describe what I need is to have a button "Start process" that would cause the molecule (or square in your example) to move through the freeform motion path automatically, but also depending on where the molecule is in the process, the slider would update.  So at 3 seconds I might be at 40 degrees, and at 7 seconds I might be at 100 degrees, but then at 12 seconds I might be at 30 degrees.  It would only play one time, but if I wanted it to play multiple times I would have to press the button to do so.  

Walt Hamilton

Mary Ann,

Sorry. The number on the screen is the number of seconds. I put it there so I could tell what the time is when the molecule enters the different components, and I forgot to take it off.

I also forgot to put numbers on the slider. Look at the new version, and feel free to use the idea, or the story, and change it however you need.

Mary Ann Kowalczyk (Hagemann)

Thank you Walt, your file helped me a lot.  After talking with my coworker just now, what we are planning to create is this:

- First, a slider at the bottom of the screen with about 20 or 25 tick marks (but it will not show all 25, it will just look like you can drag it).  
- The slider would control two things: the thermometer and the A/C process flow.  
- I will have the user drag the slider, and while that happens, I will update the thermometer temperature and update the process flow... so I'll be updating both of those things as the user goes from "start to finish" on the slider.  

So it is a little easier than I thought, and we actually don't want to do an animation that just plays with the press of a button anymore. We want the user to drag something to make it happen...  hopefully I can make this work!


Ashley Terwilliger-Pollard

Hi Kendra,

Are you using Storyline 2 Update 7? All of these would have been created with Storyline 2 as that is when motion paths were added, so you wouldn't be able to access them with Storyline 1. You'll also want to make sure you're downloading to a local drive and attempting to open from there. If there is a particular file that is causing you difficulty can you let me know which one and I can also attempt downloading and opening it up and if it works for me, perhaps reattaching it here will assist you. 

Pam Robinson

Thanks, Charles. This is and you are so awesome!  Just what I needed for my latest project. I was frustrated because my graphic was creeping downward with each pass of the slider but these individual motion paths and the corresponding chasers corrected it perfectly. I love this Articulate community. There's not another one like it.

This discussion is closed. You can start a new discussion or contact Articulate Support.