Everything You Need to Know About States in Storyline 360

The states feature in Storyline 360 is incredibly powerful. States allow you to alter the appearance of objects based on the learner’s actions. To illustrate this, take a look at the GIF below:

See how the formatting of the buttons changes as I hover, and then again when I click on them? And did you notice that once I’ve clicked on the top three buttons, a fourth one appears? These formatting changes are made possible thanks to the states feature in Storyline 360. But this is only the tip of the iceberg when it comes to what’s possible with states. 

Let’s do a breakdown of this super-powerful feature to help you better understand how you can use states in your courses:

• Built-In Object States
• Custom Object States
• Drag-and-Drop States
• Character States

Built-In Object States

When you click on an object, open the States panel and click on the New State icon. You’ll notice that there are already a few built-in states:

The great thing about these built-in states is that when you add them to objects in Storyline 360, most of them work automatically—without any triggers. Let’s take a look at how prebuilt states work and how you might want to use them in your courses.

Normal

This is what your learners see by default if they don’t interact with the object in any way. This state is created automatically when you insert an object. Any formatting that you apply to your object is automatically applied to the Normal state.

Here’s a cool pro tip: you can actually add objects to the Normal state instead of adding them to your slide! There are many situations where this technique can be useful. For example, if you’d like to create a custom button by combining several objects, you’ll want to add the secondary objects to the Normal state instead of grouping them, because states can’t be added to a group of objects. 

To add objects to the Normal state, simply select an object, open the States panel, click on Edit States, select Normal, and insert the objects, as shown in the GIF below: 

 

As you can see, adding the icon to the Normal state instead of adding it to the slide itself allows you to interact with both the rectangle and the icon as if they were a single object. From here, you can add whatever other states you’d like! Speaking of, let’s take a look at the next prebuilt state.

Hover

This is what an object looks like when a learner moves their mouse over it. Adding a Hover state is a great way to signal to learners that an object is clickable. 

It’s up to you what formatting you apply to an object. Here’s an example of a Hover state that simply changes the fill color to a lighter shade of blue:

Down

The Down state appears when the learner is actively clicking on an object. This signals to the learner that their action is working. As always, the design of this state is your call. In the example below, the Down state simply changes the fill color to a darker shade of blue:

Selected

When you’ve added the Selected state to an object, it’ll appear when the learner clicks. If they click on the same object again, it’ll go back to the Normal state (unless they’re part of a Button Set). This state is great for interactions where you want learners to see which objects they’ve selected. Here’s an example of a couple of rectangles to which I’ve added Selected states with glow formatting:

If you want to create an interaction where learners are supposed to select a single object from a set of options, you’ll want to use this state in combination with a Button Set, which automatically changes the state of a Selected object to Normal when the learner selects another object in the set, much like how radio buttons work in multiple choice questions. Here’s the same example you see above with a button set applied to the three rectangles:

Visited

Like the Selected state, the Visited state appears automatically when the learner clicks on an object. However, unlike the Selected state, which turns on and off automatically when learners click on the same object multiple times (unless they’re part of a Button Set), once the Visited state is activated, the only way to turn it off is by adding a trigger. This is because the purpose of the Visited state is to show that an object has been clicked on in the past, not to show that it’s currently selected.

The Visited state is super-useful when you create custom menus or click-and-reveal interactions because it allows you to give learners a visual reminder of the buttons they’ve already clicked. Here’s an example of how that works:

Disabled

The Disabled state allows you to temporarily prevent an object from changing states or activating a trigger when learners interact with it. Unlike the other prebuilt states we’ve seen, you need to add a trigger for this state to work, unless you’ve set it as the initial state for an object. When the Disabled state is activated, nothing will happen when learners try hover, click, or drag that object. 

The Disabled state is useful in many situations. For example, if you’d like to create a custom menu that requires learners to view the different sections of your course in a certain order rather than allowing them to view the content in the order of their choosing, you can use the Disable state to unlock one button at a time, like in the GIF below:

Notice how when I hover over the buttons, nothing happens? The Hover state doesn’t appear and the hand cursor doesn’t appear, making it clear that I can’t click on them.

