Introducing Adobe Fireworks CS5

It is my pleasure to take you on an in-depth tour of Adobe Fireworks CS5 and the many things that we have done to improve it. I can sum up the essence of this release in three words: stability, performance, and polish.

Focus for the release: stability, performance, and polish

For Fireworks CS5, more than with any other release in our history, we listened to our users. They told us that we needed to make sure Fireworks had rock-solid stability and reliability, and that we needed to refine the existing features before thinking about new ones. That's exactly what we did, and the results are impressive. Fireworks CS5 installs faster, launches faster (see Figure 1), responds to input faster, saves and loads files faster, and uses less RAM.

Here are some statistics on this version:

Quality and stability

• 900+ bugs fixed
• 110 improvements to increase reliability
• Recovered files feature for Mac OS

Performance improvements

• More responsive contextual user interface
• Installation times improved by 17–42%
• Uninstall times reduced by 36–79%
• Installation footprint reduced by 7–10%
• Cold launch times improved by 3–9%
• Warm launch times improved by 30–32%
• Memory consumption reduced by 2–16%

Polish

• More than 100 improvements and added refinements

More than 35 new features

• Adobe Creative Suite integration
• Workflow efficiency
• Enhanced extensibility

Quality improvements in Fireworks CS5

Quality and compatibility were the highest priorities for Fireworks CS5. The engineers added support for modern operating systems and fixed all known incompatibilities and bugs with legacy files from older versions of Fireworks:

• Fully compatible with the latest Windows 7 and Mac OS Snow Leopard operating systems
• All known OS-specific bugs, such as the Snow Leopard crash on Quit bug, have been fixed
• Fireworks CS5 is a 32-bit application and works on both 32- and 64-bit operating systems

Text shifting issues

We fixed all of the known Fireworks CS4 text shifting problems. There is one exception: there is a slight shift when converting Point Text objects to Area Text objects and vice versa. This is a limitation of the Adobe Text Engine, which treats Area and Point Text objects differently. In each, there are different values for the gap between the glyphs and the bounding box.

Legacy file support

Some of the improvements we made in Fireworks CS5 require a legacy file (a file created in older versions of Fireworks) to be saved once in Fireworks CS5 before you can see the improvements. The Preview feature in the Open and Import dialog boxes is one example, as are conversions of text from the old text engine to the Adobe Text Engine. There are others too. For example, once they are saved in Fireworks CS5, your legacy Fireworks PNG files will open and close faster, and performance will be improved while you work with them.

Recovered files (Mac OS only)

To provide even more safety and protect against data loss, we implemented a Recovered Files feature for Fireworks CS5 on Mac OS X. If Fireworks should crash, a recovered copy of your open files will be saved into a Recovered Files folder on your Mac's desktop.

New features in Fireworks CS5

Most of the new features in Fireworks CS5 are designed to provide greater integration with the Creative Suite products, improve workflow efficiencies, and improve on the major use cases for Fireworks.

Pixel-perfect precision

Fireworks is well known for its precise drawing tools and ability to preview and see exactly what your design will look like on the screen. We improved the precision of Fireworks CS5 by adding a new Snap to Pixel feature (Modify > Snap to Pixel), which snaps the anchor points of vectors to the nearest pixel boundaries, resulting in cleaner lines. Other tools have been improved for a greater degree of precision, and useful features have been added to the Properties panel so they're easier to find and always available (see Figure 2).

Integration with Flash Catalyst and FXG 2.0 support

Adobe Flash Catalyst CS5 is a new interaction design tool for the Adobe Flash Platform. In Fireworks CS5, we updated our support for the new FXG 2.0 graphics file format and added lots of improvements. Once you export an FXG file, you can take it into Flash Catalyst where you can then add structure and interaction (see Figure 3).

