Using pages, states, and layers in Fireworks CS4

Pages, states, and layers are powerful organizational tools that make it easier to find and manipulate objects in a Fireworks document. However, the relationship between them can sometimes be confusing. Designers familiar with pages and layers tend to understand them fairly well, but many people use states less frequently.

Exploring pages, states, and layers

States (referred to as "frames" in Fireworks CS3 and earlier) are useful for the following:

• Creating frame-by-frame animations
• Storing the different states (the up, over, down and over while down) of buttons and navigation bars
• Manipulating slices for disjointed image swaps and rollovers

A Fireworks PNG file can contain multiple pages, and each page may have unique settings for the canvas size and color, image resolution and guides. These settings can be defined per-page, or globally across all of the pages in the document. If a master page is created and linked to other pages in the document, the settings of the master page are automatically applied to all the linked pages. If you don't set a master page, or if you don't link the master page to other pages, each page can have unique settings (see Figure 1).

New documents in Fireworks CS4 have one page (Page 1) that contains the following:

• One state (State 1)
• One content layer (Layer 1)
• One web layer (contains any slices and hotspots that are added to a page)

A layer on a Fireworks page is a container that can hold many different types of objects. For example, layers may contain vector drawings, text or bitmap images. Every page in a Fireworks document can contain many layers. Objects can be moved across layers. They can also be edited or deleted without affecting other objects in the different layers. Objects within a layer follow a stacking order. Objects listed at the top of the Layers panel appear above the objects that exist in the lower layers on the canvas.

Layers are useful for organizing objects on a page, while states are useful for storing variations and different conditions of those objects. For example, you can use layers to control the layout of a web page, and to ensure that a button, symbol or image is located above background images. You can use states to store the different graphic appearances of that button that are displayed during different mouse events (such as the up, over, down and over while down states). New pages have only one state by default, but new states can be created or duplicated in the States panel.

Creating a document with pages, states, and layers

To better understand the relationships among pages, states, and layers, let's create a simple Fireworks document and modify the number of pages, layers, objects, states, and object variations on those states (see Figure 2).

Creating multiple layers to control the display of objects

Let's structured the Fireworks document with three layers:

1. Create a new, blank Fireworks document by selecting File > New.
2. Open the Layers panel (Windows > Layers panel).
3. Add two new layers by doing one of the following:
   • Click the New / Duplicate Layer icon at the bottom of the panel twice
   • Open the Layer panel's options menu in the top right corner of the panel, and select the option to create a New Layer and then repeat this step to create a total of three layers
4. Page 1 should now contain a total of three layers. Draw a different object on each layer. For example, use the Shape tools to draw a simple geometric shape filled with a different bold color in each layer (see Figure 3).

At this point we've structured the Fireworks document with three layers (containers) that can be manipulated to control the stacking order of the three shapes contained inside the layers. For example, if you wanted to move the red square from the bottom to the top of the display of objects, you could drag Layer 1 in the Layers panel so that it appears above Layer 3.

Next we'll take a look at how the document structure changes when we add two more states, so that the Fireworks document contains a total of three different states (see Figure 4).

Creating new states to store unique graphic elements

When you add a new state, it is blank by default unless you've set a layer to be shared among all states:

1. Open the States panel (Windows > States panel).
2. Add two new states by doing one of the following:
   • Click the New / Duplicate State icon at the bottom of the States panel twice
   • Open the States panel's options menu in the top right corner of the panel and select the Add State option. Repeat this step to create a total of three states in the document
3. Page 1 should now have a total of three states (see Figure 5).

If you want to be able to edit objects independently of one another, duplicate the state. When you duplicate a state, the new state contains the same number of layers as the original, and all of the objects on those layers are duplicated. Each instance of an object is independent across states when they are duplicated; so editing a duplicated object only changes that instance of the object and does not affect the original object.

Sharing the contents of layers

In this section we'll describe the process of sharing layers across states. Share a layer if you want the same object to appear across states consistently (see Figure 6).

In the next section, we'll add objects to the two new empty states, to replicate the diagram in Figure 6:

