Top 10 features of Fireworks CS4 from an application designer's perspective

I use Adobe Fireworks almost every day. In what I suspect is not atypical for someone predominantly designing functionality, I make regular use of most of the standard graphic tools out there but I rarely need to go very deep into some of the more esoteric filters that Adobe Photoshop, for example, has to offer. That's what makes Fireworks an excellent fit for me. As you'll probably read elsewhere in product reviews and high-level overviews, Fireworks CS4 comes with some not-to-be-underestimated features—like live gradient display while editing and an improved vector tool set—that will help it catch up to the more-established graphic applications on the market. What I want to discuss here is what actually makes Fireworks better for my everyday work.

This article highlights the top new features in Fireworks CS4 from one designer's perspective and also mentions a few changes you can make to your Fireworks setup to improve its efficiency.

1. User interface overhaul

This may seem nonessential but as a graphics designer, it bugs the heck out of me to use an interface that itself has some graphical problems. This was particularly evident on the Mac, my general platform of choice. Web graphics physician, heal thyself! Fortunately for this release, Fireworks no longer spits in the eye of typographers everywhere. Witness the difference in the Align panels between Fireworks CS3 and CS4 (see Figure 1). Goodbye "C anvas"!

2. New Photoshop compatible text engine

At last, I don't have to explain to another designer why my text is all messed up. Fireworks now gives crisper-looking text (see Figure 2) that is fully compatible with Photoshop so you can exchange files without issue. This fix is very significant for anyone who needs to work with Photoshop files, or for anyone who needs to produce nice-looking type—which would be just about everyone, I imagine.

3. Smart align: another great timesaver

For anyone who has ever had to add a new item to a table or menu, or anything else that consists of aligned items, you just got back at least a few minutes a day. A dotted line automatically appears as you drag to let you know when items are aligned (see Figure 3). If you don't like pink, you can change the color in the Preferences dialog box.

4. Arrow line tool

Combined with smart align, this tool means I no longer feel compelled to leave Fireworks for OmniGraffle or Keynote to draw diagrams. With Fireworks CS4 you can draw a line with the arrow line tool and cycle through different end-point styles by clicking on the end. By contrast, the Fireworks CS3 workflow was a bit more involved: you drew a line, then selected it, selected the menu item Commands > Creative > Add Arrowheads, and then cycled through arrow styles without the benefit of a live display on the canvas.

5. New styles

Thankfully Adobe has replaced the previous collection of styles culled from a late-'90s Photoshop Wow! book with a huge collection of sensible, up-to-date styles that I think both interaction designers and graphic designers will find much more useful (see Figure 4). The wide variety of new styles range from form input styles to tooltip styles, so you can easily draw text boxes and tooltips with the Rectangle tool.

6. Improvements to rich symbols

The Common Library symbols now have an improved symbol properties editor. Along with edit-in-place symbol editing, this makes them a lot easier to work with. In Figure 5, for example, you can see three sample tab symbols. Simply drag them into the document, change the text for the label, and then set the state of the widget (selected, normal, and so on) using a drop-down in the panel.

You can even build on the initial set and easily create your own custom symbols that are styled appropriately to your organization or whatever app or website you happen to be working on. (One tip: just make sure you hit Enter/Return after you edit a property, because just clicking into another field will not save your change.)

7. New color panels (plus Adobe Kuler)

Fireworks CS4 has greatly expanded the options for selecting and working with colors. The single "Mixer" panel has been replaced with three new panels: Selector, Mixers, and Blender (see Figure 6).

To give you even more options at selecting and creating color palettes, the new Mixer panel includes an integrated Adobe Kuler palette (see Figure 7; choose Window > Extensions to find it) for accessing third-party palettes from the wildly popular Adobe online color management tool—or for creating your own. Because the Kuler panel is accessible in other applications across Adobe Creative Suite 4, you can save your palettes online and access them via Kuler rather than passing swatch files around.

8. "Share My Screen..." feature

The credit for this new feature actually belongs to Adobe Acrobat Connect, the artist formerly known as Macromedia Breeze (remember Breeze?) which is now part of the Adobe Acrobat family. It's integrated with Fireworks CS4 from a Window menu command.

