Fireworks Basic Document Structure

Fireworks’s document structure is a little strange if you are not familiar with it, but it is really powerful. I made a little picture to explain the basic file structural elements.

All Fireworks files contain at least one page, one state, and two layers. This is the basic structural setup of a Fireworks document.

PAGES

Pages are the top level structural element for our document. All your assets are belong to a page. Think of pages in Fireworks as you would pages on a website, or pages in a book.
• Multiple pages are supported.
• Pages can be different sizes.
• Assets can be selectively shared across multiple pages.

STATES

A “State” is a particular iteration of a given page. A web button may have multiple states, such as ‘rollover’ and ‘click’. These variations can be created as states. Simple web animations can also be created by using states.
• Multiple states can be created for each page.
• Assets can be shared across states.

LAYERS

Layers are the structural element that contain the actual assets. In Fireworks, Layers have a folder icon, while individual elements are contained within the layer.
• Web Layer is a default share layer for image slices.
• Layer 1 is the default blank initial layer.
• Layers are NOT shared across states by default.
• Layer assets can be shared across States or Pages.

PROPERTIES PANEL

The Properties Panel is a context sensative panel that provies formatting options for a given selection. The properties panel is responsible for controling the Character and Paragraph appearance, Stroke and Fill, Transparency and Filters.

Fireworks and Greeked Text (Wire Frames)

So you are mocking up a wire frame of a website and you need some fake greeked text. Well, John Dunning has come up with an Auto Shape that works great for that. Auto shapes aren’t just vector shapes, they are vector shapes that can be controlled with Javascript. This means you can change the appearance of the auto shape through these control points. To install this auto shape, go to:

http://johndunning.com/fireworks/about/GreekedText

Once it’s installed, you will see it in your auto shapes panel. It’s also accessible through the file menu via Commands > Greeked Text

Using Button Symbols for Section Headers in Fireworks (Wire Frames)

You can use button symbols to create customized section headers when building wire frames in Fireworks. Using a symbol lets you have some global editability over that part of the page.

1. Make a Button Symbol with a text field.
   Button symbols can support one text field.
2. When you apply the symbol, you can customize the text string in the properties.
3. Buttons automatically have rollovers applied, to make sure to change the states.
   Double Click to to go Edit Symbol Mode.
   Use the “Copy Up Graphic” button.
4. Apply to the multiple pages in your wireframe.

Fireworks: Share Layers to Pages

Even though you only get one master page in Fireworks, there’s other ways to share assets across pages. For example, you can set a layer across different pages!

• Make sure it’s a main layer and not a sublayer
  • Sublayers are then automatically shared
  • The Web Layer is an exception, which can share sublayers.
• States for the layer will be shared too, so make sure the shared page has the same number of states.
• The Share Layers to Pages dialog box determines which pages are sharing the layer. You can go back and edit this after
• There is not “parent” page that hosts the layer. They have the same hierarchy. Whatever you change on one will affect the others.

Fireworks: Master Pages

Master Pages in Fireworks does what you think it would do, with some restrictions…

• Set and Reset Master Pages from the Pages Panel
  •     There can be only one
  • Does not accomodate pages that are different sizes
• Master Pages show up on regular pages as a “Master Page Layer”
• Master Page Layers are
  •     On the bottom of the stack
  •     Locked and uneditable
  •     Can be turned on or off

Blend Modes Show Down (Fireworks, Photoshop, Illustrator, InDesign)

Fireworks wins with many many blend modes!

Fireworks: Effects Vs. Live Effects

It’s common knowledge that live adjustments (adjustment layers, layer styles, smart filters, life effects) are better than boring old ones because you can tweak the settings afterward and they are non-destructive. It’s also common knowledge that you usually get fewer of them to play with than your destructive filters. But in Fireworks, there’s actually MORE options available as Live Effects than as regular effects! The graphic highlights the extra features available! Go Fireworks!

Fireworks: Text Selection

Fireworks runs on the same text engine as all the other Adobe programs (that I use), but it’s got a couple of interesting features that I haven’t seen in other programs.

• Shift+Click & Drag: Select a discontinuous range of text
• Alt/Opt + Double Click: Selects text with similar properties within the text frame.

Fireworks: Basic Symbols

If you already know about symbols from Flash or Illustrator, there’s not much new here. But here’s the basic breakdown of symbol types in Fireworks

Fireworks: Compound Shapes

Compound Shape controls in Fireworks is found in an object’s Properties panel, instead of having a panel of it’s own. What’s really nice about Fireworks’ compound shape tool is that you can create the shape as you draw (like Photoshop) or combine/subtract shapes after the fact (like Illustrator).

To make a compound shape as you draw

• Draw your initial shape.
• Select a compound path mode from the properties panel.
• Draw your additional shapes.
• The newly drawn shapes will automatically be created as part of a compound shape.

To make separate shapes into compound shapes

• Select the multiple shapes with the selection tool.
• Click on the copound shape mode you want.
• The shapes will be combined into a compound shape.