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

Ashley Terwilliger-Pollard
Staff

almost 9 years ago06/29/15 at 9:14 pm (UTC)

Thanks Charles for sharing here - I know folks are always looking for ideas and examples when it comes to these two new features in Storyline.

Saymara R.

almost 9 years ago07/06/15 at 5:52 pm (UTC)

Thank you very much for this information. That was exactly what I was looking for!

Ashley Terwilliger-Pollard
Staff

almost 9 years ago07/06/15 at 6:28 pm (UTC)

Glad this helped you out SR!

John Moore

almost 9 years ago07/08/15 at 9:42 pm (UTC)

Sweet.

Kelly Meeker
Staff

almost 9 years ago07/08/15 at 9:46 pm (UTC)

Hi Charles! Thanks again for sharing this neat interaction. I just added it to our examples hub to make sure others would will see it!

https://community.articulate.com/e-learning-examples/storyline-2-combining-sliders-motion-paths-and-triggers

Muhammad Nurul islam

almost 9 years ago07/14/15 at 11:21 am (UTC)

I used variables to control the movement, and bit of measuring so it doesn't go overboard, still with a relative starting point

http://examples.roelworks.com/elearning/panoramic_slider/story.html

Ashley Terwilliger-Pollard
Staff

almost 9 years ago07/14/15 at 1:36 pm (UTC)

Thanks Muhammad!

Tim Clark

almost 9 years ago07/14/15 at 3:07 pm (UTC)

This is pretty good!

I've had trouble making something similar! the download link isn't working but I'll keep checking back.

Ashley Terwilliger-Pollard
Staff

almost 9 years ago07/14/15 at 3:12 pm (UTC)

Hi Tim,

Which download link are you having difficulty with? The original one that Charles posted? It downloads for me, so I've reattached the .story file here for you.

SliderMotionPathV2.story

almost 9 years ago07/17/15 at 10:38 am (UTC)

That's the one!

Thanks Ashley

Ashley Terwilliger-Pollard
Staff

almost 9 years ago07/17/15 at 1:31 pm (UTC)

Awesome - glad I was able to help. :)

almost 9 years ago08/03/15 at 1:58 pm (UTC)

Hi Muhammad any chance of sharing your file this is exactly what I need

thanks

Ashley Terwilliger-Pollard
Staff

almost 9 years ago08/03/15 at 3:36 pm (UTC)

Linda,

Just in case Muhammad isn't subscribed you could also message him using the "contact me" feature on his profile to reach out directly. Hope that helps!

Linda Brown

over 8 years ago08/04/15 at 8:25 am (UTC)

Thanks Ashley will do

Ashley Terwilliger-Pollard
Staff

over 8 years ago08/04/15 at 12:45 pm (UTC)

No problem Linda.

Muhammad Nurul islam

over 8 years ago08/10/15 at 8:05 am (UTC)

Hi, Sorry for the late reply, was off the whole week, here is the panoramic slider

panoramic_slider_big.story

Linda Brown

over 8 years ago08/10/15 at 10:50 am (UTC)

Hi Muhammad you are a star thank you so much

Linda

Ashley Terwilliger-Pollard
Staff

over 8 years ago08/10/15 at 1:34 pm (UTC)

Thanks Muhammad for coming back around to share this!

over 8 years ago08/10/15 at 1:47 pm (UTC)

no problem, glad a newbie can help

Mary Ann Kowalczyk (Hagemann)

over 8 years ago09/28/15 at 10:56 pm (UTC)

I have an animated diagram of refrigerant traveling through the various Air Conditioning components. This was created about 10 years ago and I need to recreate it. As the refrigerant molecule travels through the components, the temperature gauge/thermometer goes up and down depending where the molecule is. I created a freeform motion path that travels in and out of the different components. That is working. I click a button and the molecule travels through all the components. But I am trying to incorporate a slider into this that would be the temperature/thermometer, so as the molecule travels through the components, I could set it to move the thermometer up and down, or vice versa. Is there a way to do this? Hopefully you can visualize what I am talking about. Anyone have any suggestions?

Walt Hamilton
Hero

over 8 years ago09/28/15 at 11:40 pm (UTC)

If the refrigerant only travels through once (I have trouble imagining how the thermometer would work if it traveled the loop continuously), set a timer, and let the timer change the thermometer.

Muhammad Nurul islam

over 8 years ago09/29/15 at 8:10 am (UTC)

does the thermometer move automatically or based on certain molecule movements?

Charles Zoffuto
Author

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

The first test you will need to do is to determine if you can adjust the slider by changing a variable via a trigger (set to move at the start of the corresponding molecule animation). Second you will need to determine what happens with the learner moves the slider (thermometer). Does it cause the molecule to run along a particular motion path? If so then it should be a pretty straight forward trigger set to a certain value.

Ashley Terwilliger-Pollard
Staff

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

Looks like you're getting some great help here Mary Ann - and if you're able to share the .story file hopefully other folks could take a look at that and offer more thoughts.