For those of you who are unfamiliar with Acrobat Connect, you can now share screens with up to three people for free by logging in to the service (see Figure 8). In an era of ever-more-frequent telecommunication and long-distance collaboration, this is becoming an extremely handy feature for many people.

I use Acrobat Connect daily—for everything from code reviews in Flash authoring to presenting and discussing potential screen layouts with overseas clients. The whiteboarding features even make it possible to collaborate on design work. It shares practically everything on your screen, including tooltips, which some other screen-sharing programs fail to capture. The most important aspect of this new feature, though, is its speed and convenience. Because you have a fixed URL, you don't have to generate random-looking URLs each time you want to share with others. (Props to Adobe for giving it a new name that doesn't sound like a deodorant, too.)

9. PDF export

The interactive PDF export function is a great addition for providing clickable wireframes for presentation or review. Simply set up hotspots like you used to for web links, and link them to pages within the document rather than URLs.

One thing to note: the internal page links appear at the bottom of the list (see Figure 9), and not as clearly differentiated from web links as one might like, so make sure you choose the right one. In a bit of unfortunate Windows-centric behavior, this feature renames all your page names (even the ones referring to internal links) to have ".htm" as a suffix.

For more information about this feature, read Creating an interactive PDF file from a multipage document in Fireworks CS4 by Jim Babbage.

10. "Take screenshot" command

My last favorite feature is aimed more at Windows users, or Mac folks who occasionally switch over. The new "Take Screenshot" command in the Commands menu lets you take a screenshot of anything on the screen and copy it to the Clipboard for easy pasting into Fireworks or another document. Now this may be a small thing, but I really miss Command-Shift-4 when I'm not on a Mac, so I think this will prove to be very useful to people on Windows.

Optimally setting up Fireworks CS4

So those are my initial top 10 favorite new features in Fireworks CS4. Probably like many of you, I am interested in the Adobe AIR and Adobe Flex interoperability too, but this has not hit my workflow yet. I am guessing such possibilities will become a favorite 11th new feature in Fireworks CS4 once Thermo—Adobe's next designer-to-developer workflow tool—comes out.

There are a couple things I recommend you do after you first install Fireworks CS4. They take only a minute, and will probably help you work more smoothly.

First, now that Fireworks has pages, states, and layers, you may find yourself spending a lot of time dancing between these three panels. A great suggestion from a member of the Fireworks team (thanks to Shambhuling Nashi) is to create a workspace that shows all three of these stacked on top of one another (see Figure 10). Just arrange your panels like this and, in the new workspace selection drop-down menu at the top right of your screen, choose "Save current" and give it a name like Page-State-Layer Navigation or whatever makes sense to you. Then you can easily switch to this workspace when you need to move between different pages states and layers.

Second, if you do a lot of presenting of your interaction designs, you may find this tip useful. If you want to navigate between pages and states using key commands, which is handy when you're presenting in full-screen mode, you'll probably want to set up key commands that make sense for you.

Go to the Keyboard Shortcuts item in the Fireworks menu and, in the resulting dialog box, select Miscellaneous in the Commands drop-down menu (see Figure 11). Find Next page, Next state, Prev page, and Prev state in the list and assign them to keys that you can easily remember—such as the left and right arrow plus a modifier key for previous and next pages, and the up and down arrow plus a modifier key for previous and next states.

Now you can go into full-screen mode when presenting, or when reviewing your designs for yourself, and easily move through pages and states. I am hopeful the next version will show us a little more feedback to help full-screen navigation, but this does the trick for now.

Where to go from here

I hope this overview has been helpful to you. To me the tenth anniversary of Fireworks seems more like the first release of a great new program. The interoperability with the other Adobe graphic tools is now where it needs to be thanks to the migration of the text engine and other features. Fireworks CS4 is taking shape as the best tool for designers to use to design applications. It gives you just what you need, and doesn't overwhelm you with unnecessary photo-editing or print-centric features.

• Get started in the Fireworks Developer Center
• Take the Fireworks CS4 feature tour
• Watch the video tutorials on the Adobe TV Fireworks channel