Custom HTML5 timeline for Articulate Storyline 360

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 seekbar widget in any Articulate Storyline 360 project.


Before we dive in to the process, let’s take a look at the music player we have built using custom elements.

Custom HTML5 timeline for Articulate Storyline 3 or 360_Final - Microsoft Word (

How to use Custom Seekbar

In our music player each song is a slide. When you change a song you are actually navigating to next/prev slide.
And our seekbar acts like a timeline to each song.

Custom HTML5 timeline for Articulate Storyline 360-Music Player

Now, let’s see how to add custom seekbar in any Articulate Storyline 360 project in 2 simple steps.

Step 1:

The seekbar widget is a HTML document. So we can insert it as a web object. You can either insert it in the master slide, if you need it for the full course or you can insert it on any slide if you need the seekbar just for some particular slides.

First download the widget from below download section.

Go to insert tab and click on “Web Object”. Then, browse to seekbar widget folder and click ok.

Custom HTML5 timeline for Articulate Storyline 360-Web Object

Step 2:

After publishing the course, in the published output, navigate to the following path:

Storyline output\html5\lib\scripts

Here, you will see a file named “app.min.js”. We need to replace this file with the modified file which you can download from the below download section.

Once done, you can go ahead and test your project.

Bonus Tip:

There is a file named “settings.json” in seekbar widget folder that you have downloaded.

This file allows to change the look of custom seekbar. This is how you can do it.

  1. Open the “settings.json” file with any text editor.
  2. You will see the following code in this file:
    
    {
    "seekbarColor":"#b8b8b8",
    "seekbarFillColor":"#080f1a",
    "seekerColorNormal":"#080f1a",
    "seekerColorHover":"#080f1a"
    }
    

    The above code displays seekbar as shown below:Custom HTML5 timeline for Articulate Storyline 360-seekbar

You can replace the Hex color codes (eg: #b8b8b8) with the colors codes of your choice to make this custom seekbar match your project styles. Then, save file and add Seekbar Widget folder as a web object to your project. Following is an example on how you can edit the above code.

{
"seekbarColor":"grey",
"seekbarFillColor":"blueviolet",
"seekerColorNormal":"blueviolet",
"seekerColorHover":"chocolate"
}

The above code changes the look of seekbar as shown below:

Custom HTML5 timeline for Articulate Storyline 360-seekbar2

How to add a custom play/pause button

Step 1:

Add a button to the slide which has 2 states, “Normal” and “Play” as shown below.

Custom HTML5 timeline for Articulate Storyline 360-Custom Play pause

Step 2:

Create a new text variable named “PlayState” and give it an initial value of “True”.

Please make sure you are creating a text variable and assign it the initial value with the exact same name and letter casing like mentioned above.

Custom HTML5 timeline for Articulate Storyline 360-Variable

Step 3:

Add the following slide triggers:

Trigger 1:

Change state of “Play/Pause” button to “Normal” state when variable “PlayState” changes. If variable “PlayState” is equal to “True”.

Custom HTML5 timeline for Articulate Storyline 360-Trigger

Trigger 2:

Change state of “Play/Pause” button to “Play” state when variable “PlayState” changes. If variable “PlayState” is equal to “False”.

Custom HTML5 timeline for Articulate Storyline 360-Trigger2

Step 4:

Now, lastly add a trigger on Play/Pause button to “Execute JavaScript” when “User clicks” on it.
Then add the following JavaScript Code in the JavaScript window.

if (GetPlayer().GetVar('PlayState') == "True") {
g_PlaybackProgress.props.timeline.pause();
GetPlayer().SetVar('PlayState', 'False');
} else if (GetPlayer().GetVar('PlayState') == "False") {
g_PlaybackProgress.props.timeline.play();
GetPlayer().SetVar('PlayState', 'True');
}

Custom HTML5 timeline for Articulate Storyline 360-Trigger_wizard

And of course, don’t forget to replace the “app.min.js” file after you have published the course before you test the project.

Adding Custom Volume controller:

In our music player we have added a custom volume controller as well. We have dedicated blogs on how to do it for both storyline 2 and storyline 3/360. Feel free to check out these blogs:

Custom Volume Control – Articulate Storyline 3 or Articulate Storyline 360

How to Create Custom Volume Controls in Articulate Storyline 2?

Note:

  • The above custom elements are only for HTML5 output and they are not supported in Flash version.
  • When you access the published output from your local drive. Use Firefox browser to view the project. Google Chrome browser blocks accessing the local files when viewing an HTML page without HTTP protocol.
  • This approach is only for modern browsers like Firefox, Chrome and Safari. Internet Explorer 11 and below are not supported.

You can download or preview our sample music player and the required files for this project from below link.

If you are facing any issues using these custom elements. Please comment down below, we will be more than happy to help you.

4 replies
  1. Christy Tucker
    Christy Tucker says:

    This custom seekbar works great when previewed in Firefox locally, but it’s not working for me when published to a server. It spins endlessly without loading the course. It does work with Chrome when published to a server. https://www.syniadlearning.com/wp-content/uploads/files/org_admin/story_html5.html

    I see in the developer tools in FF that it’s showing this error: “SecurityError: The operation is insecure.” Then it lists many lines in the code as being insecure.

    Any ideas what I can do to make this load correctly in Firefox?

    Reply
    • Swift Elearning Services
      Swift Elearning Services says:

      Hi,

      We have tested the provided link in firefox as well as in chrome. In both the versions it does works.
      If possible share the version of your browser.

      Reply
  2. max
    max says:

    After a lot of research, it seems that I found a real programmer, Thank you for sharing…
    Can I use your project to jump to a specific frame in the timeline using javascript or something?

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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