Custom HTML5 timeline for Articulate Storyline 360

Custom HTML5 timeline for Articulate Storyline 360

  • How to use Custom Seekbar
  • How to add a custom play/pause button
  • Adding Custom Volume controller

Articulate Storyline, is one of the popular e-Learning authoring tools. Storyline is known for its ease in the workflow for developing an E-learning course. It is suitable for both beginners as well as experts due to its familiar interface. The look is very similar to Microsoft PowerPoint. Articulate Storyline uses a component called “Player” inside which our eLearning courses will be played. This player contains some global controls for our course like, Menu, resources, slide navigation controls, volume control, slide timeline etc.

Though storyline adds all these controls to our course player by default, many eLearning developers prefer custom GUI to build their custom player controls that are client specific. And storyline allows us to fully customize the default player using the “Player Settings” option. But, there is one specific control that storyline doesn’t allow us to customize much. That is, course timeline or seekbar.

We can change the colors of the seekbar but it cannot be moved from its default position. Due to this many developers end up removing the seekbar functionality all together to achieve a fully customized look.