To add a state to an object, select the object and click + on the right of Object State in the Property Inspector. Enter a name for the state in the dialog that pops up and click OK.
Last updated on
Jan 13, 2022
Objects can have multiple states within Captivate. This feature allows you to develop interactive content easily without using multiple objects, or "hide and show" techniques in a single project.
Using a single object with multiple states, you can unclutter your project timeline and reduce timeline complexity. For example, to change image color based on user's actions, you can use different colored states for a single image.
To work with multi-state objects, keep these features of multi-state objects in mind:
- Each object now can have multiple states.
- Interactive objects have in-built states.
- Users can customize the states of static and interactive objects.
- Button and smart shapes have in-built states with associated styles.
- Objects with multiple states can be added to regular slides only.
Support for multi-state objects
All smart shapes, text captions, objects, and media can have multiple states.
Question slide buttons, and drag-and-drop buttons do not support states.
Note:
Feedback captions, rollover objects, and text entry box buttons have in-built states, but they do not support adding custom states.
Add states to an object
-
Adding new states to an object Adding new states to an object -
Click State View to open the State view where you can see the original object and the new state you have created.
State view State view The object in focus is highlighted in the project slide. You can choose to add some characters or supplementary objects as part of the object in focus.
You can also see that there are two instances of the object. One is the original object in its normal (default) state, and the other is the new state of the object.
-
Edit the properties of the object making sure that you are doing the edits in the new state of the object.
Note:Some edits you can do are modifying the shape, color, and size.
-
Trigger an action for any object with a custom state by clicking Set Action to Object State directly from the Object State panel as shown here.
Triggering an action for a custom state Triggering an action for a custom state Note:Use the Go to next state and Go to previous state actions to create interactive slideshows to allow the learner to move back and forth between different states.
You can also use the Change state of action. This action enables you to trigger a custom state based on a user's action.
-
Select Retain State on Slide Revisit for a particular state if you want the object to retain that state when a learner revisits that slide.
Retain states when users revisit that slide Retain states when users revisit that slide
Move objects and their states
When you move an object that has multiple states, by default the respective states and additional state items move in relation to the object.
Delete/reset state
While creating the states, to go back to normal state, right-click on any state in the left pane, and choose reset state.
You can delete any states apart from default and normal state of an object. Delete and reset states options are available in the right-click pop-up window of state.
To exit State view and return to your slide, click exit state button in the toolbar.
Objects and their in-built states
Captivate provides the following in-built states that you can customize according to your requirement. You can choose the type by using the State drop-down and clicking each state.
| Object type | In-built states |
| Text captions, highlight boxes, smart shapes, images, characters, videos, animations, text animations, equations, and web objects. | Custom state - Custom states are supported for static and interactive objects. Users can trigger them through the 'change state of' action. |
| Button or smart shape used as a button |
|
| Drag and drop interactions (for more information, see Multi-state objects in drag and drop interactions) | |
| Drop sources |
|
| Drop targets |
The Drop Correct and Drop Incorrect states are triggered based on the Drag and Drop evaluation of the user's action when they submit their action. |
The default state for every object is Normal.
You can add new states using Property inspector and also make your states as default state for an object. To make your state the default state, simply choose the state, click the drop-down icon next it, and make it the default state.
You can pre-define project properties for normal, down and rollover states in Object Style Manager as well.
Note:
The Set As default option is not available for interactive objects.
For drag and drop interactions, the in-built states cannot be set as default states.
Effects behavior when objects have multiple states
When an effect is added to an object, the effect is applicable for all the states of an object.
In addition, an effect plays across all states of an object. For example, if an object changes state mid-effect, the behavior of the effect does not change in any way.
Sample usage
Some samples depicting the usage of object states during interactive content development are shown below:
Scenario 1 - To change the colors of the dress (object) based on user's click action on respective color codes (shown below the object).
Scenario 2 - To use characters to demonstrate the response for users choice in question slide, use object states and change the character's actions.
Property flow for multi-state objects in responsive projects
Property flow in a responsive project is across all states and views.
Captivate maintains a parent-child relationship among the breakpoints from Desktop-to-Tablet views and Tablet-to-Mobile views respectively. The object states created in a particular breakpoint flow to the lower breakpoint views unless you modify the state for a particular view and break the link.
Example to demonstrate this relationship
For example, if you create a button, and add/edit states in a responsive project, the object and its states get added in all the other breakpoints.
If you make any edits to these object states in Desktop view, these edits are present in all the other breakpoints.
If you make any edits to these object states in Tablet Portrait breakpoint, the link between the Tablet Portrait breakpoint and the Desktop breakpoint breaks. The object changes in the Desktop view no longer reflect in the Tablet Portrait and Mobile views. The objects in the Mobile view now reflect any object changes in the Tablet Portrait view.
Example to demonstrate how the relationship breaks
Consider the following example.
User adds a text entry box to the slide, selects the object, and clicks State View on the Property Inspector. User is working in Desktop view.
The State View opens showing the default states of the text entry box that are available. You can edit these states or create more states.
User edits the properties of the in-built states, or creates a state. In this example, the text entry box is made transparent in the Down state so that when a learner presses the Submit button, the button becomes transparent.
This change to the object state (which is done in Desktop view) flows across all the breakpoints.
User next goes to the Tablet Portrait view and edits the Down state further. If these changes deal with responsive properties such as character properties, position, or size then the link between the Desktop view and the Tablet Portrait view breaks. The Desktop view does not reflect these changes.
From now on, all changes done in the Tablet Portrait view (for that object) flow to the mobile views.
Best practices to follow
- Customize the normal state of the object before you add custom states
- Mark the Smart shape as a button before you customize button properties
Object properties that do not flow across states
There are some object properties that do not flow across states.
Properties such as shadow and reflection, text effects, and audio properties do not flow across states. For example, if you have an object with multiple states, and if you add a glow to it, the glow is not visible in the other states. Add the glow again to all the states.
In addition, text with different formats applied to it does not automatically flow across states.
Consider the below example. The word different has a different format applied to it. You can see that the formatting has not flowed to the new state.
To make this text flow across states, right-click the text and select Apply text to all states.
Multi-state objects in drag and drop interactions
Drag and drop interactions provide lot of options where you can use the multi-state nature of objects.
Consider this simple drag-and-drop interaction (choose the correct answer) example below.
In the above interaction, the LDAP oval object is the drag target and the rectangular options on the right are the drag sources. The correct answer 389 is mapped to the LDAP drag target.
Each of these drop sources and the drop target have multiple states that you can customize to enhance the appearance and function of this interaction.
Add all these in-built states by selecting the object and clicking + in the Object State panel in the Property Inspector.
You can set the appearance of each state of the drop target and drop source objects.
Drop target:
- DragOver: This is the state of the object when the learner drags a source over the target.
- DropAccept: This is the state of the object when the learner drops an acceptable source over the target.
- DropReject: This is the state of the object when the learner drops an unacceptable source over the target.
- DropCorrect: This is the state of the object when the learner drops the correct answer over the target and submits the answer.
- DropIncorrect: This is the state of the object when the learner drops the incorrect answer over the target and submits the answer.
Note:
See that in spite of the many states, the LPDAP object still is only one object on the timeline above, thus keeping the timeline clutter-free.
Similar to the drop target, you can add the in-built states to the drop source as well.
Drop source:
- DragOver: This is the state of the object when you drag it over the target.
- DropAccept: This is the state of the object when you drag the acceptable source to the target.
- DropReject: This is the state of the object when you drag the unacceptable source to the target.
- DragStart: This is the state of the object when you start to drag the source toward the target.
Note:
You can also add your own custom states to these objects to enhance your drag-and-drop interaction further.
From an expert: Adobe Captivate and Multistate Objects
Watch this video to learn how you can use this feature to add and edit states to your objects.
Download sample projects
To learn more about Captivate and how you can create engaging learning content, download the following projects:
