The motion math is a new features I was really expecting. A few month ago, my manager asked me if it was possible to create a slide presenting a process, with arrows moving in the slide. Unfortunately it was impossible to do it with the first version of Storyline without a flash animation.

Now the motion path functionality makes it possible to create richer slides. In addition with triggers, layers and variables, we can imagine very complex slides with forms or images moving through the slide, user interaction and much more. Here is a basic example of what you can do by using motion path with all the other Storyline features.

This example is really basic and neutral. In an e-learning module, you have to imagine it for a process, an activity, or even an evaluation of the learner’s knowledge. I only want to show you what is possible.

So, let’s start with my example. 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. In my example, the path will be a kind of timeline created with Storyline forms:

A basic timeline created with the “chevron” form and colored.

The form which will move is a basic cursor made with another Storyline form:

“Pentagon” form.

I want the user to click on some “Previous” and “Next” buttons (not from the player) that I will include in the slide:

The two buttons (not from the player)

The timeline (in blue), the moving form (in green) and the two buttons.

This is really easy to do:
1) Put the form at her starting point.
2) Select the form and add the “motion path” animation:
3) Choose the kind of move. In this example, we choose a line.
4) Select “Path option” and select the direction. In this example, we choose right.
5) Select “Path option” again and select “Relative start point”: it will make it possible to make move the form several times, from her current position, and not from the starting point. If you don’t choose it, the from will always come back to its initial position before moving.
6) Add another motion path going left. Don’t forget to select “Relative start point” too. You have to customize all the different motion paths you add to a form.

The two motions paths. The grey on the left is the limit of the slide.

Now, we have to add two triggers: one for the “Previous” button to activate the left motion path, another for the “Right” button to active the right motion path.

One of the two triggers.

Now it’s working!

But it’s not finished… I want the user to get some information on the different part of the blue timeline. So, I create a box for some text or picture (text in this example) on the base layer:

A blue form (only on base layer), and a text form with the text of the first step of my timeline. We will copy/paste the text box only to other layers, and we will change the text inside.

And I create the needed layer, 4 in my example. The first layer is exactly the same that the base layer. It will be useful later, and prevent us from having too much triggers. I create 4 layers: layer 0 (same that base layer), layer 1, layer 2 and layer 3, with various lorem ipsum text.

My 4 layers.

We don’t forget to hide the initial lorem ipsum text of the base layer in each layer, and to be sure the other layers are hidden when a layer is shown.

Now, I need a solution to show the layer when I want. Issue: we can’t use the motion path to do this, there is not way to use the position of the form. If there is one, I didn’t find it. Anyway, it will be easier to create a variable for what we have to do next.

Let’s create a number variable. We will name it “Variable1”, and its initial value is 0, like our base layer/layer 0.

Now, the funny part can start. We will use and reuse this variable for many triggers:

1) First, add a trigger on your “Next button” (not from the player, the one we created in the slide) that change the value of our Variable1 to +1 each time the learner click:

2) We do exactly the same trigger for the “Previous” button, but we subtract 1 instead of adding.

3) Now, we can create triggers to show our layers! This is easy. With the previous triggers we have just created, we know the value of the variable will be 0, and 1, 2, 3 when the user move the form with the button. We just have to create one trigger per layer:

Create the same trigger for each layer with the corresponding value.

4) To avoid users clicking too much on the two buttons, we need to hide the “Previous” button when the green moving form is at the left of the slide (first step of the blue timeline), and hide the “Next” button when it is on the right side (last step of the blue timeline). We will use the variable again in some triggers:

We need those 5 triggers using the Variable1.

It’s almost finished!

The last thing to do is to remove the “Next” button of the player until the learner has reached the end of the blue timeline. This is also a new feature of Storyline 2 and we will use it!

1) First, create a trigger that hide the “Next” button of the player when the timeline starts:

Now you can use the “Previous” and “Next” buttons of the player in the triggers. They are at the end of the list in the “On Object” pick list.

2) Create a last trigger using the Variable1:

That’s it. I hope this post was clear and helpful. If you have any suggestion or ideas to simplify this example, please leave a comment!

Here is a screenshot of the finished slide:

You can download the .story file here: Download

You can view the initial discussion on E-learning Heroes (with less details): Discussion