801.796.BROS (2767)

Did you know there is no player setting to lock down the seek bar in Articulate Storyline? This creates somewhat of a problem for those of us who must create eLearning in which “training time” requirements are mandatory to offer certain certificates. Unfortunately, Storyline leaves us with one option for restricting the users ability to quickly skip though sections—just hide it!

Although, this sounds like a perfectly acceptable solution at first. Here’s the catch, additional and important features are grouped within the seek bar: (1) the pause/play button (2) the replay button.

Articulate Storyline

Here’s how to implement this crucial Articulate Storyline tip:

  • Step Two – After publishing the course you must put two files from the ‘ReplaceAfterPublish.zip’ (above) into your published folder’s story_content folder (shown below).


  • Step Three – You will get a message asking you what you would like to do with ‘story.js’. Choose “Replace”.


Update: For now in the player settings under the other category you must select “Lock player at optimal size” in order for this to work.  Here is a screen shot!
This solution only works correctly for the flash output in storyline. This solution is also tailored for a storyline design size of 720 wide x 540 height. Instructions on how to customize this below. If you really want to impress your eLearning friends read Disabling Navigation in Articulate Storyline. Combining together the ideas in this post and the disabling navigation tip are extremely valuable. When both these tip are used they are all you need to meet the majority of training time requirements in Storyline.

Screen Shot 2013-12-02 at 2.33.53 PM 

How to Modify the Seekbar to Fit a Custom Articulate Storyline Design Size

In order for me to explain how to fix this it will be helpful to explain how it actually works. Basically we are tapping into the javascript(story.js) which creates the html container for the flash output. We are adding a line of code which adds an HTML object on top of the area where the player is located. 
We have to modify the size of the container to match the size of the seekbar. The first step is to make the container visible so when we make modifications we can see what we are doing. First, change ‘transparent.png’ from being a transparent png to a colored one. For the example I have changed it to red.
The next step is doing some trial and error inside the story.js. On line 92 there are 3 numbers (seen in the picture below) which need to be modified. The goal is to get the shape to look similar to the picture above. 


The HTML container remains the same size even when certain player settings change therefore we must ensure that the player settings don’t change  (I.E. If the HTML container is optimized for a next and back button then the next and back button should always be on screen otherwise a portion of the seekbar will be uncovered. Image below shows an example of this limitation.)


Pin It on Pinterest