Creating And Modifying Object States

Audio Transcription

Hello and welcome back to the fourth section of Articulate Storyline training series.

In the last video, we saw what States are. We have also seen all the text, pictures, shapes and interactive objects that can be included in the States. In this video, we will learn how to create new states and how to use them.

The interactive objects like buttons has bunch of pre-build states. Whereas other objects like pictures, shapes and text doesn’t. But we can add as many states as we want for an object.

To see the states of an object,

• Select an object and open the states panel.
• Then click this Edit states button to open states view.

All the other objects on the slide are grayed out which means we are inside the state view of this object. However, you can turn off this effect by unchecking this option in-case if you don’t want this indication. I find it useful, so I will leave it enabled.

We have down state. This state gets activated when the user click-and-hold an object. We’ll give it a sky blue color. Now, let’s add a visited state as well. This state gets activated once the user click the object. The object will remain in the visited state until slide resets or if a trigger is attached to change the state. We’ll give a Purple color for this state.

And then we have selected state. This state is very useful when you have two or more buttons on the slide. When the user selects a button then the other button with selected state should get de-selected automatically. Let’s give this state a different color and later we can create this functionality using triggers. I will demonstrate how to do it in a moment.

Before that, we need a second button with similar states in-order to test it out. So I am going to show you a shortcut for this. You can click this Done editing states button and then, in-order to add all these states to our second button, we can simply select this button then go to home and select format painter. Then click on this second button. This will apply all the states to the second button.

Next, we need to right click on this button and select button set. Make sure both the buttons belong to the same button set. So I am going to set both buttons to button set 1. Alright, let’s preview it.

As you can see, it changes to blue color when the mouse is over and upon click-and-hold, the down state is activated. As soon as the click is released, selected state is activated.

Now, if I select the other button, the first button gets de-selected automatically and the visited state is activated. If we go back and select this button again, the second button gets de-selected.

Next, we have disabled state. This state can only be activated when we attach a trigger to change the state to disabled. We will see this in the upcoming videos. Let’s move on to the next built-in states.

There are few built-in states specific to drag-n-drop interactions. Let me create a freeform drag and drop slide so that we can see these states in action.

Now, in a drag and drop interaction, we need a draggable object and a drop target. I am going to add a circle as the drag item and then two squares as the drop targets. Let me name them.

Now let’s go ahead and add states to these objects. We have a drag over state here. This state gets activated when any other object is dragged over to this object. Let’s give it a different color and then click done. Now let’s apply this state to our second drop target using the format painter.

Next, we have drop correct and drop incorrect states. As the names suggests, drop correct gets activated when the drag item is dropped on the correct target, and vice versa.

Let’s add Green color to the correct state and Red for incorrect. Now we need to set correct drop target to our drag item. The correct drop target will be the first square and the second square will be an incorrect drop target. We don’t need a feedback for this as of now hence selecting none for the feedback.

I want to see the correct and incorrect states as soon as I drop in the target. So, I will uncheck this delay option under drag-n-drop options. Let’s preview and check out our interaction.

Now, as we drag the circle on to the target, the drag over state is activated. When I drop it on the incorrect target, the circle turns Red. And it turns Green when I drop it on the correct target.

This way we can build many cool interactions using these built-in states without adding any triggers. Although these built-in states allow us to build many interactions on the go, they might not be sufficient for complex interactions. For complex interactions we can add our own states and control them by adding triggers.

We will see how to do so in the next video.