FXG and Images is now a first-class citizen in the Fireworks CS5 Export dialog box (see Figure 4), where you can choose to export the current selection on the current page, entire current page, or whole document (all pages). Very good fidelity is maintained, preserving vectors whenever possible, and rasterizing to preserve the visual fidelity when necessary. FXG files exported from Fireworks CS5 can be imported into Flash Catalyst CS5, Adobe Flash Professional CS5, Adobe Illustrator CS5, and Adobe Photoshop CS5, and can be used by Adobe Flash Builder 4. FXG is an open file format, which can be extended by the community. FXG graphics are written into an XML text file, which means that they can be searched, indexed, diff-ed, scripted, and checked into source code control repositories.

Adobe Device Central integration

Designing for mobile is something that designers are increasingly being asked to do. It can be a bit overwhelming trying to get started but we have some very good news. Whether you're designing for a particular mobile platform such as Google Android, Palm webOS, Apple iPhone, or Flash, Fireworks has the design tools you need to create beautiful mockups and optimized, screen-ready graphics quickly and efficiently. The Fireworks skills you honed over the years are going to serve you well as you venture into mobile, and we're now including Adobe Device Central CS5 with Fireworks CS5 (see Figure 5):

• File > Device Central launches Adobe Device Central
• Create New Document in Fireworks starts a new Fireworks project based on the device profile

• File > Preview in Device Central sends the current page to be displayed in the Emulator (see Figure 6)

Adobe Flash Player 10.1 will enable mobile devices to display the same rich content that desktops can display, and a steady flow of new mobile devices are coming to market with the full capabilities of Flash Player. Flash Professional is going to help deliver SWF-based content on a multitude of devices, and Device Central will be kept updated with new device profiles automatically as they become available.

Shareable design templates

While we've supplied a few basic design templates in Fireworks CS5, the real power of this feature is in creating and sharing your own templates. For example, let's say you work on a team at a small design firm and struggle to keep everyone producing consistent work that represents your company well, or maintains style guidelines. You can now create your own templates for your typical project types, pre-embedded with your symbols and assets to ensure that all designers will work from the same base and produce consistent work. Use this with the File > Send to Email > Fireworks PNG feature to easily distribute new templates. The designers that receive your template can simply select File > Save as Template to add it to their own templates. To start new work from a template, just click Create New From Template (PNG) on the Welcome Screen (see Figure 7).

Adobe Swatch Exchange (ASE) file support

Fireworks CS5 now exports and imports ASE files (.ase extension) using the Swatches options menu in the Swatches panel. ASE files can be shared among Fireworks, InDesign, Illustrator, Photoshop, and Adobe Kuler.

Compound Shape drawing tools

Fireworks CS5 has new Compound Shape vector drawing tools in the Properties panel (see Figure 9). You can now edit compound shapes more easily and draw in compound shape "modes." Drawing complex vector shapes has never been faster and easier. Also, unlike Path operations like Punch, Add, etc., the Compound Shape tools preserve the vector objects so they can be easily re-edited later.

Extensibility improvements

Fireworks is known for its rich extensibility for developers and scripters. In Fireworks CS5 we added many new APIs, allowing access to new features and creating new opportunities to extend Fireworks for proprietary and custom workflows. (See Extending Fireworks CS5 in the online help for more detailed information on how to extend Fireworks. The end of this article also lists the new APIs.)

Workflow improvements in Fireworks CS5

In addition to the performance improvements and new features, we did a lot in Fireworks CS5 to improve your workflows.

General user interface improvements

• The Properties panel is much more responsive
• Width and height proportions can now be constrained directly in the Properties panel; no need to open Numeric Transform to constrain (see Figure 10)

• In the Color Picker you can now copy a hex color value to the Clipboard
• Shift+Select now works properly when guides are visible
• Grid size settings are now global, and can be overridden for each document
• The Align panel can be used to align to an object or the canvas (improved wording)
• Double-byte fonts (Japanese, Korean, Chinese, Hebrew, Arabic, etc.) are more logically organized in the Fonts menus

Stroke improvements