1. Select Layer 1 in the Layers panel.
2. Open the States panel, and select State 1. The page on the Fireworks canvas should display all three objects that exist in State 1, that were created before adding the two new states.
3. Select State 2. The page on the Fireworks canvas is blank, because there are currently no objects on any of the layers in States 2 and 3.
4. Ensure that Layer 1 is still selected in the Layers panel, and then draw a new shape object on the canvas.
5. Select State 3. The page on the Fireworks canvas is blank, because there are currently no objects on any of the layers in State 3. Ensure that Layer 1 is still selected in the Layers panel, and then draw a new object on the canvas.

   Analyze the contents of each state (State 1, State 2 and State 3) by selecting them one by one in the States panel. Note that a different object appears on Layer 1 for each state. Also notice that you see objects in States 2 and 3 only for Layer 1, because Layer 2 and Layer 3 are still empty in States 2 and 3. Only Layer 1 contains objects in all three states.

   Note: There's a shortcut method for changing states in the Layers panel. The label in the left corner of the Layers panel displays the currently selected state. When you click the label, a selector appears that displays all of the states. The current state is selected by default. Click any other state to select it and close the menu.

Now let's take a look at the process of sharing objects across states (see Figure 7).

1. While State 1 is selected, open the Layers panel and select Layer 3.
2. Share Layer 3 to all of the states of Page 1 by doing one of the following:
   • Right-click (or Control-click) Layer 3, and select the option to Share Layer To States
   • Open the Layer panel's options menu in the top right corner of the panel, and select the option to Share Layer To States
3. When a layer has been shared to states, a small icon resembling a filmstrip appears to the right of that layer's name in the Layers panel.

   Return to the States panel and click on each of the three states to review the results. You'll see the different objects displayed on Layer 1, but the same object on Layer 3 will appear in every state. If you create another new state, Layers 1 and 2 will be empty, but the object on Layer 3 will automatically appear, because Layer 3 has been shared to all states. Sharing layers to states is a huge time saving strategy, because it allows you to draw an object once and have it appear in every state, regardless of the number of states the Fireworks document contains.

4. Select the shape object on Layer 3 and change the color of the fill or add a texture (see Figure 8).

It does not matter which state is currently selected when you edit the object on Layer 3, because the object on Layer 3 has been shared to all states. Editing the object on Layer 3 in any state applies the changes to all of its instances in the other states. If your design requires that an object's position changes or its appearance graphically changes from state to state, do not share it across states.

Share a layer to states only when you want the objects on that layer to display in the same place and maintain the same appearance at all times. This strategy is very helpful for persistent objects such as text labels, background graphics or borders around images (see Figure 9).

Three different objects have been drawn on Layer 1 in each state, and the object in Layer 3 has been shared across all states.

Review the Layers panel as you select the three different states and notice that Layer 2 exists for each state, but it only contains an object on State 1. Layer 2 will remain empty until you either insert an object into it or share Layer 2 from State 1 across all states (see Figure 10).

Now let's consider the onion skinning feature and see how it works in relationship with a document that contains multiple states (see Figure 11).

Displaying objects on layers in other states using onion skinning

Sometimes it is helpful to see the objects from other states while editing a specific state. For example, you may want to ensure that all of the objects are in the correct relative location or are scaled to the correct size. Imagine a scenario where it is not desirable to share those layers to all states, because you do not want the objects to appear in all of those states. In this case, you can use onion skinning to temporarily see objects on layers in other states as you edit the design.

Activate onion skinning by clicking in the left column of the States panel. The currently selected state is highlighted in blue. When onion skinning is disabled, the onion skinning icon in the left column is "closed" and appears only on the active state. Clicking to the left of any other state "opens" the onion skinning icon and a vertical line appears between the states (see Figure 12).

Objects on layers that appear in any of the states within the selected range will appear on the canvas. Objects in the active state are displayed with 100% opacity, and objects in the other states appear translucent. To close onion skinning, click the starting point of the set, which was the initially selected state.

You can also activate the onion skinning feature by clicking the onion skinning icon in the lower left corner of the States panel. The following options are available:

• No Onion Skinning: Turns off all onion skinning.
• Show Next: Always shows the current and next states with onion skinning.
• Before and After: Always shows the current, previous, and next states with onion skinning.
• Show All States: Turns on onion skinning for all states.
• Custom: Opens a dialog to choose the number of preceding and following states to include in onion skinning and the translucency values for each.
• Multi-State Editing: (The default option.) Enables you to select and edit objects from different layers in other states regardless of the layer or state that is currently active

In the previous examples we've seen how objects can be organized in layers and how specific layers can be shared across the states in a Fireworks document. Now we'll discuss another time saving strategy that allows you to share the contents of layers across pages (see Figure 13).

Sharing objects and layers across pages

You can share layers across pages when the objects in layers should exist on all pages. This strategy allows you to draw an object once and ensure that it is shared (displayed) across pages. For example, you may wish to place a logo in the design so that it appears in the same position on every shared page.

When objects that exist in layers that are shared across pages are edited, the changes are reflected on all pages where the objects appear. Similarly, when you share layers with objects across pages, the objects appear in the same location across pages.

Sharing layers to pages is similar to using the master page in Fireworks. However, the master page always shares all of its layers to all pages in the document. Sharing a layer from a regular page allows you select which pages display the contents of a shared layer and to specify the layers that will be shared.

Follow the steps below to see how to share a layer across pages:

1. Open the Pages panel.
2. Add another page to the Fireworks document by doing one of the following:
   • Select the New / Duplicate Page icon at the bottom of the panel
   • Open the Pages panel's options menu in the top right corner of the panel and select the option to create a New Page
3. The new page is blank and contains a single layer and state (see Figure 14).

4. Return to Page 1 and select Layer 1.
5. Right-click (or Control-click) the layer, and select the option to Share Layer to All Pages.
6. Open the Pages panel and select Page 2.

The object from Page 1, Layer 1, State 1 now appears on Page 2, because it has been shared. If you edit the object on either Page 1 or 2, the changes to the object will automatically be displayed on both pages.

Sharing objects across selected pages

If you want to share a layer selectively across multiple pages but don't wish to display the layer contents on all pages, do the following:

1. Select the layer you wish to share across some pages.
2. Open the options menu in the top right corner of the Layers panel.
3. Select the option to Share Layer to Pages from the menu. In the dialog box that appears, select the specific pages that you wish to display the shared layer contents.

When you add states to new pages, the contents of shared layers are immediately displayed (see Figure 15).

Displaying objects from the originally shared layer

Now let's focus on the different shape objects on Page 1, Layer 1 that were drawn in State 2 and State 3 of Page 1.

1. Open the States panel for Page 2 to verify that it currently only contains one state (State 1).
2. Add two new states to Page 2 by doing one of the following:
   • Select the New / Duplicate State icon at the bottom of the panel twice
   • Open the State panel's options menu in the top right corner of the panel and select the option to Add State from the menu (repeat this step to create a total of three states)
3. Page 2 now contains a total of three states.
4. Analyze the contents of each of the three states of Page 2 and you'll see the different objects displayed in each state (State 1, State 2, and State 3) from Layer 1 that were shared from Page 1. When you shared Layer 1 from Page 1, all the objects in each state were also shared, but they did not appear on the shared pages until you created additional new states for them on Page 2.

Where to go from here

With planning and careful sharing of layers to pages and across states, you can make your Fireworks documents more efficient and easier to update. By organizing the structure of the assets, you can manage easily and make changes effortlessly.

Use states to create simple animations, store button and navigation bar states, create image swaps for rollovers, and even store alternate states for complex interface designs. With a little practice, you'll find creating new states, duplicating states and sharing layers will help you master this helpful feature in Fireworks CS4 and allow you to take your projects to the next level.

Watch my Adobe TV videos to learn more about working with Fireworks:

• Creating interactive prototypes Rapid prototyping
• The complete design process

Also check out these helpful online resources to research the topic further:

• Fireworks CS4 online help: Creating animations using states
• Creating animated logos
• Foundation Fireworks CS4 excerpt: Creating visual effects

Always visit the Fireworks Developer Center to get more articles and sample projects.