If you’d like to build a menu like this but are short on time, hop on over and download this template. 

Hidden

As you may have guessed, when the Hidden state is activated, the object is invisible. Like the Disabled state, you need to add a trigger to activate this state unless you’ve set it as the initial state for an object. 

The Hidden state could be useful if you wanted to hide the quiz button until the learner completes all the sections of the course, as shown in the GIF below:

Before we move on to Custom Object states, here’s another pro tip for you: if you’re creating states for an image, you can quickly create a series of states for it by bulk-importing image files. Find out how in this tutorial: Inserting Pictures as States.

Custom Object States

In addition to these prebuilt states, you can create an unlimited number of Custom Object states that can look and work any way you want. 

Adding a Custom Object state is super-easy! Simply select the object, open the States panel, click Edit States, and type the name of your Custom Object state, as shown in the GIF below:

Once you’ve created your Custom Object state, go ahead and format it any way you’d like. Then, add a trigger to that object to show that state whenever you’d like it to appear.

There are tons of situations in which it can be useful to create Custom Object states. One example would be to create different versions of the same object that appear as the learner interacts with a slider or a dial, as shown in the GIF below:

To create the example above, I inserted a bunch of Custom Object states and changed the height of the rectangles in each one. Check out the screenshot below to get an idea of what my states look like:

This is just one example of a situation where you might want to use Custom Object states—there are plenty of others! Let your imagination run wild. 

Drag-and-Drop States

When we were looking at prebuilt states earlier, you may have noticed that at the bottom of that drop-down list there was another category of prebuilt states: the Drag-and-Drop states. As their name suggests, these states were specifically designed to be used with drag-and-drop interactions. They allow you to give the learner visual feedback as they’re interacting with the exercise. 

There are three Drag-and-Drop states. Let’s take a closer look at each one. 

Drag Over

If you add this state to a draggable object, the learner will see it when an object is dragged over a drop target. If you have multiple drop targets, this state will be applied no matter which one it’s dragged over. Take a look at this GIF to get an idea of what that could look like:

Instead of adding this state to a drag item, you could add it to your drop target(s). Here’s what that looks like:

No matter which option you choose, the objective is the same: to give the learner a visual cue that they’re dropping the object onto a drop target—without letting them know if their answer is correct or incorrect.

Drop Correct and Incorrect States

The remaining two states are generally used together. The Drop Correct state is what your learner will see when they drop an object on the correct drop target, and the Drop Incorrect state is what they’ll see if they drop an object on the incorrect drop target. By default, these states won’t appear until the learner clicks on the Submit button, like in the GIF below:

This is a great way to let learners know which answers they dragged to the right and wrong spots, instead of simply telling them they didn’t drag them all to the right spot.

If you want the Drop Correct or Drop Incorrect state to display right away, simply go to the drag-and-drop options and uncheck the box marked Delay Item Drop States until Interaction Is Submitted, as shown in the GIF below:

Once you’ve unchecked that box, your interaction will work as shown below:

This option is great for practice exercises, where the score doesn’t matter.

Pro tip: Did you notice that in addition to changing the color of the draggable items for the Correct and Incorrect states, I added icons to indicate whether they were correct? It’s a good practice to avoid using color alone to indicate correctness; this enables people who have trouble distinguishing colors or who come from cultures where green and red don’t indicate Correct and Incorrect to be able to understand.

Character States

Did you know that the illustrated characters in Storyline 360 come with a dozen prebuilt states? Well, now you do! There’s a prebuilt state for each of the 12 facial expressions included with each illustrated character.

So if you want your character to suddenly look angry or disappointed, you don’t have to build out those states—they’re already there! All that’s left to do is insert an illustrated character and set up a trigger to change the state. 

Wrap Up

And there you have it—you know everything there is to know about states in Storyline 360! Well, maybe not everything, but pretty close. If you want to dig even deeper, check out these great resources:

• Adding and Editing States
• Definition of Built-In States

Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial. And subscribe to our newsletter to get the latest product updates, e-learning examples, and expert advice directly in your inbox.