Home
Subscribe
KSDD.com
First Look: Adobe Fireworks CS3
New name, new focus
With the release of the Adobe CS3 line, many questions have been answered with respect to which former Macromedia products would stay and which would go. As it turns out, the big M lives on in a big way in the various CS3 releases, and the focus of our first look piece today effectively sounded the death knell for ImageReady. Fireworks CS3 is the replacement, and with the new name and new version come few new features but an entirely new focus. Let's take a sneak peek at what's new and notable in Fireworks CS3.
What's old is new again
In general, other than adopting the Adobe and CS3 names, Fireworks CS3 isn't a whole lot different than previous versions. Put simply, Adobe Fireworks may as well still be Macromedia Fireworks (fig. 1):
Figure 1
As you can see, the interface is still very Macromedia-esque, and the new Adobe CS3 interface that Photoshop CS3 Public Beta testers are likely used to by now (and which was applied to Flash CS3) is nowhere to be found. Anyway, without belaboring the point, it's useful to know that what was true in previous versions of Fireworks is true for the CS3 incarnation. For those not familiar with Fireworks, the program historically has featured:
- Adeptness at handling both vector and bitmap images
- Non-destructive effects (which are now known as Live Filters in CS3)
- Support for easy conversion of artwork into HTML/CSS-based Web sites
- Animation and interactive authoring tools
- Batch processing for repetitive tasks
- Probably the best and most flexible Web image export engine ever conceived, especially when it comes to JPEGs
...Just to name a few. In short, Fireworks CS3 is pretty much the same Web image creation and optimization product it's been since at least the beginning of the century. What that ultimately means, however, largely depends on who you are. If you go way back with Fireworks, you'll likely be relieved at the continuity (not to mention the fact that it beat out ImageReady). However, if you've been using the newly deceased ImageReady, you may be thrown for a bit of a loop when attempting to grapple with the old-school Macromedia interface (fig. 2).
Figure 2: Panel groups, not "true" tabs, still rule the roost.
Regardless of your feelings on whether or not Adobe should have retained the old interface, it should come as welcome news to just about everyone that Fireworks, like the rest of the CS3 line, is compiled as a Universal Binary for the Intel Mac adopters amongst us, while the Windows faithful should rest easy in knowing that Fireworks CS3 and its CS3 brethren are ready for Windows Vista.
A new purpose in life
Part of the subtitle of this piece is "new focus," which refers to the fact that Adobe is keen to have you use Fireworks as a prototyping tool. To that end, many of Fireworks CS3's new features are in keeping with the new marching orders:
Pages. Fireworks CS3 adopts a paradigm usually reserved for print programs like InDesign: pages (fig. 3). The workflow goes something like this: say you're mocking up a Web site. So you bring your artwork into Fireworks (or create it there from scratch, of course, using Fireworks' bitmap and vector creation tools), designate a page as a Master page, create a few other pages, share layers between pages for common interface elements (fig. 4), set up a few hotspots that reflect the names of your various pages (fig. 5), and export out all of your pages to working, hotlinked HTML pages (fig. 6) that your client can navigate as if it were a working Web site. Fireworks CS3 also can serve as a mockup tool for Adobe Flash, but we'll go over that in just a bit.
Figure 3
Figure 4: The yellow layers represent ones that are shared across multiple pages.
Figure 5: Creating hotspots (top) with named pages (bottom, right) will yield clickable HTML-based mockups when exporting from Fireworks.
Figure 6: Hotlinked HTML and images, ready for customer perusal.
"Rich" symbols. Fireworks CS3 makes extensive use of symbols as part of the effort to refocus the product as a prototyping tool. Fireworks CS3 introduces the Common Library (fig. 7), which includes several categories of pre-made symbols suitable for use in interface mockups, presentations, flowcharts, etc. (fig. 8).
Figure 7
Figure 8
Once you have a rich symbol placed on the canvas, you can head for the new Symbol Properties panel (fig. 9) to tweak whatever settings are available for the specific symbol you've selected.
Figure 9
Of course, you're free to build your own symbols and save them to the Common Library. It helps if you're comfortable with JavaScript, since you're not going to get all the options in the Symbol Properties box without being able to script the changeable parts.
Scale-9. Those familiar with 9-slice scaling (or "Scale-9") from Flash 8 will welcome its inclusion in Fireworks CS3. Any rich symbol dragged over from the Common Library can be scaled in blissful distortion-free fashion by setting up Scale-9 guides in the Symbol Editor (fig. 10). An added bonus is that when importing Fireworks-created PNG files into Flash CS3, your Scale-9 guides are retained and respected.
Figure 10
Integration. In keeping with the prototyping tool theme, Fireworks aims to play nicely with its various new neighbors. We've already mentioned that Flash imports Fireworks' Scale-9 guides when importing a Fireworks PNG file into Flash, but it's worth noting that Flash retains all Pages and shared layers upon import as well.
Fireworks' support for Photoshop files has also been improved to include support for more layer effects and blend modes (fig. 11). Photoshop layer effects can now also be applied directly to images in Fireworks, and you can now also save out PSD files from Fireworks while retaining layer information.
Figure 11
Illustrator files can now be opened in Fireworks CS3 with greater compatibility with the source AI files. Attributes like correct RGB colors, gradient fills, layers, linked images, pattern strokes and fills, and clipping masks (among others) are all retained when opening Illustrator files in Fireworks.
Fireworks even offers something for you Flex Builder users. By including Flex widgets in the Common Library, you can lay out Flex interfaces in Fireworks, which then even writes out the proper MXML code for you for quick and painless import into Flex Builder.
Of course, it goes without saying that longtime siblings Fireworks and Dreamweaver have historically shared a very close working relationship, and continue to do so in the CS3 incarnations of each product, though there aren't any major new features to report with respect to how the two work together.
But wait! A new feature not directly related to prototyping!
Fireworks CS3 now comes with a pretty slick Flash-based slideshow builder (which also has a non-Flash setting if you are so inclined). There were extensions that accomplished similar effects in Fireworks 8, but CS3 now includes this functionality out of the box. Simply select open images in Fireworks (or a folder of images from your hard drive), load up the slideshow command, fiddle with a few settings, and viola! Instant slideshow (fig. 12).
Figure 12
That is all
Well, that pretty much wraps it up for what's new in Fireworks CS3. Overall, the theme seems to be Adobe's re-focusing of Fireworks as a targeted prototyping tool that complements its adopted Adobe siblings, so if you take one thing away from this piece, make it that. For now, know that Fireworks CS3 is slated to ship sometime in April, and you can get a hold of it in several ways:
- As a standalone product ($299 new or $149 upgrade from Fireworks MX or later)
- As part of the following suites:
- CS3 Web Standard ($999 new or $399 upgrade from Macromedia Studio MX or later)
- CS3 Web Premium ($1599 new or $499 upgrade from Macromedia Studio MX or later)
- CS3 Master Collection ($2499 new or $1999 upgrade from Macromedia Studio MX or later)
Of course, I urge you to visit Adobe's Web site for the full product offering and upgrade pricing matrices. And naturally, we'll check back in after the various CS3 suites ship with a full review of the actual released product, so stay tuned.
Got Feedback? to send an email. I'll do my best to answer. Really.