Custom eLearning: 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.

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. Click on the Preview button.

Technical Support Center

If you need help in developing fully customized elearning courses then get in touch with us.

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 for each song. 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.

Download the widget from download section located at the end of this blog.
Go to Insert tab and click on “Web Object”.
Browse to seekbar widget folder.
Click ok.

Step 2:

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.

Open the “settings.json” file with any text editor.

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:

Click on the image to zoom.

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.
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:

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.

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.

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”.

Click on the image to zoom.

Trigger 2:

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

Click on the image to zoom.

Step 4:

Finally, 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');
}

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

Click on the image to zoom.

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?

Technical Support Center

If you need help in developing fully customized elearning courses then get in touch with us.

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.

Articulate Storyline Tutorials

Get access to these FREE online videos to learn Articulate Storyline..

This approach is only for modern browsers like Firefox, Chrome and Safari. Internet Explorer 11 and below are not supported.

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

CONVERSION OF LEGACY TRAINING MATERIAL TO ELEARNING

Enhance learning effectiveness and deliver learning seamlessly across all mobile platforms and browsers.

CUSTOM ELEARNING CONTENT DEVELOPMENT

Develop custom eLearning solutions based on modern instructional design.

ADOBE FLASH COURSES TO HTML5 CONVERSION

Convert your Flash based legacy e-learning courses to HTML5 responsive courses.

DOWNLOAD SAMPLE

11 replies

Christy Tucker says:
July 26, 2018 at 9:22 PM

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 says:
  July 31, 2018 at 5:37 PM
  
  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
- Manish Kapoor says:
  August 4, 2020 at 2:59 PM
  
  Hi Christy,
  
  Can you shred the source file?
  Reply
  - Swift Elearning Services says:
    September 2, 2020 at 5:41 PM
    
    Hello Manish Kapoor,
    
    You can download the source file by filling the opt-in form section “Preview / Download Sample”.
    Reply
- Rashmi says:
  September 1, 2020 at 6:53 PM
  
  Hi Christy
  Can you plz share a storyfile and output file. I am looking for the same and I am getting stuck in between. It would be great help if you can share me the files
  Reply
  - Swift Elearning Services says:
    September 2, 2020 at 5:42 PM
    
    Hello Rashmi,
    
    Thanks for posting your comment.
    
    You can download the source file by filling the opt-in form “Preview / Download Sample”.
    Reply
max says:
November 2, 2018 at 8:57 PM

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
- Swift Elearning Services says:
  November 6, 2018 at 2:38 PM
  
  Dear Max,
  
  Thanks for posting your comment.
  
  Can you describe more and give an example about to know your requirement.
  
  You can reach us at: [email protected].
  
  Have a great day ahead.
  
  Thanks
  Reply
Krishna says:
June 15, 2019 at 3:43 PM

This is now working in updated Storyline 360 version.
Reply
- Swift Elearning Services says:
  September 2, 2020 at 5:39 PM
  
  Thanks for posting your comment, Krishna.
  Reply
Rashmi says:
September 1, 2020 at 2:40 PM

Hi team, I was trying to create custom seekbar, however I am getting stuck after this step: In the published output, navigate to the following path: Storyline output\html5\lib\scripts…. because when I navigate to this path , under scripts I dont find ‘app.min.js’. However I find this from the download section mentioned and when I am trying to paste this in the script nothing works. Could you plz help me with this.
Reply