Defining structure with states

Types of states

Most application projects you build will require multiple views for displaying information. The different views a user sees when navigating through your application-- or when clicking on an interactive element (such as a button) inside of your application-- are called "states.” There are two types of states:

Application states.
A simple project might have one view that is displayed by default whenever the project is run, and another view that displays a form for users to enter data into.
View full size graphic
This project has 2 views defined as application states: normal, and uploadForm. You control what displays on a state by turning layers on and off in the layers panel.
View full size graphic
Click a thumbnail in the States panel to select that state; then use the layers panel to change what displays on the selected state.

Component states.
Continuing with the same example above, a form view state may include interactive buttons to trigger content upload. These button components can also have states, commonly called component states, which define the look and feel of the button at a certain point, usually based on a mouse event or other user interaction.

View full size graphic
This interactive button, named "highlightButtonSkin", has 4 component states: Up, Over, Down, and Disabled. The look and feel of the Down state, for example, is changed by selecting that state, selecting the objects you want to edit, and adjusting values in the Properties panel.

Using component states vs. application states

It is a best practice to build as much of your application using component-level states, vs. application-level states. By encapsulating unique views and functionality of your application into component-level states, you will generally build the most efficient, best performing application.

View full size graphic
You can use custom/generic components to create component-level states
View full size graphic
Using fewer application-level states increases performance.

Flash Catalyst limits the number of application-level states in a project to 20, in order to prevent poor performance. You can however build efficient applications that have more than 20 total states by using Custom/Generic components. Custom/Generic components can contain up to 20 states as well; so by using fewer app-level states in conjunction with Custom/Generic components, you get more unique views in your app while keeping it efficiently built.

For details on defining component states in a free-form way by using Custom/Generic components, see Create a component from your own artwork.

Add, duplicate, and delete states

All Flash Catalyst application and component states are created, modified, and managed in the States panel. A new Flash Catalyst project begins with one state.
Note: If you import an Illustrator file with multiple artboards, each artboard is added to a separate state.
  • To add a new state based on an existing state, select the existing state in the States panel and click Duplicate State.

  • To create a new blank state (one in which all layers are hidden and no objects are present), click New Blank State.

  • To delete a state, select it in the States panel and click the Delete button (trash can).

When you duplicate a state, you are not duplicating objects. The objects persist across states. You can show or hide the objects in each state using the Layers panel.

An application or custom component can have no more than 20 states. Adding too many states can slow performance. If the application requires more than 20 states, you can encapsulate them in custom components. For example, you can encapsulate menu bars and other components that appear on multiple states.

In addition to improving application performance, there are other advantages to creating your different application views using custom components.
  • A custom component is more versatile than a state. It can have a unique set of properties (size, position, opacity) in each state or parent component where it is used.

  • A custom component can appear to the viewer as if they are viewing another state in the application.

  • Components can be nested inside other components. Nesting components makes it possible to create a more efficient application with many states or views.

  • Editing a component in Edit-In-Place updates the component throughout the application.

Note: Some components have a fixed set of states, such as the Up, Over, Down, and Disabled states of a button. You cannot duplicate or delete these component states, but you can hide them by hiding all layers for the selected state.

See the following for more information on creating and editing components:

What is a component?

Naming states

Consider the following when naming application and component states:

  • To rename a state, double-click its name in the States panel, type a new name, and press Enter (Windows) or Return (Mac OS).

  • State names must begin with a letter.

  • State names cannot contain spaces.

  • State names cannot contain special characters such as @!#$%^&*().

Navigate between states

  • To view the contents of a state, select it in the State panel. The artboard shows all visible objects in the selected state.

  • To view the different states of a component, double-click the component in the artboard to enter Edit-In-Place mode. When you edit a component in place, the States panel updates to show the states of the component.

Note: When a component is in Edit-In-Place mode, the Layers panel splits into sections. It shows layers for both the project and any components you have open. You can drag objects from the main application layers into the component.

For more information on Edit-In-Place and, see Editing a component with edit-in-place.

Show and Hide artwork in states

When you import a design document, the artwork is added to a state in Flash Catalyst.

To add additional objects to a state, do one of the following:

  • Import new artwork.

  • Drag assets from the Library panel to the artboard.

  • Create new objects with the Flash Catalyst drawing tools.

    For more information on the drawing tools, see Creating Application Mock-ups.

When you add objects to a state, they are present. They exist in that state. When an object is present, it can be made visible or hidden. The following information helps identify the presence and visibility of objects in the current state using the Layers panel:
Present and visible
The name of the object is listed using dark text (present), and the eyeball icon is dark (visible).

Present and hidden
The name of the object is listed using dark text (present), but there is no eyeball icon showing (hidden). If the eyeball appears dimmed, the object’s visibility is on but its parent layer is hidden. When a parent layer or group is hidden, its children are hidden automatically.

Not present
The name of the object is listed using dimmed text (not present). The object is not present in the current state, but it does exist in one or more other states of the application.

Use the following techniques to display or hide objects in a state:
  • Turn the eyeball icon on or off to show or hide an object.
    The eyeball icon is a toggle. Click the Show/Hide column (far left column) beside an object in the Layers panel to toggle its visibility.
  • Turn off the eyeball icon for a parent layer or group to hide all of its children.

  • Select an object and press Delete to remove the object from the current state. If the object exists in other states, its name turns dim in the Layers panel. If the object does not exist in any other states, it disappears from the Layers panel.

  • Turn on the eyeball icon to share an object to the current state when its name is dimmed.

  • Select an object and click the Delete button (trash can) in the Layers panel to remove it from all states and the Layers panel.

Note: You can make an object appear invisible or partially transparent by changing its Opacity value in the Properties panel.

For more information on the Layers panel, see Layers.

Share objects between states

A single object can appear in multiple states. That object can have a different set of properties, such as size, position, color, and transparency in each state where it exists. In most cases, when you modify an object, those changes apply only to the object in the current state. Once you position and modify an object to your liking, you can quickly share that object, along with its properties, to other states.

This technique makes it possible to create smooth transitions from one state to the next. For example, you can create the effect of an object fading in or out or morphing from one shape or position to another.

  • To share an object to other states, select the object and choose States > Share To State. Select the states to which you want to share the object.

  • To remove an object from a specific state, select the object in one state and choose States > Remove From State. Choose the state from which you want the object removed.

  • To make an object the same in all states, modify its properties, and then choose States > Make Same In All Other States.

Note: Some edits or changes apply to all states. Any change that affects the application hierarchy is shared across all states automatically. For example, if you group objects or convert objects to components, the change applies to all states. If you edit a component using Edit-In-Place mode, you edit the component definition in the project library. The changes apply to all instances of the component in all states.

For more information on components, see Set instance properties.

For more information on transitions, see Animations.