Custom HTML5 timeline for Articulate Storyline 360
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 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 only 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.
While working for one our client from Canada, they were unhappy with this decision to take off seekbar completely and insisted us to include a customized seekbar for the course which behaves like a default seekbar.
In order to achieve this functionality we have built a seekbar widget just for Storyline 360 which can be placed anywhere on the screen and it works like a default storyline timeline slider / seekbar.
In this blog, we will see how to use our seek bar widget in any Articulate Storyline 360 project.