• The Properties panel now has the Stroke Alignment buttons surfaced for easy access; no need to dig into Stroke Options to find them (see Figure 11)

• Stroke attributes like color, size, alignment, and others are now remembered across documents and across app relaunches (in earlier versions, the attributes always reverted to default on relaunch and with each new document)

Gradient improvements

• Linear and Radial gradients now can have Gradient Dithering applied to help smooth them out and reduce banding (see Figure 12). This is especially helpful when exporting graphics with tighter compression. This is available in the Gradient Editor and also in the Properties panel when a gradient filled object is selected.

• The Gradient editor now has a Reverse Gradient button which reverses the color stops in the gradient (see Figure 13)

Adobe AIR file support

Fireworks CS5 now supports the latest version of Adobe AIR 2 for creating AIR files. The AIR runtime and SDK are easily installed and the process is started by simply choosing Commands > Create AIR file.

Slicing

• Because slice names are now case-sensitive, you can rename slices by just changing the case of letters in the slice name
• A timesaving new feature allows you to Copy and Paste Attributes between slices (see Figure 14)

Pages improvements

• Preview button allows viewing a document's pages when importing/opening a Fireworks PNG file without having to open the file (see Figure 15)
• Import a single page from a closed file and place it precisely in the open file, making it easier to combine pages from multiple files (also see Figure 15)

• There is now smarter page naming when a page is duplicated: the copy is named "PageName"+ "Copy", and if the new page is duplicated, it is named "PageName"+"copy 1" (instead of "PageName+copy+copy")
• The new Numbering menu item in the Pages panel options menu removes the default numbering shown next to the page names
• Because you can now export selected page(s) from the Pages panel options menu, and when right-clicking on a page in the Pages panel, you can easily omit the master page
• The Pages drop-down menu is disabled until there is more than one page in the active document

Layers improvements

• Text layers in the Layers panel now have a "T" icon (see Figure 16)

• When an object is selected, the parent layer containing it also gets selected, which makes it much easier to locate in the Layers panel, even if the parent layer is collapsed

Export options enhancements

• When exporting layers to files, states to files, or pages to files, the new filenames can be customized and exported with predefined optimize settings (see Figure 17)

• When exporting HTML, you now have the option to enter custom state names in the HTML Setup dialog box–useful when exporting for jQuery-based state naming, or other custom naming

Photoshop PSD import and export improvements

• We added the ability to force flattening of adjustment layers when importing PSDs, which you can enable/disable in the Preferences
• Hue, saturation, and color blend modes and the Hue/Saturation filter in Fireworks CS5 now use the same algorithms as Photoshop to improve color fidelity and appearance
• Import gradients from Photoshop (maintain editability):
  • Linear to Linear (close to perfect match)
  • Radialto Radial (close to perfect match)
  • Reflected to Bars (close to perfect match)
  • Diamond to Rectangular (approximate match)
  • Angle to Conical (approximate match)
• Export gradients from Fireworks to Photoshop (maintain editability):
  • Linear to Linear (close to perfect match)
  • Radial to Radial (close to perfect match)
  • Bars to Reflected (close to perfect match)
  • Rectangular to Diamond (approximate match)
  • Conical to Angle (approximate match)
  • Ellipse to Radial (approximate match)
  • Ripples to Radial (approximate match)
  • StarBurst toShapeburst (loosely matched)
  • Contour, Satin, Waves to Linear (loosely matched)

Illustrator Copy and Paste fidelity improvements

In Fireworks CS4, pasting from Illustrator resulted in primarily preserving the vector shapes and not many attributes. Fireworks CS5 now uses an embedded "headless" Illustrator engine, which means better fidelity for gradients, attributes, and properties of objects that you copy from Illustrator and paste into Fireworks.

Text layout improvements

Fireworks contains the mighty Adobe Text Engine, which is shared with InDesign, Photoshop, and Illustrator. For Fireworks CS5, we have added some terrific refinements to text handling:

