Need Help with Navigational System

Sep 08, 2016

Greetings to all,

I'm new to using SL2, though I'm enjoying learning, I can' seem to work around the following issue. After a week of trying, I'd thought I post the issue here.


Here is what I'm trying to achieve;

[The Next/Prev btns, bottom right, will appear after 6 secs]

  1. User must complete each part, one at a time. After each part, user is taken back to main menu to select next part
  2. Once user completes parts One thru Five, Key Points is active
  3. When timeline ends for Key Points, Quiz is active.
  4. User will be able to navigate back through Parts One thru Five, at any time, when One thru Five has been viewed.
  5. Quiz is only visible after completing all parts AND Key Points. Completion is only activated when timeline or media ends.

The navigation, I'm trying to achieve;

  • Normal state = "unlocked" icon
  • Disable state = "locked" icon
  • Visited state = "checked" icon
  • Page/layer view icon = "unlocked"

On the main menu all btns, except Part One, should be disabled.

When on a layer, btns should be in the "Normal/unlocked" icon state, but not clickable as the navigational arrows are on the layer.

When user is directed back to main menu, because he has completed each layer, the visited btns should be in its proper state the "checked" icon.

 Sorry about the navigation colors/system, they are still in dev stage.

Also, my users are "grown men" do you think the btn icons are too childish? :-)

I know time is precious and I appreciate any amount of time offered towards the betterment of my project ;-)

6 Replies
Crystal Horn

Hey there MaNaCHa!  Thanks for popping in.  :)

I'm not sure if this is what you're after, but I've attached your project with some modifications.  Essentially, I set triggers on the base layer to change the states of each button shape to their proper format (normal, visited, etc).  I used format painter to apply the states (based on the format of Part 1's button) to each of the button shapes... some colors were off, so you might need to adjust those.  And I set the buttons (except for part 1) to "disabled" as the initial state.

Here's the important part:  those triggers to change the states of the button shapes have to come before the trigger to show the respective layer, otherwise it will jump to the layer without ever firing the state change.

On the layers, your buttons will continue to show but not be clickable because I've placed a rectangle over the top of them with a solid fill set at 100% transparency.  Invisible barrier.  ;)  I simply copied and pasted that shape to each layer once I had it formatted.

It seems to work ok for Parts 1, 2 and 3.  Let us know what you think, or if it at least gets you closer!


Also Crystal, I see the reason for the invisible (light colored) rectangle barrier ...I know, I know light color and invisible = oxymoron. However, that leaves the first btn "Part One" in the green hover state and all other btns showing the 'invisible' state when visited.

Do you think the invisible rectangle is necessary because the truck icon and the solid-colored rectangle/background are two objects and not a picture?

I will test this theory :-)

Crystal Horn

I used the "transparent" rectangle to block users from clicking on any of those tabs at the top since they show through from the base layer and still retained their function.  But in the light of day (at least where I am right now), I remembered that you can actually set your layer properties to say "Prevent the user from clicking on the base layer."


So I removed that rectangle, and the effect was the same without a superfluous shape.  The color weirdness still persisted, though, and I've seen before where rebuilding a shape or a state helps eliminates any wonkiness.

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