Adding an HTML menu to Articulate Storyline

Run Demo: This deals with adding a HTML CSS3 Jquery menu to a Articulate Storyline eLearning project (Flash version Storyline 1)

The example has only 5 pages only. (the other 41 pages would also work if you added them)

Click image to run Demo: then right click the custom menu (that’s right it’s an HML page). view the source. It’s a table but could have used ul css menus too.

Version 1.0.2  April 14, 2015

The example has only 5 pages (the other 41 pages would also work if you added them)

How it works:

There are now 5 custom storyline variable to track:
gotoPage : Number
page : Text
resumeStates : Text
totalPages :  Number
webObjectFolder:  Text

Each Page:

On each page there is a Image Trigger:
The page number is controlled by the last character in the page variable.
example: ‘page 1’ or ‘Viewing page number 1’

Just copy and paste the image trigger to your new pages then change ‘Set page to page #’
e.g. ‘Set page to page 5’ The html table will be given an id of 5 automatically
on the fifth row that does not a ‘.header’ class.

You can edit the HTML table rows and css styles to suit your needs.

Slide Master:

The WebObject html NavMenu is a layer (menu) but it can be placed anywhere.
The menu layer also has a image Trigger and it has a ‘jump to XXX’ for each and every page you add.

Yes. I know, this really sucks – Storyline Development staff (INTERNAL PAGE VARIABLE ANYONE?).
So for now just copy and paste it a gazillion times and change Slide and number to match.

Everything is controlled by the  two JavaScripts triggers on ‘timeline starts’ and ‘timeline ends’ on the Master Slide.

JavaScript testing:
When will Storyline staff fix the Web Object not updating when re-publishing !!!!!
In the meantime, I open the user.js (page triggers) and story_content\WebObjects\XXXX\NavMenu.html in notepad++
for fast editing and testing without re-publishing (just refresh the browser page after edits).
If I make changes, then re-publish, notepad++ will tell you the content has changed.
DO NOT RELOAD ! – click ‘No’ add a space to you edited page and save it or your lost your work to an old copy (the one that was inserted as the webObject). EVEN IF YOU ARE EDITING THE ORIGINAL HTML PAGE for the webobject folder you selected.

This broken webObject feature has been mentioned for over 3 years on Storylines Forum. The only way to fix this manual is to delete the webObject and start all over again.

Page reloads: Since storyline reloads the webObject every time you change pages,
the ‘timeline start’ has a delay so the javascript can load.

setTimeout(function (){visited();}, 200);

function visited() {
player = GetPlayer();
var pagenum = player.GetVar(‘page’).slice(-3).replace(/\D/g,”); //good for 999
if (pagenum && ~~Number(pagenum) > 0 ) { getResumeStates(pagenum,’1′); }

Fonts size: The CSS3 vw and vh scales elements to 1/100 units of width or height.

e.g. My body font-size is 13px and #menuTable is 300px wide so .130 x 300 = 4.33 vw

This scales the font smaller when you make the browser window smaller and retains the size if you refreshed or reloaded; to which the window resize function could not.

P.S. In a perfect world.

The HTML navigation would be outside the Flash storyline player.
That is, it would be the parent DIV of the storyline FLASH pageDIV.
You would be able to just build your own CSS3 navigation and seekbar, volume, etc.
and storyline would not over write your index page when publishing.
And you could add simple links like ‘GotoPage 19’.


Storyline 1 files:

About torontographic

looking for work since 2009
This entry was posted in Storyline and tagged , . Bookmark the permalink.

1 Response to Adding an HTML menu to Articulate Storyline

  1. Lloyd says:

    Hi Robbie,
    We have been creating a similar HTML menu. Here is the finished version:
    And here’s a demo:
    It works!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s