Pages, Layers and States in Fireworks

516

Fireworks Zone

136

4581

12-05-2009

Description

This article covers the organization and relationships between Pages, Layers and States or Frames which forms a unique system to accommodate rapid-prototyping tool.

Requirement

All Fireworks versions up to Fireworks CS4

Article

1. Overview

To organize and manipulate objects on the canvas Fireworks has a linear organization composed of Pages, Layers and States. For example, in Figure 1, this Fireworks PNG has a multiple page with 3 pages, 2 layers and 3 states.



Figure 1: A Fireworks PNG document

The blue area constitutes a Fireworks PNG document with Pages, Layers and States

2. Default Setting

The default setting when you create a new document in Fireworks CS4 is:

• One page, Page 1,
• One web layer at the top. It contains web objects, such as slices and hotspots, used for interactivity,
• One content layer, Layer 1,
• One state, State 1,
3. Canvas

The canvas plays the role of a screen, like a TV screen, where the users can see and manipulate all the objects (vectors, bitmaps or texts) contained in Layers.

Fireworks doesn't allow to create documents larger than 6000px in width or heigth. You can increase the canvas document size by changing the "MaxDocSizeInPixels" key value from 6000 in the Preferences text file in Documents and Settings > User name > Application Data > Fireworks CS4 > English > Fireworks CS4 Preferences.txt



Figure 2: Canvas

4. Page

A Page is a container which includes layers and states. A Fireworks PNG file can contain many pages and we will get a multiple page document. Each page will have their own layers and Frames/States.

Each page may have unique settings for the canvas resize (See Canvas resize) and color, image resolution, guides. These settings can be defined per-page, or globally across all of the pages in the document. Grid has a global setting you cannot have a per page setting.



Figure 3: Page panel

5. Layers

This is the heart of Fireworks object management. Layers help you organize objects with folders. All the objects in the document (States included) are stored and organized in Layers and the Layer panel is the control center for layers. A layer on a Fireworks page is subdivided in sublayers and can hold many different types of objects: vector drawings, text or bitmap images. Every page in a Fireworks document can contain as many layers as you want. And each layer can be hidden or locked.

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.



Figure 4: Ordering objects

Here the square is on the bottom, the circle is in the middle and the triangle is on the top. This order is mirrored in the Layers panel.

6. States

States are a powerful tool but unlike Layers they contain no objects, they are like selectors. When you click on State 1 it can show you, a version of a UI, and State 2 another version, etc. Like a slideshow.

When you create a new State it is as if you were creating a new document: the canvas and the layers are empty until you populate them with some objects. As a result, you will have a Layer 1 from State 1 and a Layer 1 from State 2, etc. And both layers can have different objects.

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,



Figure 5: States Panel