Custom HTML5 timeline for Articulate Storyline 360

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.

CONTACT US

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.

Custom-HTML5-timeline-for-Articulate-Storyline-360-Music-Player

Enhanced Code for Seamless Timeline Control in the Latest Articulate Storyline Version

The code has been enhanced to align with the latest version of Storyline. This improvement ensures that users experience an intuitive and consistent timeline control across all interactive Storyline projects.

For more information, please click the link below.
(https://www.swiftelearningservices.com/custom-seekbar-widget-for-articulate-storyline-360/)

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.

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.
    Custom-HTML5-timeline-for-Articulate-Storyline-360-seekbar1
  • 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.

How to add a custom play/pause button?

Step 1

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

Custom-HTML5-timeline-for-Articulate-Storyline-360-Custom-Play-pause

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.
      Custom-HTML5-timeline-for-Articulate-Storyline-360-Variable

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

Custom-HTML5-timeline-for-Articulate-Storyline-360-Trigger1

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

Custom-HTML5-timeline-for-Articulate-Storyline-360-Trigger2

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.

CONTACT US

Custom-HTML5-timeline-for-Articulate-Storyline-360-Trigger_wizard

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.

Frequently Asked Questions (FAQs)

1. What are timelines in Articulate Storyline?

Timelines in Articulate Storyline are visual representations of the duration and sequence of objects on a slide. They enable you to control the timing of various elements on a slide, such as text, images, and animations. Timelines can be customized to create interactive e-learning courses that engage learners and enhance their comprehension of the content.

2. How do you add a timeline to Articulate Storyline?

To add a timeline in Articulate Storyline, go to the slide where you want to add it and click “Insert” in the Storyline ribbon. Select “Timeline” in the “Media” section. Customize it by adding events, adjusting duration, and adding markers. Right-click to add events and markers. Drag the endpoint handles to adjust duration.

3. How to Publish Storyline 360 as HTML5?

How to Publish Storyline 360 as HTML5?
To publish Storyline 360 as HTML5, follow these steps:

  • Click “Publish” in the Storyline 360 ribbon.
  • Select “Web” and then “HTML5” as the output format.
  • Adjust other settings as needed.
  • Click “Publish” and wait for the process to finish.
  • Open the “story.html” file in the output folder to view the HTML5 output.

Your Storyline 360 project is now published as HTML5 output and can be accessed in a web browser.

4. How do I change my timeline in Articulate Storyline?

To change your timeline in Articulate, follow these steps:

  • Open your project and go to the slide with the timeline.
  • Select the timeline and adjust its duration by dragging the endpoint handles.
  • To add or remove events, right-click on the timeline and select “Edit timeline.”
  • Add new events by clicking the “+” button, delete events with the “-” button, and adjust event timing by dragging them along the timeline.
  • Click “Save” to apply changes.

5. What interactive elements can be added to the timeline in Articulate Storyline 360?

While the HTML5 timeline itself won’t support direct interactivity within Articulate Storyline 360, you can use triggers and layers in Storyline to create interactive elements linked to the timeline events. This allows learners to explore additional content related to specific milestones.

6. What limitations or considerations should be taken into account when using custom HTML5 elements in Articulate Storyline 360?

Ensure that your custom HTML5 elements are compatible with Storyline’s output formats. Test your course thoroughly, especially if you plan to publish it for various devices or platforms.

7. How can I further customize the appearance of the timeline within Articulate Storyline 360?

Yes, you can. After embedding the HTML5 timeline, you have the flexibility to further customize its appearance using Storyline’s formatting and styling options. Experiment with colors, fonts, and animations to achieve the desired look.

8. Where can I find resources or tutorials to create a custom HTML5 timeline in Articulate Storyline 360?

You can find tutorials, templates, and community forums on the Articulate E-Learning Heroes website, as well as other e-learning communities. Additionally, various online resources and forums dedicated to HTML5 development can provide guidance on creating custom timelines for Articulate Storyline 360.

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.

Articulate-Storyline 360

The last comment needs to be approved.
11 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
      • Swift Elearning Services
        Swift Elearning Services says:

        Hello Manish Kapoor,

        You can download the source file by filling the opt-in form section “Preview / Download Sample”.

        Reply
    • Rashmi
      Rashmi says:

      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
        Swift Elearning Services says:

        Hello Rashmi,

        Thanks for posting your comment.

        You can download the source file by filling the opt-in form “Preview / Download Sample”.

        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
  3. Rashmi
    Rashmi says:

    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

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply to Swift Elearning Services Cancel reply

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