Storyline 360: Adding and Editing States

States let you change the appearance of an object based on a learner's actions. For example, you might enlarge a button when learners hover over it or add a glow effect when they click it. You can even change character expressions and poses with states.

Most objects in Storyline 360 support states, including pictures, shapes, captions, characters, markers, and buttons.

• Opening the States Panel
• Adding States
• Renaming States
• Reordering States
• Inserting Pictures as States
• Editing the Appearance of States
• Deleting States
• Setting the Initial State of an Object
• Triggering States

Opening the States Panel

The States panel is only accessible in Slide View. If it isn't visible at the bottom of the screen, click the arrow in the lower right corner of the slide stage to open it.

Then select the States tab.

Adding States

By default, most objects in Storyline 360 have one state (buttons have five), but you can add as many as you want.

1. Select the object you want to modify, then go to the States panel and click Edit States.
   
   
2. Click the New State icon (looks like a blank piece of paper) to create an entirely new state, or click the Duplicate State icon (looks like two pieces of paper) to create a copy of the selected state.
   
   
3. Give the new state a name. You can either choose a built-in state from the drop-down list or enter a different name to create your own custom state.
   
   
4. Click Add to create the new state.
5. If you want to adjust the appearance of the state you just added, follow these steps.
6. When you're finished, click Done.
   
   

Renaming States

Starting with the May 2022 update, you can rename custom and built-in states. This is especially helpful when you need to change the name to a more descriptive one or quickly correct a typo. Here's how.

1. Select the object you want to modify, then go to the States panel and click Edit States.
2. Select the state you want to rename and click the Rename State icon (looks like a pencil).
3. In the Rename dialog that appears, enter a new name or click the drop-down arrow to choose any of the built-in states and apply its default function.
4. Click Rename to confirm your changes.
5. When you're finished editing, click Done.

Pro Tips:

• The Normal built-in state is automatically created when you insert an object, and it can't be renamed.
• The flag and lightning bolt icons identify built-in states. The Normal state always uses the flag icon, and the rest of the built-in states display a lightning bolt icon.
• State names must be unique.
• When you rename a state, any references to that state in existing triggers update automatically.
• If you rename a built-in state, its default function won't work anymore. However, you can restore the default function by renaming the state back to the built-in state name.

Reorder States

As of the May 2022 update, you can arrange custom and built-in states in the order that works best for you and aligns with your design. Here's how easy it is to rearrange states. In the States panel, simply select the state and drag it to your preferred location. Nothing else, and no need to click Edit States!

Inserting Pictures as States

When you're working with an image, you can quickly create a series of states for it by importing multiple pictures all at once.

The name of each picture file you import becomes the name of its state in Storyline 360. For example, a picture named Custom 01.png becomes a state called Custom 01 in Storyline 360. And if the file name corresponds to a built-in state, such as Hover.png or Visited.jpg, it automatically functions as that built-in state, so you don't need to create any triggers to make it work.

1. Select the image you want to modify, then go to the States panel and click Edit States.
2. Click the Insert Pictures as States button. (This button is only active when you're working with an image.)
3. Select all the pictures you want to import and click Open.
4. Click Done.

Editing the Appearance of States

You can change the appearance of any state, including text, shape, color, effects, placement, size, and more. You can even add animations. If you're editing states for a character, you can also change the expression, pose, and perspective.

1. Select the object you want to modify, then go to the States panel and click Edit States.
   
   
2. Select the state you want to edit (or add a new state as described in the section above), then use the ribbon to make your changes. You can add and edit text, add and remove objects, change position, adjust formatting, edit characters, and apply animations.
3. When you're finished, click Done.
   
   

If you need to reset a state to its original appearance while you are editing, click the Reset State icon (looks like a circular arrow).

When you're editing states for a particular object, the other slide elements will dim. If you don't want the slide to dim, uncheck the box to Dim background objects. This can be useful when you need to use the color picker to match the color of another object.

To save time when you need to edit states for multiple objects, use the Editing states on drop-down on the far right side of the States panel to switch between objects on the same slide. (As you scroll through the items in the list, Storyline 360 outlines them in red, so you know which object you're selecting.) Your changes to all objects will be saved when you click Done.

Deleting States

1. Select the object you want to modify, then go to the States panel and click Edit States.
   
   
2. Select the state you want to delete and click the Delete State icon or press the Delete key on your keyboard.
   
   
3. Click Yes to confirm deletion.
4. When you're finished editing, click Done.
   
   

Setting the Initial State of an Object

When an object has multiple states, it'll default to an initial state of Normal, but you can change that. This is especially handy if you want an object to start out hidden.

Select the object, go to the States panel, and choose a state from the Initial state drop-down.

Triggering States

You don't need to add triggers for most built-in object states. For example, hover states will automatically work without adding any triggers.

On the other hand, character states (expressions), must be triggered. (Visit this article for detailed descriptions of each built-in state.) Custom states must also be triggered.

To learn about triggers, visit this user guide.