• Ability to multi-select, non-contiguous text characters inside a text block. After selecting some text characters in a text object (point text, area text, or text on or in a path), press the Shift key and then click and drag to select additional characters. This allows non-contiguous text selection. You can then apply changes to the selection such as typeface, style, color, etc. (see Figure 19).

• Ability to select similar characters inside a text block. (This works very well for rapid selection of the text you just changed as above.)
  • Press Alt/Option and then double-click on a single word/character that has styled attributes (bold for example) to select all other words/characters with the same attributes present in that text block.
  • Press Shift+Alt/Option and then click any word to get that word added to the already made selection.
  • Press Shift+Alt/Option and then double-click any word/character with another styled attribute/properties to add all such second type of similar characters to the previous selection made, and so on.
  • Press Alt/Option and then click any word in the selection to deselect that word from that selection.
• Ability to undo changes at the character level while still in text editing mode. In Fireworks CS4, we were able to undo changes made to the text element at the object level. In Fireworks CS5, all the changes done while in text editing mode (even typing characters) are stored internally and can be undone by pressing Control/Command+Z and redone by pressing Control/Command+Y.
• Improved kerning and tracking. Kerning between characters can be changed by keeping the cursor in-between and pressing the keyboard arrow keys. The Kerning slider's upper limit has been increased to 200. There are several ways that kerning/tracking values can be changed:
  • By keeping the cursor between any two characters, increase/decrease the Kerning value by 10 points using Control/Command + Left/Right arrow keys or by using the slider in the Properties panel.
  • By keeping the cursor between any two characters, increase/decrease the kerning value by 100 points using Control/Command + Shift + Left/Right arrow keys or by using the Kerning slider in the Properties panel.
  • By selecting a range of characters inside a text block, increase/decrease the Tracking value by 10 points using Control/Command + Left/Right arrow keys or by using the slider in the Properties panel.
  • By selecting a range of characters inside a text block, increase/decrease the Tracking value by 100 points using Control/Command + Shift + Left/Right arrow keys or by using the slider in the Properties panel.
• Legacy text object support. When opening Fireworks CS3 documents containing text objects in Fireworks CS5, the Kerning/Tracking values will now be correctly and automatically mapped to the new Adobe Text Engine, and the look will be preserved.
• Text overflow indicators. Fireworks CS5 has a new text overflow indicator that is shown when there are extra characters that do not fit in text boxes, text-in-path, and text-on-path objects (see Figure 20).

• Text blocks can now have line breaks even if there is a paragraph break. If a text block contains paragraph space settings, pressing Enter/Return will take the cursor down, using the paragraph space settings. The paragraph space settings can now be overridden by pressing Shift+Enter/Return to take the cursor down to the next line.

CSS export improvements

We introduced the CSS Export feature in Fireworks CS4 for exporting standards-based CSS layouts for the purpose of prototyping websites. For Fireworks CS5, there's an impressive list of improvements, in no particular order:

