20 April 2009
Basic familiarity working with Fireworks is required.
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.
States (referred to as "frames" in Fireworks CS3 and earlier) are useful for the following:
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:
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.
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).
Let's structured the Fireworks document with three layers:
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).
When you add a new state, it is blank by default unless you've set a layer to be shared among all states:
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.
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:
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).
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.
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).
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:
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).
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:
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.
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:
When you add states to new pages, the contents of shared layers are immediately displayed (see Figure 15).
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.
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:
Also check out these helpful online resources to research the topic further:
Always visit the Fireworks Developer Center to get more articles and sample projects.