Introducing Adobe Fireworks CS3

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

When I realized that Adobe would integrate Fireworks with Adobe Creative Suite 3 during the next development cycle, I knew this would mean a great deal for Fireworks developers. One big change would be integration with Adobe Photoshop CS3 and Adobe Illustrator CS3, which meant enhancing existing workflows with an emphasis on mocking up prototypes.

The Fireworks team has done a tremendous job with the release of Fireworks CS3. The amount of passion that the team and beta testers expressed during the development cycle was amazing to witness.

We completely revamped Fireworks to work on Intel-based Macs, integrated complex core libraries while improving performance, enhanced existing workflows, and added new features like 9-slice scaling.

Below is a rundown of the top 10 features that are new to Fireworks CS3. I hope you'll agree that this release is the most significant in the history of Fireworks. But first, let's applaud the great folks on the Fireworks development team (see Figure 1)!

Изображение недоступно

Figure 1. The incredible Fireworks team

Pages

The implementation of pages in Fireworks CS3 leaves frames for what they are best suited: time-based animations and JavaScript rollovers. No longer do you need to use frames for storing 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 quickly show user interaction of your website and rich Internet application (RIA) layouts. The combination of several pages in one document also gives you the ability to share layers across pages and even cycle through pages using keyboard shortcuts or the Quick Jump menu located in the canvas window (see Figure 2).

Изображение недоступно

Figure 2. Pages panel

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 allows you to define parts of the object to scale and retain regions to be not scaled (see Figure 3). This new workflow effectively eliminates the tedious task of splitting up 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 3. Scaling examples (top) and 9-slice scaling guides (bottom)

Hierarchical layers

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

Изображение недоступно

Figure 4. Hierarchical layers

Adobe Flex integration

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

Изображение недоступно

Figure 5. Flex application designed in Fireworks CS3 using Flex components out of the box

Designers can simply export MXML (see Figure 6), 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 6. MXML output from Fireworks CS3 when opened in Flex Builder

Adobe Bridge CS3 integration

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

Изображение недоступно

Figure 7. Exploring files and folders in Adobe Bridge

Adobe Photoshop CS3 integration

The new level of integration in Fireworks CS3 includes working 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 8).

Изображение недоступно

Figure 8. Photoshop integration

Adobe Illustrator CS3 integration

Having to save Illustrator files down to an older version and recreate the effects and artwork in Fireworks was always a challenge for Fireworks users. The improved workflow with Illustrator CS3 is very rewarding. Simply open or import a native AI file into Fireworks CS3. Even better, this new import capability supports Illustrator patterns, layer structure, transparency, and even linked images (see Figure 9).

Изображение недоступно

Figure 9. Illustrator integration

Common Library

Easily store and access rich symbols—including button, graphic, and animation symbols—from a centralized location in Fireworks CS3. To keep designs persistent across your projects, easily add them to the Common Library using the "save in Common Library" menu item. It's also a great way for a single team to standardize on a specific component library (see Figure 10)—solving one of the problems teams encountered before, which was not having a centralized location to store commonly used symbols.

Изображение недоступно

Figure 10. Common Library

Rich symbols

Increase your productivity by using the new, prebuilt rich symbols to control the various states of user interface components for websites, Flex applications, and Flash mockups (see Figure 11). 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—or even having to ungroup the objects to make edits.

Изображение недоступно

Figure 11. Rich symbols

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—something that you could not do previously in Fireworks 8 or earlier.

Commands, auto shapes, and styles

Thanks to the Fireworks community, we implemented two new command panels, nine text commands, 16 auto shapes (see Figure 12), and an updated Styles panel (see Figure 13) in Fireworks CS3.

Изображение недоступно

Figure 12. Shapes panel

Изображение недоступно

Figure 13. Styles panel

Among the new command panels are the Path panel to give you more vector editing power when editing vector objects; the Color Palette panel that allows you to explore and create color schemes, and create custom color palettes (see Figure 14); the Create Slideshow panel to generate slideshows based on Spry, HTML, or Flash; and the Create Symbol Script panel that generates JavaScript automatically when creating or customizing a rich symbol.

Изображение недоступно

Figure 14. New Path panel (left) and Color Palette panel (right)

Where to go from here

I hope you're as excited as I am about the new features in Fireworks CS3. This article merely touches on the highlights of the latest release, so please check out the product page and feature tour for more detailed information.

Автор: Alan Musselman, Adobe.

Написано Март 26, 2007

Комментарии