Storyline 2 new features: another example of motion path use

I tried another activity using the motion path animation. Again, this example is very basic. The graphic aspect is not important, I chose basic pictures… I just wanted to try the functionalities. This activity is simple: I want the learner to click the good ingredients for a recipe, with motion path animation. When all the good ingredients are clicked, the learner can continue.

1) We add some pictures to represent the ingredients, and a picture to represent a bowl where the ingredients will move in. The best is to use PNG (transparent) pictures, but for this example I just used basic pictures found on the Internet. Some ingredients are correct, incorrect, or optional.

2) We add the motion path animation to each good ingredient:


3) We add the correct triggers for each picture: we want the picture to move when the learner click on it:


Note that Storyline 2 shows you the motion path on the object itself  when you have to choose the paths in the third line of the trigger settings. So it is very easy.

4) We will now add another trigger to all the correct pictures: we want them to disappear when they reach the bowl. We will use one of the new features of Storyline 2: the “when animation complete” in the triggers.


5) We need to create 4 layers now for this activity:
– One for the correct pictures
– One for the optional correct pictures
– One for the wrong pictures
– A final one to show when the animation is completed (named “Activity completed” in the example)

We will show a text to indicate the right/wrong information to the user:


The “correct” layer.


The final layer. We don’t forget to hide all the ingredients pictures from the basic layer, because the learners could hide this layer accidentally by clicking an ingredient, and not be able to continue after the activity. The “continue” button makes it possible to jump to the next slide, because we have hidden the “Next” button of the player.


It is how the hide the objects on base layer.

We add a trigger to close automatically the 3 first layers when the timeline ends, and we set the timeline to 4 sec.


We add this trigger to the 3 layers for right/wrong information (not for the final one!).

5) We add the triggers on each picture to show the linked layer:


6) To finish, we add a trigger to show the final layer when all the correct pictures are hidden; we can use the “Hidden” state because all the clicked good pictures have a trigger that hide them when the motion path animation is completed (View point 4).


And that’s it! Now we have a nice activity with motion path animations to make the slide more interactive. Of course, this will be better with PNG (transparent) pictures, or with forms. I just used basic pictures I found on the Internet, this is only a test: we can imagine many activities!

You can download the .story file here: Download

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

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s