Portfolio Muhammad 'Roel' Islam

[Storyline] Turning a list into a click and reveal activity

Articulate Storyline
UI/UX Design
Web Design

E-learning materials are often sourced from bullet ridden Powerpoints slide.

One way to make it more engaging is to turn the list into a click and reveal, there are many way to do achieve this.

Here I am going to show you how an example on how to change this slide that was originally with bullet points …

into a engaging activity like this:

This slide involves motion paths and off stage objects to make it work

Lets go …

In this example we are making a e-learning module for an expedition company who delivers packages.

Lets turns to bullets into ‘parcels’ using the rounded corner shape from storyline and use the same colour as the boxes

Now we want to arrange all the boxes to the left side of the slide off stage, name the boxes as BT_01, BT_02 and so on for easy identifying.

I added a van, on the right side of slide. The learners have to  click on each box to load them into the van so that they can learn more (see more items of the list)

To make it easy I hide the others boxes by clicking the eye symbol on the time line.

First we going to an entrance animation to the box using a motion Path, name the motion Path BT01_Entrance and make it move to the left

Add a second motion path to BT_01 which leads into the van.

Name it BT01_Load and make it move when the learner clicks on BT01

add another trigger to hide the BT01 when the animation completes because we want to move the van once all the boxes are in


The triggers will look like this:

Next we want the next Box BT02 roll in when BT01 is travelling halfway the belt. To make this happen we have to use off stage shape animation to control when BT02 is moving.

Create box and put it outside the slide and name it Control. Add a down motion path to the box and make the duration 1 second.

By default the motion path will start when the time line starts, change it so it starts when user clicks on BT01.

Since the shape is off stage we won’t see it move in preview.

Now we need to add the same animation to BT02 as we did on BT01 (and entrance and a load motion path).

By default the entrance animation of BT02 will start when the time line starts, we need to change this so that BT02 is moving after ‘Control’ motion path is finished.

The trigger for BT02 motion also need to be changed so that BT02 moves when user click on it (much like BT01).

We also need to replicate the other triggers from BT01 on BT02. The triggers will look something like this:


At this stage we might want save and preview it to see if its working.

Next we need to replicate the triggers and animations to all of the boxes, when you are done your slide will look like this:


And now you have another alternative to the showing bullets points.

Full version can be seen here

Assets used are created in Adobe Illustrator and stock images

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.