Custom HTML5 timeline for Articulate Storyline 360
Articulate Storyline is a popular e-Learning authoring tool known for its user-friendly workflow in developing courses. It is suitable for both beginners and experts due to its familiar interface, which is similar to Microsoft PowerPoint. Articulate Storyline uses a component called the “Player” in which the eLearning courses are played. This player contains global controls such as Menu, resources, slide navigation controls, volume control, slide timeline, and more.
| Get in Touch |
| Looking for eLearning solutions? Contact us today to learn more. |
Storyline default player controls are often insufficient for many eLearning developers, who prefer to create a custom Graphical User Interface (GUI) for player controls that are tailored to their clients’ needs. Fortunately, Storyline allows us to fully customize the default player using the “Player Settings” option. However, there is one specific control that Storyline doesn’t allow much customization, which is the course timeline or seekbar.
The seekbar in Articulate Storyline 360 can be customized in terms of color, but it cannot be relocated from its default location. This limitation has led many developers to choose to remove the seekbar functionality altogether to achieve a completely customized appearance for their e-learning courses.
Case Study:
One of our recent projects for a client based in Canada, we made a decision to remove the seekbar from the e-learning course. However, upon delivering the course, the client expressed dissatisfaction with our decision and insisted on having a customized seekbar included in the course that functions similarly to the default seekbar. According to the client feedback, having a seekbar was crucial for learners to navigate the course easily and monitor their progress.
Solution:
To achieve this functionality, we have developed a seekbar widget specifically for Storyline 360 projects. This widget can be placed anywhere on the screen and functions like the default storyline timeline slider/seekbar.
In this blog post, we will explain how to use our seekbar widget in any Articulate Storyline 360 projects. Before we explore the process, let’s take a look at the music player we have built using custom elements.
Click on the Preview button to see it in action.
https://www.swiftelearningservices.com/free-elearning-resources/#fer01
How to use a custom seekbar?
In our music player, each song is represented as a slide, so when you change songs, you are actually navigating to the next or previous slide and our seekbar acts like a timeline for each song.
Now, let’s see how to add the custom seekbar in Articulate Storyline 360 project in two simple steps.
Step 1
The seekbar widget is an 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 certain slides.
- Download the widget from download section located at the end of this blog
(https://www.swiftelearningservices.com/free-elearning-resources/#fer01) - 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 the seekbar widget folder that you have downloaded. This file allows you to change the appearance of the custom seekbar. Here’s how you can do it.
- Open the “settings.json” file using any text editor and you will see the following code inside.
{
“seekbarColor”:”#b8b8b8″,
“seekbarFillColor”:”#080f1a”,
“seekerColorNormal”:”#080f1a”,
“seekerColorHover”:”#080f1a”
} - The code above displays the seekbar as illustrated in the image below.
- You can replace the Hex color codes (e.g., #b8b8b8) with the color codes of your choice to customize this seekbar and make it match your project’s style. For example, we replaced the color codes to customize the seekbar.
{
“seekbarColor”:”grey”,
“seekbarFillColor”:”blueviolet”,
“seekerColorNormal”:”blueviolet”,
“seekerColorHover”:”chocolate”
} - Save the file and add the Seekbar Widget folder as a web object to your project.
- The code above displays the seekbar as illustrated in the image below.
Step 1
Add a button to the slide which has two states, “Normal” and “Play,” as shown below.
Step 2
- Create a new text variable called “PlayState” and set its initial value to “True”.
- Ensure that you create a text variable and assign it the initial value with the exact same name and letter casing as mentioned above.
- Ensure that you create a text variable and assign it the initial value with the exact same name and letter casing as mentioned above.
Step 3
Add the following slide triggers:
Trigger 1
Change the state of “Play/Pause” button to “Normal” state when the variable “PlayState” changes. If the variable “PlayState” is equal to “True”.
Trigger 2
Change the state of “Play/Pause” button to “Play” state when the variable “PlayState” changes. If the variable “PlayState” is equal to “False”.
Step 4
Finally, add a trigger to the Play/Pause button to “Execute JavaScript” when “User clicks” on it.”
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’);
}
| Get in Touch |
| For general inquiries and questions about our elearning services, please feel free to contact us. |
It is important to replace the “app.min.js” file with the updated version after publishing the course, before testing the project.
How to add a custom volume controller?
We have also included a custom volume controller in our music player. For those interested in implementing this feature in their projects, we have published separate blog posts that detail the process for both Storyline 2 and 3, as well as Articulate Storyline 360.
Please feel free to check the blogs below.
Custom Volume Control – Articulate Storyline 3 or Articulate Storyline 360
How to Create Custom Volume Controls in Articulate Storyline 2?
Note:
The above-mentioned custom elements are only supported in HTML5 output and not compatible with the Flash version.
When accessing the published output from your local drive, it is recommended to use Firefox browser to view the project. Google Chrome browser may block access to local files when viewing an HTML page without HTTP protocol.
The above approach is only applicable for modern browsers such as Firefox, Chrome, and Safari. Internet Explorer 11 and older versions are not supported.
If you encounter any issues while using these custom elements, please leave a comment below and we will be happy to assist you.
Articulate Storyline 360 – Free Training Tutorials
Swift ELearning Services provides free tutorials for Articulate Storyline 360. These tutorials cover various topics such as creating animations, interactions, and assessments, among others, to help users understand the software and create high-quality e-learning content.
Please click on the below link to view our Articulate Storyline training videos.
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?
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.
Hi Christy,
Can you shred the source file?
Hello Manish Kapoor,
You can download the source file by filling the opt-in form section “Preview / Download Sample”.
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
Hello Rashmi,
Thanks for posting your comment.
You can download the source file by filling the opt-in form “Preview / Download Sample”.
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?
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
This is now working in updated Storyline 360 version.
Thanks for posting your comment, Krishna.
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.