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
- 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
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
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
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
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
What is a component?
Consider the following when naming application and component
To rename a state, double-click its name in the States
panel, type a new name, and press Enter (Windows) or Return (Mac
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
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.
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
- 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
- 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
Turn the eyeball icon on or off to show or hide
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
Note: You can make an object appear invisible
or partially transparent by changing its Opacity value in the Properties
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 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
For more information on components, see Set instance properties.
For more information on transitions, see Animations.