A sparkling future for Fireworks

by Julie Campagna

When two companies like Adobe and Macromedia join forces, customers (and even employees) anxiously clamor for a glimpse at the product roadmap. As you know, the thought of a company no longer supporting certain products can unnerve even the most rock-solid professional.

Nearly a year has elapsed since the acquisition, and still the public forums and blogs are lively with speculation. Will Adobe support Director? Will FreeHand features get rolled into Illustrator? Will Photoshop eat Fireworks? While I have very little insight into our product roadmap, I'm here to report that Fireworks has a sparkling future as both a stand-alone and bundled product.

photo of Danielle Beaumont and Alan Musselmans

Danielle Beaumont and Alan Musselman

In fact, Fireworks 9 is currently in private beta. I recently cornered Fireworks Senior Product Manager Danielle Beaumont and Fireworks Developer Relations Manager Alan Musselman to talk shop. Initially hesitant to let the cat out of the bag, Alan and Danielle finally relented and provided a few details about the next release.

Mock-ups made easy

After a lengthy career at EFI, Danielle joined Macromedia 12 months ago and began working on the next release of Fireworks, which entailed spending time with dozens of customers from around the world to see how they were using the program.

During this research, the product team discovered an interesting trend. "We noticed that people spend a lot of time mocking up variations on web designs for clients," said Danielle. "As a result, a big push for this next release is focused on enabling the power user to quickly build out robust mock-ups in as little time as possible, and present those mock-ups to clients without a whole lot of throwaway effort.

Throwaway effort? For example, say you are a web designer and you work for a client who wants to create a web storefront for his jewelry business. During initial discussions, you lay out some sketches for the site navigation and wireframes for specific pages — landing page, catalog, shopping cart, and company info page. From there, the client is not sure whether he wants to pitch the jewelry to teenagers with a fun, light website or to an older audience with a richer, more traditional design. The client has no real imagination — he wants to see fully fleshed out designs with image placement, actual copy, colors, and typefaces.

When given the choice, why Fireworks?

Despite his workload at Adobe, Alan Musselman likes to push technology on his off-hours, and he uses Fireworks to create mock-ups and prototypes for projects. He also uses Fireworks alongside Dreamweaver and Flash when in production mode.

"I've always used Fireworks because as a developer and designer I can quickly get in, create a couple of graphics, and get back into Dreamweaver to continue with HTML production. Speed is my goal here. The less time I have to spend in a graphics application, the better."

As for prototyping, Alan said, "I use the Frames feature in Fireworks to build mock-up designs. Once the client approves a layout, I'm off to Dreamweaver, slicing out images for use in HTML or pushing bitmaps and vectors into Flash for a microsite or module within an HTML layout."

With Fireworks, the user interaction is quick and responsive. For example, to add color to an object, all you need to do is click the pop-up menu color well (in the Property inspector), select a color, and continue creating and shifting objects on the canvas.

In fact, while working at Macromedia (before it became Adobe), Alan met the engineer who invented the pop-up menu color well. "I had to shake his hand and thank him graciously for building it. I mentioned that I must have clicked it a zillion times since 1997. Talk about a time-saver."

According to Danielle, building out a few variations on two different themes is incredibly time-consuming. Applications like Photoshop and Illustrator (that are layer-based and not page-based) can become very complex very quickly — hundreds of layers organized in "layer comps" to represent pages, sequences like step wizards. Trying then to flatten these layer groups into some sort of format the client can view (such as a flattened JPEG placed in PowerPoint or converted to PDF) is all throwaway work. In addition, defining a click-through navigation to communicate site navigation would require going further — say, to Dreamweaver — to tie those flattened pages together.

According to Danielle, "With hierarchical web and layer organization, page-based layout, and click-through HTML mock-up support — just to name a few features — this new version of Fireworks promises to streamline the entire prototyping process while minimizing thro-away effort."

Superior symbols

Alan hasn't always been an Adobe (or Macromedia) employee. He started using Fireworks in 1997. Back in the day, I used to write case studies about how he used Fireworks to prototype and build websites. Later, I would recruit him to write Fireworks articles for me. Alan was evangelical about the program. Good news for Fireworks users: Alan is now directly involved with product management for Fireworks, and he supports the beta program. Ask Alan what excites him most about the next release, and his eyes light up.

"I'm most excited about intelligent scaling on symbols," Alan said. The problem is that when you scale vector and bitmap objects, they become distorted; intelligent scaling allows you to define parts of the object to scale and parts to be preserved. He continued, "For me, it resolves the tedious task of splitting a graphic into three or nine regions just to scale the layout to fit more content — content that was not considered during the initial design phase" (see Figure 1).

scaling symbols

Figure 1: Intelligent scaling allows you to define parts of the object to scale and parts to be preserved

Symbol Properties panel screenshot

Figure 2: Symbol Properties panel

Alan is also excited about several minor changes. For example, symbols now have properties. This means you don't have to duplicate symbols just to change a text object within a symbol (see Figure 2).

"All you have to do is change the label in the Symbol Properties panel and you're done. In the past, Auto Shapes required a fair amount of coding to create useful shapes, and you were always required to draw objects using JavaScript. That's great, but that doesn't give designers a chance to make their own. Now you can easily create symbols with properties that interact with actual objects within layers, such as turning a layer on or off and changing the object's colors, or something advanced like creating multistate objects that can be exported to any platform," Alan said.

Improved workflow and integration

Danielle believes improved integration between Fireworks and Adobe design tools will also be a big win for customers.

"Fireworks is such a strong tool for optimizing graphical content for the web, but the truth is that many graphic designers are more comfortable with their primary design tools — Illustrator and Photoshop. With Fireworks 9, these designers can use those tools and quickly move that content into Fireworks for optimization," she said.

For example, now you can open a PSD or AI file in Fireworks 9, and Fireworks will automatically convert the content into an editable PNG format. If there are specific attributes that are defined in Photoshop and not supported in an editable mode in Fireworks, they will be preserved as a bitmap. Copying and pasting from the Clipboard is supported too, as is the ability to save back to Photoshop in PSD format.

Learn more

If you'd like to learn about Fireworks and how it differs from other Adobe design software such as Photoshop and ImageReady, check out Stéphane Bergeron's excellent article, Why choose Fireworks?, in the Fireworks Developer Center.