Object States allow you to apply visual variants to an object on the canvas depending on what state it is in. For example, changing the background fill of a button when it is being hovered over would be setting up its hover state.
There are three types of states an object can have in Flex:
Default State | How the object appears when the other Object States are not triggered |
Hover State | How the object appears when a user is hovering over it |
Pressed State | How the object appears when a user is pressing it (not after the user has pressed it) |
Coming soon: Click/Locked and Custom States
How to Set Up an Object State
The process for setting up a Hover and Pressed state is the same:
Select the target object in Design Mode
Select the "Add object state" icon under the Object States section of the Inspector Panel
Select the desired Object State type from the dropdown menu
Make the desired changes for the new state in the Inspector Panel
Select "Finish editing" in the purple container towards the bottom of the screen to save the state
Changes that can be made to an object when creating a new state include:
Size
Position
Text Style (for text boxes)
Fill color
Stroke
Blend modes
Opacity
Shadow
How to Adjust an Object State
Removing an Object State:
Select the target object on the canvas
Navigate to the Object States section of the Inspector Panel
Hover over the Object State you want to remove
Select the "Remove state" icon
Select the "Reset state" icon to keep the state, but return its appearance to its default settings
Adjusting an Object State:
Once an Object State has been applied, a new interaction called "State change" (titled Hover or Pressed) will be available in the Inspector Panel while in Animate Mode. Select the interaction to open the dropdown menu where you can fine-tune and adjust the:
Trigger
State type
Transition (from Default to target state)
Duration of transition
Delay before transition starts
The state can also be removed from the Inspector Panel while in Design Mode.