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

Download

43 Replies

Muhammad Nurul islam

over 8 years ago09/29/15 at 2:58 pm (UTC)

maybe you don't need a slider, just an animation of a red bar under a hollow thermometer, triggered by the molecule animation

Mary Ann Kowalczyk (Hagemann)

over 8 years ago09/29/15 at 5:31 pm (UTC)

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
Hero

over 8 years ago09/29/15 at 6:29 pm (UTC)

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.

Move_Slider_with_TimerWH.story

Mary Ann Kowalczyk (Hagemann)

over 8 years ago09/29/15 at 7:59 pm (UTC)

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!

Leslie McKerchie
Staff

over 8 years ago09/29/15 at 8:09 pm (UTC)

Glad that Walt was able to assist you here Mary Ann :) Good luck with your project.

Walt Hamilton
Hero

over 8 years ago09/29/15 at 8:13 pm (UTC)

You're right, that sounds like a much better approach. Good luck.

I suggest using a slider for the AC process and the thermometer. You can control them with a 3rd slider, if you set all 3 sliders to use the same variable.

Mary Ann Kowalczyk (Hagemann)

over 8 years ago09/29/15 at 8:21 pm (UTC)

My AC process is a squiggly line, not a straight line though. Can you make a twisty turny slider? I thought it had to be in a straight line.

Walt Hamilton
Hero

over 8 years ago09/29/15 at 8:50 pm (UTC)

I don't think you can, but I'm sure I can't make a slider control a motion path. That's why I suggested a slider. call it a "representation". :)

Kendra Grant

8 years ago03/16/16 at 11:20 am (UTC)

Hi I'm trying to download the slider file but it keeps saying the file might be made in a new version of articulate but I have the latest update. Any suggestions?

Thanks

Ashley Terwilliger-Pollard
Staff

8 years ago03/16/16 at 12:55 pm (UTC)

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

over 7 years ago10/11/16 at 9:07 pm (UTC)

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.