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.
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).
Figure 1: Pages panel
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.
Figure 2: Scaling examples and 9-slice scaling guides
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.
Figure 3: Hierarchical layers
Use the components commonly used in Adobe Flex™ to lay out and prototype Flex applications directly in Fireworks CS3 (see Figure 4).
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™.
Figure 5: MXML output from Fireworks CS3 when opened in Flex Builder
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.
Figure 6: Exploring files and folders in Adobe Bridge
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).
Figure 7: Photoshop 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.
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).
Figure 8: Common Library
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.
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).
Figure 9: Shapes panel
Figure 10: Styles panel
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.