Managing Object States with CpExtra

This topic explains how to dynamically manipulate object states with CpExtra.

What are Object States?

Object States were implemented as a feature in Captivate 9 to allow e-learning developers to create a set of 'appearances' for a slide object, and switch between those different appearances easily by using the Change State action. (Note: you can also use the xcmndChangeState command variable to do this.)

The following slide objects support states:

  • Shapes
  • Captions
  • Highlight Boxes
  • Images
  • SVGs

How to  create an Object State

  1. Create a slide object that supports states.
  2. Select it
  3. Look under the Object State section of the properties panel, click the blue plus button.
  4. A dialog will appear. Type the Name of the object state. (Note: This name is extremely important as you will see shortly.)
  5. Click OK.

The new state has now been created. By default, this new state is selected in the Properties panel. Any changes you make to the object, such as its color, or its label, will be saved to that specific object state, and not to the object as a whole. If you click on the drop down menu, you can see a list of all states belonging to the object.

If you select the Normal state from the drop down menu, you will see the object lose any changes you made to it while the New state was selected.

States allow you to dynamically change the appearance of objects. By default, only an object's Normal state will appear. You can however use Advanced Actions and CpExtra Command Variables to show states other than the Normal state. 

How to edit a State Name

If you discover a typo in your state name, or you need to change it for some other reason, do as follows:

  1. Select the object.
  2. In the Properties panel, click the State View button.
  3. Open up the Object State panel (if it's not already open) and right click on the state whose name you want to change.
  4. Choose Rename State from the context menu.
  5. Type the new name of the state in the dialog that appears. Once done, click OK.
  6. On the big button toolbar click the Exit State to move back into slide view.

CpExtra and Object States

CpExtra can automatically change object states for you based on certain rules you set up. These rules fall into the following to categories.

  1. Display a state when the object receives mouse input
  2. Display a state when a variable has a certain value

These rules are actually governed by the assigned State Name.

Display object states based on mouse input

States can display on two types of mouse input

  • On rollover
  • On mouse down

On Rollover

To make a state automatically appear when the user rolls over the object, give that state the following name: x_rollover

Note: The state name rule always starts with x_. This is a special marker that CpExtra looks for to distinguish which states it should pay attention to, and which states it should not.

On Mouse Down

To make a state automatically appear when the user presses on the object, give that state the following name: x_down

A single slide object can utilize both the x_rollover and the x_down state.

Display states based on variable value

CpExtra can also automatically make a object display one of its states when it detects a variable has a certain value. This can make some Advanced Actions a lot easier to manage, or can make certain interactions require no code at all!

Display state when a variable Is True Or False

Let's say you're doing a course about food safety. You want to show whether or not home made bread would have grown mold if it had been left outside the fridge for X many days. X is controlled by two buttons which increment or decrement the variable. You have an Advanced Action set up which sets isRotten to true if X is greater than 3. On the stage you have an image of a piece of bread. When isRotten is set to true you want it to change state to show an image of moldy bread.

You could do that by giving the state with the moldy bread picture this name: x_isRotten_true

If on the other hand you wanted to create a state that would display only if x_isRotten was equal to false, you'd do so like this: x_isRotten_false

Note: x_isRotten_true will also display if isRotten is equal to 1x_isRotten_false will also display if isRotten is equal to OR nothing at all.

Also Note: If you only wrote x_isRotten and didn't specify any value isRotten should equal, CpExtra will treat that state as if it were written x_isRotten_true. This can make things quicker if you have to write out a lot of state names in a limited period of time.

Display a state when a variable IS equal to a specific value

Now let's look at another example. Let's say you had a variable named color. At different points in your interaction you are going to change the value of color to be blue, green, and red. At that time you want a shape to display a state where its fill color to matches the value of the color variable. You could do so by creating the following states:

  • x_color_blue
  • x_color_green
  • x_color_red

Display a state when a variable is NOT equal to a specific value

You can also make a state appear when a variable's value equals anything other than a certain value. This is done using the 'not' keyword.

For example, you have a Text Entry Box where you wish the audience to type out an answer. The TEB is linked to a variable named userAnswer. Next to the TEB you have a image with a tick graphic in its Normal state, and a cross graphic in another state. You want the cross state to appear whenever the user writes something other than the correct answer.

Let's say the correct answer is iron. In that case the cross state should have this name: x_userAnswer_not_iron

Display a state when a variable Is Greater Than or Is Lesser Than a specific number

You can make a state appear when a variable has a number greater or lesser than a certain value, using the following keywords:

  • gt - Greater Than
  • lt - Lesser Than
  • gte - Greater Than or Equal To
  • lte - Lesser Than or Equal To

For example, you have a quiz. You want to show a state if the audience has answered 4 or more of the 10 questions correctly. How many questions have been answered correctly is recorded in the cpQuizInfoTotalCorrectAnswers system variable.

If we wanted a state to appear when exactly 4 questions had been answered correctly, then we'd write: x_cpQuizInfoTotalCorrectAnswers_4

However, if we want the state to appear if cpQuizInfoTotalCorrectAnswers is greater than than 4, then we need to use the gt keyword (which stands for Greater Than): x_cpQuizInfoTotalCorrectAnswers_gt_4

In that case, values such as 5 and above will cause that state to appear. However, the value will not, because 4 is equal to 4, not greater than it.

If you wanted this state to appear with the value 4 as well, then you could use the gte keyword (which stands for Greater Than or Equal To): x_cpQuizInfoTotalCorrectAnswers_gte_4

There are also the lt keyword (which stands for Lesser Than) and the lte keyword (which stands for Lesser Than or Equal To) at your disposal.

Display a state under multiple conditions

A state need not have only one requirement for it to appear. It could have a mix of variable and mouse event requirements.

For example, say you had an interaction about conflict resolution. You have two variables, partyASatisfied and partyBSatisfied. You want a state to appear only when both these variables are set to true. That can be achieved with the following state name: x_partyASatisfied_true_partyBSatisfied_true 

Note: x_partyASatisfied_partyBSatisfied would also give the same behavior.

What if you wanted a state to appear when partyASatisfied was true and partyBSatisfied was false? That would look like this: x_partyASatisfied_true_partyBSatisfied_false

What if you wanted a state to appear when both partyASatisfied and partyBSatisfied are true AND when you rollover the state? That can be achieved with the following state name: x_rollover_partyASatisfied_true_partyBSatisfied_true 

Note: The following state name would also work: x_partyASatisfied_true_partyBSatisfied_true_rollover. The mouse condition can appear either right at the front of the state name or right at the end of the state name. It won't work if it's right in the middle of the state name.

Remember, you can always change a state's name if you need to.

IF YOU LIKE WHAT YOU'VE READ ABOVE, THERE'S PLENTY MORE!

Join more than 2500 other Adobe Captivate users just like yourself and receive regular troubleshooting tips, illustrated tutorials, technical information, and creative solutions to real-world e-learning development issues. (See an example here.) Click the button below to join our community.  It's completely FREE!