back

Fireworks CS3: Top 10 new features

by Alan Musselman

This article originally appeared in the Fireworks Developer Center.

Having worked on the Fireworks® team at Macromedia prior to the merger, I felt good about being involved with such a great vector and bitmap graphics editing tool that had held its own against similar tools on the market. In fact on a personal level, I owe Macromedia and the Fireworks community for helping me make an honest living for the last 10 years as a professional web developer. I used Fireworks four to five hours a day — if not 10 to 15, depending on the scope of the project.

Now I am a full-time Fireworks product specialist, and I am happy to report that the Fireworks team has done an outstanding job completely revamping the product. For example, Adobe® Fireworks CS3 now works on Intel® based Macs, integrates with Adobe Photoshop® CS3 and Illustrator® CS3 software, offers a common library of prebuilt assets, and includes new features such as pages and 9-slice scaling. In this article, I share my top 10 favorite new features.

1. Pages

The implementation of pages in Fireworks CS3 leaves frames for what they are best suited: time-based animations and JavaScript rollovers. You no longer need to use frames to store website layouts or mockups. A single document can now contain multiple pages, representing a website design or web application with its own slices, rollovers, image resolution, and canvas sizes.

Being able to quickly create links between pages lets you show user interaction on your website and RIA layouts. By combining several pages in one document, you can share layers across pages and even cycle through pages using keyboard shortcuts or the Quick Jump menu located in the canvas window (see Figure 1).

screenshot

Figure 1: Pages panel

2. 9-slice scaling

I'm so relieved to finally use 9-slice scaling on symbols in Fireworks CS3. This feature solves the problem you encounter when scaling vector and bitmap objects. Instead of distorting bitmap or vector objects, intelligent scaling enables you to define parts of the object to scale and retain regions that shouldn't be scaled (see Figure 2). This new workflow effectively eliminates the tedious task of splitting a bitmap into three or nine different bitmap objects, which requires you to scale the layout to fit more content — content that was not considered during the initial design phase.

screenshot

Figure 2: Scaling examples and 9-slice scaling guides

3. Hierarchical layers

A complete revamp of the Layers panel now allows individual layers to contain multiple sublayers (see Figure 3). This means you can now easily name and organize the most complex mockup into sublayers without reorganizing an imported Adobe Photoshop or Illustrator file; hierarchical layers are preserved and retained for further editing.

screenshot

Figure 3: Hierarchical layers

4. Adobe Flex integration

Use the components commonly used in Adobe Flex™ to lay out and prototype Flex applications directly in Fireworks CS3 (see Figure 4).

screenshot

Figure 4: Flex application designed in Fireworks CS3 using Flex components out of the box

Designers can simply export MXML (see Figure 5), CSS, and images — and hand them off to developers to wire up the application in Flex. Fireworks preserves the layout and styling of the components when they're imported into Flex Builder™.

screenshot

Figure 5: MXML output from Fireworks CS3 when opened in Flex Builder

5. Adobe Bridge CS3 integration

A new experience for most Fireworks users, Adobe Bridge CS3 offers a unique way for you to explore files and folders (see Figure 6). Add XMP metadata in Bridge and edit the data later in Fireworks or Bridge. You can also use commands and batch process images with Bridge.

screenshot

Figure 6: Exploring files and folders in Adobe Bridge

6. Adobe Photoshop CS3 integration

Fireworks CS3 offers a whole new level of integration. You can now work with popular Photoshop blend modes such as Dissolve, Linear Burn, Linear Dodge, Vivid Light, Linear Light, Pin Light, and Hard Mix. These newly supported blend modes and Photoshop layer effects are maintained when importing or exporting PSD files (see Figure 7).

screenshot

Figure 7: Photoshop integration

7. Adobe Illustrator CS3 integration

Having to save Illustrator files back to an older version and re-create the effects and artwork in Fireworks has always been a challenge for Fireworks users. The improved workflow with Illustrator CS3 is incredibly rewarding. Simply open (or import) a native Illustrator file in Fireworks CS3. Even better, this new import capability supports Illustrator patterns, layer structure, transparency, and even linked images.

8. Common Library

Easily store and access rich symbols — including button, graphic, and animation symbols — in a centralized location in Fireworks CS3. To keep designs consistent across your projects, easily add them to the Common Library using the Save in Common Library command. This is also a great way for a team to standardize on a specific component library (see Figure 8).

screenshot

Figure 8: Common Library

9. Rich symbols

Increase your productivity by using new, prebuilt rich symbols to control the various states of user interface components for websites, Flex applications, and Flash® mockups. Easily modify the properties of a rich symbol in the new Symbol Properties panel without needing to know which layers to turn on or off and without having to ungroup the objects to make edits.

A rich symbol is essentially a graphic symbol with customizable properties courtesy of a small JavaScript file. There's even a command that will generate the basic JavaScript for you if you do not feel comfortable with scripting. Finally, you can now swap symbol instances, which you could not do in Fireworks 8 or earlier.

10. Commands, auto shapes, and styles

Thanks to the Fireworks community, Fireworks CS3 has two new command panels, nine new text commands, 16 new auto shapes (see Figure 9), and an updated Styles panel (see Figure 10).

screenshot

Figure 9: Shapes panel

screenshot

Figure 10: Styles panel

Among the new command panels are the Path panel, which gives you more power when editing vector objects; the Color Palette panel, which enables you to explore and design color schemes as well as create custom color palettes; the Create Slideshow panel, which lets you produce slideshows based on Spry, HTML, or Flash; and the Create Symbol Script panel, which generates JavaScript automatically when you create or customize rich symbols.

Conclusion

I hope you're excited about the new features in Fireworks CS3. This article merely highlights some of the new features of the latest release. For more detailed information, check out the Fireworks CS3 product page and feature tour.


Alan Musselman is a Fireworks product specialist. When he's not visiting customers and monitoriing the Fireworks forums, Alan enjoys snowboarding, skateboarding, and hiking around California.