Defining structure with pages and states

Add, duplicate, and delete pages and states
Name pages and states
Navigate between pages and states
Show and Hide artwork in pages and states
Share objects between pages and states

Most interactive projects and applications are designed to present information in more than one view, or page. The different views a user sees when navigating through an interactive project—or when clicking on an interactive component (such as a button) inside of your project—are called "states" in Flash Catalyst. There are two types of states:

Page states.: A simple interactive ad might have one view that contains a sale offer, and another view that contains pricing details. Each view can be defined as a page state Think of page states as forming the top level structure of your project or application.
This interactive ad has 3 views defined as Page states. You can control what displays on any Page state by turning layers on and off in the layers panel.
Click a state in the Pages/states panel to select it; then use the layers panel to determine what displays on the selected state.
Component states.: Continuing with the same example above, a sale offer page may include interactive button components for navigating, or the pricing details page may have a scrolling list component. These interactive components can also have states. "Component states" define the look and feel of an object (for example, a button) at a certain point in time; usually based on a mouse event or other user interaction.

This interactive "Stay" button has 4 Component states: Up, Over, Down, and Disabled. You can control the look and feel of each state of a button by selecting it in the Pages/states panel, then using the Properties panel to adjust the look and feel.

Add, duplicate, and delete pages and states

All Flash Catalyst pages and component states are created, modified, and managed in the Pages/States panel. A new Flash Catalyst project begins with one page state.

Note: If you import an Illustrator file with multiple artboards, each artboard is added to a separate page state.

To add a new page based on an existing page, select the existing page in the Pages/States panel and click Duplicate State.
To create a new blank page (one in which all layers are hidden and no objects are present), click New Blank State.
To delete a page, select it in the Pages/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 page 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 pages.

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 page state. It can have a unique set of properties (size, position, opacity) in each page or parent component where it’s used.
A custom component can appear to the viewer as if they are viewing another page or screen 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:

Interactive components

Name pages and states

Consider the following when naming pages and component states:

To rename a page or component state, double-click its name in the Pages/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: @!#$%^&*().

Navigate between pages and states

To view the contents of a page, select it in the Pages/State panel. The artboard shows all visible objects in the selected page.
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 Pages/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 Edit-In-Place.

Show and Hide artwork in pages and states

When you import a design document, the artwork is added to a page 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 shapes, lines, and text.

When you add objects to a page or component 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 pages and 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 currents 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 component properties.

For more information on transitions, see Transitions and the timeline.