In this quick tutorial, I am going to show you how to “quickly” create a custom progress bar in Articulate Storyline 360 and using the inbuild slide numbering variables that comes with Articulate 360 (as per 2020, this is not yet available in Articulate Storyline 3).
Preparing the canvas
First step is create a new project with this size.
I am using 16:9 ratio, and a chromeless Modern Player
Creating the Progress Bar
Second Step is create a bar on the top that will be your progress bar. You can use the shapes from storyline.
Make sure you name the shape to Progress Bar!
To make it easy, I will split the bar into 10% progress steps. Which means each steps is 128 pixel (1280/10). You can have the progress 1% but since this an example, it is important that we understand the principle behind this progress bar.
Adding triggers with variables
Next step is to add triggers using the in-build variables that Articulate Storyline 360 have which is called the Menu.Progress variable.
There are a lot of other variables regarding page numbering which you can access from the menu ribbon
Now create the first trigger
We want the progress bar to change to the 10% state when timeline of slide is starting and when Menu.Progress is between 10 and 19.
Repeat for all the states. If you have 100 states then you need to have 100 triggers, with a slightly different condition. Instead of a range of value you can pinpoint the exact percentage.
Testing the Progress Bar
The great thing is Articulate 360 already has the percentage figured out. Now lets try out the progress bar on 10 slides.
Putting the Progress Bar in practice
Now we are certain that the bar is working, we need to recreate the bar and incorporate it in the master slides.
I’ve created a custom theme for the custom progress bar based on the themes ASL 360 Library.
