Today, I’m going to explain you how to create a few animations for your graphic charts in Storyline 2.

We all know presenting data in an interesting (and non-boring) way can be very hard, especially in e-learning modules. It’s very important to make your e-learning attractive and interesting: you don’t want to loose your learners’ attention after 3 minutes of navigation within the course. You are not going to show a graphic charts with numbers and labels like you would do in a powerpoint presentation. We are in an e-learning course, so you need to add some animation and interactions, even if it is only some basic interactive effects. We need it because we want our learners to learn and remember, and we know we learn and remember better if the form supports the content, and when we are active and not passive.

For presenting data, it’s not always possible to have complex interactions, but you have to do a minimum. That’s what I am going to show you: how to present data like pie chats (and others) nicely, with entrance animations and interactive actions. I’m not going to show complex things, only basics that can be useful to know how to do.

Before going any further, I invite you to read the following:

• My post about my participation to the E-learning Heroes Challenge #64 “How interactive charts and graphs can be used in online training”
• The recap of the challenge with all the participations

Now let’s start with some pie charts.

Pie chart entrance animation

Here is an example of a pie chart entrance animation: click here to view it. Now, let’s see how to create it in Storyline 2.

NB: it does NOT work in HTML5.

• First, you have to create your pie chart in Storyline 2 directly. Forget Excel or copying/pasting a picture or whatever. To create your pie chart in Storyline 2, you will have to create several forms, one per part:

• Then, customize the color, borders and size of your first part:

• Now, add the other parts of your pie. For this, my advice is to copy and paste your first part, to ensure the shape has the same dimensions. Then, ensure the position in the slide of your second and other shapes are exactly the same than the first one.

Position of the first shape.

Position of the second shape. Etc.

• It’s very easy to customize the size of each part: just click the 2 yellow dots at each extremity of the pie part and move them to create each part.

• Then, to create the entrance animation, first set the parts in the proper order in the time line (and don’t forget to adjust your labels too):

• Now, select all the parts of your pie, and select the “Wheel” entrance animation:

• You may have to adjust the duration of the entrance effect, depending on the size of each part, to ensure they all appear in a similar way.

And that’s it for the entrance animation for a pie chart. Of course, it’s only one way to animate the entrance of a pie chart, you may prefer other ways, but this one is my favorite.

“Piling” entrance animation for a pyramid (and other forms)

Here are two examples of a “pilling” entrance animation: click here to view it.

This is a very basic entrance animation. I’m showing it only for the idea itself, not for the complexity of the settings in Storyline.

• Create your forms in Storyline. For the first slide, I used the “Can” form, and for the pyramid in the second slide, I used the “Trapezoid” form.

• Then, adjust each form on the time line.

• Finally, choose the entrance animation: “Float in” (first slide) or “Fly in” (second slide).

Effects on the shapes and layers for more content

Here are two examples of a pie and a pyramid where the learner has to click to reveal more content about the data presented in the slide: click here to view it.

NB: not all the shape effects are compatible with HTML5.

• Hover effects: it’s something really easy to do, just add a ‘Hover’ state to your shapes, and customize this state with the effect of your choice. For pie parts, I recommend the ‘shadow’ effect; don’t forget to choose the proper direction of the shadow for each part, or you may have a wrong effect. For the pyramid, I chose a ‘glow’ effect. but it’s really up to you.

• Effects when you click a part: here, the easiest way, in my opinion, but not the only one, is to copy and paste the clicked part in the layer; indeed, if the learner has to click parts/shapes to reveal more content, the best is to use layers for the specific content. Then, in each layer, customize the effects on the shape. I recommend the ‘shadow’ effect again, but this time inside the shape! It create a nice effect, it feels like you ‘pushed’ the part when you click it. Don’t forget to remove the ‘hover’ state of the copied shape, if you copied it in your layer after adding the hover state.

That’s all for today. I could show and describe more animations, and data presentation, but it would take me hours 🙂 ! My advice: try and experiment! Look at other designers’ work! That’s the best way to have new ideas and to get new tips.

See you next time for some examples of forms like cars, buildings or characters, made with Storyline shapes only!

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!

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