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