I frequently find that the best way to explain a process is through the use of an interactive flowchart. Storyline gives you a wide variety of tools to make a flowchart come to life. I will show you one way to do this with shapes and states.

Let’s start with a simple flowchart created in Storyline with the shape tools. I have created a page containing a series of boxes connected by arrows.

Once you have the chart created, build the target pages where the learner will be taken when the boxes are clicked.

Now comes the fun part. Select the first shape, then click on the Trigger command from the ribbon to associate an interaction with the shape. The Trigger Wizard appears and allows you to choose the action and destination applied to the selected shape.

In this example I chose “Jump to slide”. That slide is the content slide associated with the first shape in the flowchart. Storyline creates the link so that the learner is taken to the content slide when he or she clicks on the flowchart box.

So that the learner can remember which boxes he has already clicked, we invoke another piece of Storyline magic. This is the concept of “States” and involves the status of an object. Among others, it could be “normal” (i.e. not yet clicked) or “visited”.

Change the view on the bottom of the screen from “Timeline” to “State”. This displays the available state options. Click on the copy button to create a duplicate of the Normal state.

Name the new state “Visited”.

Next, change the visual characteristics of the box for the Visited state. A variety of options are available. We’ll keep it simple and just give it a light blue color. Do this by setting the transparency at 50%.

Now, when the user clicks the first box, it will show itself visually different. This alerts the user that he or she has already clicked this box and seen its associated content.

Repeating this simple process for the remaining three boxes completes the flowchart. This flowchart model could just as easily have been a menu or table of contents. The triggers provide the navigation and the states provide the visual feedback.