Example of motion path with variables, layers, and hidden "next" button

Nov 06, 2014

Hello Storyline community!

I am just discovering the new version of Storyline, and I'd like to share with you a slide I created yesterday to try one new functionality of Storyline 2, the motion path. My idea was to use the motion path to make the learner move a form on a path, a process, a picture... and reach out more about each step. I also want him to reach the end of the path to be able to continue.

For this, I need:
- a path: it can be a picture, a process... for this example, I used a kind of timeline created with arrow forms in Storyline, but it can be what you want...
- a form to move: for this example, I used a kind of cursor created with a form in Storyline, but it can be what you want: a character, an arrow, a hand...
- buttons the user will click to make the form move: for this example, I used two buttons with "previous" and "next" but it can be what you want...
- use the motion path on the form: for this example, I used two motion paths, with a relative start point, moving left or right. But we can imagine more...
- layers, to change the information to provide on each step: for this example, I only used some lorem ipsum text, but it can be a picture, a video... it's up to you!
- a variable (very important), that we will use for different things:
1) To decide which layer to show: this is a number variable that starts at 0. When the user click "previous" or "next", a trigger changes the value of the variable by adding or removing 1. Then, other triggers control the layer to show: if value=1, so show layer 1, etc.
2) We also use the variable to show/hide the two buttons that control the move of the form, to avoid the user moving too much the form, out of our path.
3) To finish, we use the variable to control the "Next" button of the player, with a trigger which only shows the "Next" button of the player when the learner reach the end of the path (value = 3, for this example), by clicking the buttons which add 1 to the variable. For this, we also need to add a trigger that hides the "Next" button when the time starts.

We could also have used the sliders tool for this kind of activity, but the motion path is also very interesting, and I wanted to try it, see what is possible to do with it, what kind of activity we can imagine...

I attach the file to let you see all the triggers. If you have some suggestion to simplify or improve this slide, please let me know!

5 Replies
Mike Enders

Hi Elodie,

And a big thanks for sharing your design with everyone!  It's always great to break down a project and get inspiration for the future!   In looking at your file, I love how you've really tried to apply the various Storyline 2 elements into this project!   In regards to your #2 (using the variable to control the buttons) I found that I was still able to goof up the the design a bit by randomly clicking the prev next buttons and then clicking on the arrow itself (which sent it back to the beginning).  I was able to get the arrow to move off the screen to the left...

I think the slider would certainly simplify the design for you and allow you control the movement of the arrow.  In fact, you can still control the movement of the slider with the prev next buttons by adjusting the slider variable.  This would allow you to really control the location of the arrow.

I hope this helps a bit....and again, thank you so much for sharing this file.  It gives me some other ideas on how to use the SL2 features!



Elodie Chalmette

Thank you for all your answers!

Allison you're right, I think the words 'previous' and 'next' were not the best choice for the example, because it can be confusing with the player's button. In a real project I would not do like this, or I would un-check the player's button!

Mike thank you for the remark on point 2, I'll have a look on this. And yes the sliders are more helpful for this kind of activity, but it's always good to explore all the possibility of the tool to compare their advantages! We can imagine this activity with another kind of motion path, not only left/right lines.

Thanks again!

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