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!
Elodie Chalmette 