Complex navigation using good mix of states, layers and variables - anyone up for it?

Apr 15, 2015

Hi forum!

I'm working on a project in need of a quite complex navigation.

We are not (i.e. do not want) able to use the Player hence are
forced to use all the other goodies provided in SL. I try to explain
where we'd like to land. The UI is very rough in this early stage of development - images disclosed below:

We have a Progress Bar Level 1(image1) which, when hovered show a layer that adds Level2 (image2) to the Progress Bar. When hovering each of the elements on Progress Bar Level 2 they change their state showing Level3 of the Progress Bar (image3).

Ok, from Level3 one should be able to jump to the corresponding slide and back again by either pressing the HomeButton or clicking anywhere else on Level3.

This far we think we get it ourselves. Now it gets harder ...

Navigation through the  Progress Bar shouldn't be possible if one hasn't visited slides within the course. Visited slides are displayed for the participant by the squares on Level3 turning from white to red indicating that this part of the course has been visited and is "unlocked" for direct access through the Progress Bar (image4)

We (perhaps obvious for the rest of you) want this feature for preventing participants to enter parts of the course to soon.

So here's our questions:

How do we make the squares on Level3 turn red when the corresponding slide they represent have been visited and gone through?

How do we make the Progress Bar displaying which parts of the course that have been visited or gone through i.e. when a surtain slide have been visited this will change the looks of the Progress Bar?

How do we unlock the squares on Level3 when the corresponding slide they represent have been visited?

We have spent quite some time with the fablous work of Nancy Woinoski but we don't seem to be able to interpret her work into our project:

Elegant navigation with progress meter

For us this is a tricky one. For ya'll - maybe kindergarten. Or ...?

Any help would be highly apprechiated! Very highly!


All the best!


5 Replies
Patrik Lögdqvist

Thank you Michael, it did! We have reached the same conclusion up here (in the not so cold north) and that conclusion together with your input was very valuable to us. So again, BIG thanks!

We now have moved on and face another quite annoying error:

When using hover state we find that SL is very "glitchy" in reading content to screen. I the example enclosed you perhaps can see what's happening.

We want the navigation to appear smooth and easy-going, hence the fade-in/out transitions.

I have colored the boxes surrounding images and shapes for better understanding of how and where the hovering is to take place - I hope you get it.

Again - we're very, very grateful for any input to this problem!

A good week-end to you all!

Chris Cole

Hi Patrik -

I wouldn't say that Storyline is acting "glitchy" - it's just that you have so many objects that the hover state continually gets disrupted. When the mouse touches another object, then the mouse is no longer hovering over the original chapter rectangle and the state of your chapter image reverts back to hidden, and then the mouse is again hovering over the chapter rectangle and so on, in a loop, and so it looks glitchy.  

I was able to get close to what I think you are looking for using layers and transparent frames - see attached Storyline file.

  • I used a hotspot on the base layer to show the menu, to provide better coverage of the menu area.
  • I moved the Expanded Chapter images to layers and changed their Initial State to Normal.
  • On each new layer with the expanded chapter PNGs, I added a Frame object behind the expanded chapter PNG. The open area of the frame provides a safe area for the mouse to move around without closing the layer. The width of the frame border needs to be at least 40 px or so to prevent the learner from whipping the mouse across the frame border so quickly that the hover state is never initiated.
  • I added a rectangle to TOCLevel2 that closes the menu if the user rolls up to the top 1/2 of the screen. This gives a little more room for the learner to move around than closing if he rolls off of the menu graphic.
  • I removed the Exit Animations from your objects as they were making objects unexpectedly disappear while the learner is still looking through the menu.

However, if you whip the mouse around very very fast, you can get an object to remain onscreen when it is supposed to be hidden. Otherwise, this solution works fine, but I think you would not want to risk having an object unexpectedly hanging out on the screen.

So.... I think your most fail-proof method would be to use clicks instead of hover. It would be far simpler logic, far more flexible, and you could make it fail-proof. I think you could have a lot of options in how you implement your menu if you use clicks.

Hope this helps.




This discussion is closed. You can start a new discussion or contact Articulate Support.