• Exporting multiple pages at once (current page, selected pages, all pages) to HTML and CSS
• Tagging of text objects by tag name to output the text with a particular tag for improved semantics
• Standardizing the attributes of all of the Common Library symbols (color, font family, size, style, weight, and line-height)
• Adding the Text Area symbol for improved form prototyping
• Adding the List Item symbol to allow for the creation of unordered lists/unordered lists of links
• Outputting intelligent hex codes for all colors using shorthand notation (#fff) where appropriate and lowercasing
• Multiple paragraph elements are now created from a single text object where appropriate, as opposed to using breaks
• Alphabetizing as many CSS rules as possible
• Recalculating all font sizes to use percentages (%) to allow for text resizing in all devices
• Divs with heights also now have min-height equivalents to allow for text resizing and any amount of content
• Divs with all border placements and sizes now output at the correct size and positioned more correctly
• Visited, hover, and focus link styles all inherit standard link formatting
• Removed heights on form elements to allow for the browser to define their height
• Improved background slices to take advantage of the original background color to allow for text resizing/larger content
• Outputting selects with the options specified in the symbol's properties
• Correctly grouped radio buttons
• Adding display: inline on all floated elements to prevent IE 6 double-margin float bug
• Replacing <br> with <div> tags to clear floats so unstyled users don't have unnecessary line breaks
• All lines are now output at their correct position

Legacy rendering

Some experienced Fireworks users may prefer to see their objects rendered the old way. Whichever method looks better often depends on the artist and the look they're going for. We added the ability to force the desired rendering style in Fireworks CS5:

• Commands > Selection > Use Legacy Vector Rendering (Sharper)
• Commands > Selection > Use Improved Vector Rendering (Smoother)

Miscellaneous improvements

• A new File > Save All command saves all open files at once
• The Eraser tool is more accurate
• Styles can now be applied to rounded rectangles, groups, and autoshapes, and new styles can be defined based on these kinds of objects
• Opening transparent 8-bit PNG files no longer sets transparency to None
• After you install new fonts, there's no need to restart Fireworks before they can be accessed (Windows only).
• Align panel remembers its settings (because Fireworks CS4 forgot them, you had to reset them each time you opened the Align panel)

Fireworks CS5 is a 32-bit application

As modern operating systems move forward to a mostly 64-bit world, it is only expected that all applications move along in that same direction. For Fireworks CS5, we made sure that it is fully compatible with both 32-bit and 64-bit operating systems. Although Fireworks CS5 is a 32-bit application, you will see benefits from running it on 64-bit operating systems with extra RAM.

Extensibility improvements

For developers who can script using JavaScript, and who may want to compile extensions for Fireworks, we've made many improvements to the extensibility features. (For more information on extending Fireworks, please see Extending Fireworks CS5 in the online help.)

The following APIs and improvements have been added to Fireworks CS5:

• Fireworks now properly stays in the background when batch processing (no longer tries to steal focus)
• dom.snapToPixel()
• fw.exportFXG()
• fw.exportPages()
• fw.setPref("OpenNewDocumentsAsTabs", true)
• dom.exitSymbolEdit()
• fw.getDocumentDOM().VectorOperation = "intersect" // other supported parameters: punch, union, none (to set in the Properties panel)
• fw.appTemplatesDir (prop)
• fw.associat.jpgwithFw
• fw.saveDocumentAsTemplate
• fw.saveDocumentAsTemplateAsync
• fw.newDocumentFromTemplate
• fw.newMobileDocument
• fw.previewInDeviceCentral
• dom.InsertPageForImport
• dom.setPathOperation("punch")
• dom.createCompoundShape("punch")
• fw.getDocumentDOM().combineCompoundShape(); // to combine compound shapes
• dom.setTextLeadingMode
• dom.rotateGradientHandles
• Element Object, locked property added (usage: fw.selection[0].locked)
• Path Object, pathOperation property added (usage: fw.selection[0].pathOperation)
• Gradient Object, dither property added (usage: fw.selection[0].pathAttributes.fill.gradient.dither)

Where to go from here

If you read all the way to this point, I'm sure you'll agree that Fireworks CS5 is a very strong release. It will be a reliable workhorse for you, day in and day out. We hope it serves you well as you take on new challenges and grow as a professional.

Besides the Fireworks Developer Center, there are many useful resources available on the web and within the vibrant and generous community of Fireworks users. Join them, and be sure to give a little something back to the community:

• Adobe Fireworks user community forums
• Total Training Fireworks video training
• lynda.com Fireworks video training
• Fireworks videos on Adobe TV
• Fireworks books on Amazon.com
• Adobe Fireworks fan page on Facebook
• Twitter: #Fireworks CS5, @brucebowman
• Fireworks team blog
• Adobe Fireworks Exchange
• An Explosion of Adobe Fireworks Resources (article by Melissa Scroggins on Noupe)
• video2brain training videos (European languages)