Articulate Storyline

Jan 18, 2022


I hope you are having a wonderful day. I am writing because I am unsure on how to add a progression bar to my one slide in storyline. I want the progression bar to move to percents each time someone clicks the box; again, this will be all on one page vs. multiple pages. This is more of like an interactive infographic. Any advice? I am stuck on this. 

Thank you for your time. 


4 Replies
Judy Nollet

One option:

  • Add a slider, which will automatically create a number variable.
  • Adjust the slider to have the number of "steps" possible on the slide. 
  • Cover the slider with an object that is >95% transparent. This is needed to prevent users from moving the slider.
  • Use triggers to adjust the variable # (which will automatically move the slider) when the user clicks the boxes.

For example, if there are 4 boxes, have a 4-step slider that starts at 0. Each box would include a trigger to add 1 to the slider variable.

Note: You need to use other variables and conditions to prevent adding to the slider variable if a user re-clicks the same box. 

  • Create a T/F variable for each box, with the default value of False.
  • For each trigger that adjusts the slider variable, include a condition so the trigger will only run when the associated T/F variable = False.
  • For each box, add a trigger that changes the associated T/F variable to True. (Be sure to put this after the trigger that adjusts the slider variable.)

For more info on conditions and triggers, see these articles in the User Guide:

Another option would be to create your own progression bar. Give it different states to represent progress. Then use triggers to change the state based on how many boxes have been clicked. Again, you'll need to use variables and conditions to control how and when the state change occurs. 

Judy Nollet

Both methods can make the "bar" move when a user clicks a box.

For the slider, the "move" just jumps from the current position to the new position. 

If you change states, you could design it so an object representing the extension of the bar wipes on, which would make it look more like a seekbar. This can be done if you paste the bar into the state as a separate object. (You can add animations to extra objects that are pasted into a state of another object.) Personally, I don't think that minor animation would be worth the effort.