Chapter 9: Fireworks

(Open in Flickr)

Figure 9.1 (Open in Flickr)

Fireworks CS4 launch screen.

Adobe Fireworks has been a popular tool among Web professionals since its beginning at Macromedia. Those who use it, love it. No, I mean really love it—as in Fireworks fanboy love it.

I always felt a sense of guilt after speaking with these people. After all, if it was such an amazing tool, why wasn’t I using it? Clearly, I was missing out on something.

What drives their dedication and devotion to Fireworks? Many Fireworks fans say it’s the ability to create vector and raster artwork with the same tool—it’s like having a hybrid of Illustrator and Photoshop, but without all the fat. Others latch onto the image optimization.

With the release of Fireworks CS4, they have one more reason. Fireworks is on its way to becoming a powerful prototyping tool.

Strengths

Fireworks has a long list of features that make it a particularly powerful prototyping tool.

• Integration improves productivity. Fireworks integrates exceptionally well with Illustrator, Photoshop, Dreamweaver, Flash, and Device Central. Fireworks maintains Illustrator and Photoshop layers when importing AI and PSD files. Fireworks prototype files can be exported easily as Flash and Photoshop files. Additionally, Device Central lets you test your Fireworks prototypes for mobile devices.
• Small file size. By default, Fireworks files are 72dpi, which keeps them relatively small.
• Page states. Pages can now have states. The States panel allows you to set up the look-and-feel of each state in the application (for example, logged in versus not logged in). However, when you export the PNG, only the active state will be exported.
• Asynchronous file saving. You can save one file and work on another one at the same time. Saving a file doesn’t hang up the entire application. This is new to CS4.
• Vector and raster under one roof. The ability to create vector and raster art with one tool means you won’t have to bounce back and forth between Illustrator and Photoshop. Fireworks also lets you apply the same styles to vector or raster images.
• Export to HTML, PDF, and more. Fireworks supports a number of export options, including HTML, PDF, Flash, Flex, and AIR.
• Flexible enough for lo-fi and hi-fi design. You can create rough lo-fi designs, as well as fully polished ready-for-prime-time hi-fidelity designs with Fireworks.
• Ships with useful styles and symbols. Fireworks ships with a number of built-in styles and symbols for common GUI elements. The large development community continually adds to the collection of Fireworks extensions.
• Master pages, shared layers, symbols for productivity. Items on master pages display on every page. Shared layers can be used like master pages, but provide the additional flexibility to pick and choose which pages you share common items on. Symbols are used for common individual items (for example, GUI elements, footers), which will be reused throughout your prototype. Updates to master pages, shared layers, and symbols will apply globally to your Fireworks document.

The biggest difference between master pages and shared layers is that master pages is an all-or-none model. Shared layers, however, lets you share the item on a page-by-page basis. Moving something on a master page or shared layer will move it throughout the prototype.

• Preview mode. The preview mode in Fireworks enables you to test your prototype without having to export it.

Weaknesses

While Fireworks is probably one of the best tools currently available for prototyping, it still has room for improvement.

• Awkward workflow for Photoshop and Illustrator jockeys. With the release of CS4, Fireworks has a more familiar Adobe look. However, if you’re a Photoshop or Illustrator jockey, you’ll find the workflow a bit jarring at first because it’s significantly different.
• Gradient banding. Gradients created in Fireworks aren’t as smooth as those created in Photoshop, resulting in a banding effect.
• Lack of traceability and documentation support. If you work in a documentation-heavy environment, you will need a supplemental tool to track requirements and traceability of changes to the prototype.
• Performance suffers with larger, 50–70-page prototypes. While Adobe has done a tremendous job at improving performance with CS4, Fireworks shows performance issues when you start to hit the 50–70-page mark in your prototypes. The only current workaround is to separate larger prototypes into multiple files.
• Limit of one master page per document. Master pages work like templates. Having only one forces you to use the same template for every page in your prototype, rather than being able to define different masters for each section of your prototype (for example, one for product pages and a different one for shopping cart pages).

Prototyping an iPhone Application with Fireworks

Fireworks CS4 ships with a number of useful GUI symbols for creating Mac, Windows, and Web applications, which makes prototyping with Fireworks faster and easier.

However, for this demonstration, we won’t be using the included GUI symbols. Rather, we’re going to re-create Twitterific, the popular Twitter application for the iPhone. Don’t worry, you won’t have to create an entire iPhone stencil. You can download the stencil we used for this chapter at http://rosenfeldmedia.com/books/downloads/prototyping/iPhone_Stencil_GUI.png. You can also download the finished prototype file at http://rosenfeldmedia.com/books/downloads/prototyping/iPhone_Prototype.png.

Step 1: Create a New File

1. Start by creating a new file by selecting File > New from the application menu (see Figure 9.2) or Create New Fireworks Document from the startup panel (see Figure 9.3).

Figure 9.2 (Open in Flickr)

New File menu in Fireworks CS4.

Figure 9.3 (Open in Flickr)

Create New Fireworks Document from Fireworks CS4 startup panel.

1. Enter a width of 320 and a height of 480 on your canvas. This is the default size for iPhone screen applications. The default resolution is 72 pixels/inch (ppi), which will work just fine.
2. Select the canvas background color. White is the default, which should be fine for this example.

Step 2: Create a Master Page

The master page should only hold elements that will carry across all your screens. For this application, we’ll need to create a master page with the main toolbar.

1. Add the main toolbar, as shown in Figure 9.4.

Figure 9.4 (Open in Flickr)

Main iPhone toolbar.

1. In the Pages panel (see Figure 9.5), double-click the page name and title it Master.

Figure 9.5 (Open in Flickr)

Pages panel with Master page.

1. Right-click the page titled Master and select Set As Master Page from the contextual menu (see Figure 9.6).

Figure 9.6 (Open in Flickr)

Set As Master Page.

Step 3: Create Key Screens

1. From the Pages panel, right-click the Master Page and select New Page. Alternately, you can choose New Page from the Pages panel menu, as displayed in Figure 9.7.
2. Double-click the page title in the Pages panel and type Home.

Figure 9.7 (Open in Flickr)

New Page from the Pages panel menu.

1. Copy the Home screen from one of the iPhone stencils and place it on the newly created Home page.
2. Add a Twitterific icon to the Home screen, as shown in Figure 9.8.

Figure 9.8 (Open in Flickr)

Twitterific icon added to the Home screen.

1. Repeat steps 1–2 to create the additional screens shown in Figure 9.9.
2. Add the necessary elements to your additional screens.

Tip Smart Names

Give your pages intelligent names (for example, Home, View Message, Reply to Message). When setting up interactivity, it’s easier to know what Reply to Message is rather than Untitled 3.

Figure 9.9 (Open in Flickr)

Pages panel displaying key screens.

Step 4: Add Rollover and Interactivity to Application Icon

1. In the Pages panel, select the Home page.
2. Select the States panel.
3. Double-click State 1 and type in MouseOut. Similar to pages, you’ll want to give your states intelligent names.
4. Add a new state, by right-clicking the MouseOut state and select Duplicate State from the menu shown in Figure 9.10.

Figure 9.10 (Open in Flickr)

Duplicate State from the States panel.

1. Double-click the new state and type in MouseOver.
2. Select the MouseOver state and draw a rounded rectangle over the Twitterific icon. Fill the rectangle with white at 30 percent opacity.
3. Select the MouseOut state again from the States panel.
4. Select the Slice tool from the Web tools section of the Tools palette (see Figure 9.11). Draw a rectangular slice around the Twitterific icon. You should see something that resembles Figure 9.12.

Figure 9.11 (Open in Flickr)

Web tools in the Tools palette.

Figure 9.12 (Open in Flickr)

Home screen with slices for Twitterific application icon.

1. Select the slice and right-click. Select the Add Swap Image Behavior option from the menu shown in Figure 9.13.

Figure 9.13 (Open in Flickr)

Add Swap Image Behavior option from the contextual menu.

1. In the dialog window, select MouseOver (2) from the option labeled State no: and then select OK. This will create a mouseover effect.
2. Select the slice again and click the list from the Link option in the Properties panel. Select Twitter Stream.htm from the Options menu. This creates a link when you export the prototype from the Twitter icon to the list of twitter messages on the Twitter Stream page of the prototype.
3. Preview the mouseover effect by selecting the Preview button in the top-left corner of the document window. Move your mouse over the Twitter icon, and you should see an opaque effect.
4. Click Original in the top-left corner of the document window to return to editing mode.

Step 5: Add Interactivity to Twitter Stream Screen

1. In the Pages panel, select the Twitter Stream page.
2. Select the Rectangular Hotspot tool from the Web tools section of the Tools palette.
3. Draw a rectangle around the Chat bubble in the toolbar, as shown in Figure 9.14.

Figure 9.14 (Open in Flickr)

Hotspot created for the Chat bubble.

1. Select the hotspot and then click the List menu from the Link option in the Properties panel. Select the Create New Message.htm option from the menu.

Step 6: Add Interactivity to New Message Screen

1. In the Pages panel, select the Create New Message page.
2. Select the Rectangular Hotspot tool from the Web tools section of the Tools palette.
3. Draw a rectangle around each one of the letter keys on the keyboard and the Close button (see Figure 9.15).

Figure 9.15 (Open in Flickr)

Hotspots for keyboard letters and Close button.

1. Select one of the letter hotspots and then click the List menu from the Link option in the Properties panel. Select the Type Message.htm option from the menu. Repeat for all the letters.
2. Select the hotspot for the Close button and then click the List menu from the Link option in the Properties panel. Select the Twitter Stream.htm option from the menu.

Step 7: Add Interactivity to Type Message Screen

1. In the Pages panel, select the Type Message page.
2. Select the Rectangular Hotspot tool from the Web tools section of the Tools palette.
3. Draw a rectangle around the Close, Send, and Backspace buttons on the keyboard, as shown in Figure 9.16.

Figure 9.16 (Open in Flickr)

Hotspots for Close, Send, and Backspace buttons on keyboard.

1. Select the Close hotspot and then click the List menu from the Link option in the Properties panel. Select the Twitter Stream.htm option from the menu. Repeat for the Send hotspot.
2. Select the hotspot for the Delete button and then click the List menu from the Link option in the Properties panel. Select the Create New Message.htm option from the menu.

Step 8: Export and Test

1. Choose Export from the application File menu.
2. Select a destination folder for your prototype.
3. Select HTML & Images from the Export option (see Figure 9.17).

Figure 9.17 (Open in Flickr)

Export as HTML & Images dialog window.

1. Select Export Slices from the Slices option. If you don’t, the mouseover effect for the Twitter icon won’t work.
2. Deselect Current Page Only. If you don’t, you will only get the page currently selected in the Page panel instead of the entire prototype.
3. Select the Put Images in Subfolder option. This keeps the prototype a little cleaner, placing HTML files in the parent folder and images in an image subfolder.
4. Press the Export button.
5. Find the destination folder and open the Home.htm page (or whatever you titled the first screen for your prototype). Double-click it to open it in your Web browser and test your prototype.
6. Another option is to export your prototype as an interactive PDF. Follow the same instructions as above, but select PDF from the Export option instead of HTML & Images. You’ll probably want to change the image compression to JPEG instead of the default JPEG2000, as my JPEG2000 comes out bitmapped.

That’s it for this chapter. We’ve really only scratched the surface of Fireworks as a powerful prototyping tool. I’m sure you’re eager to explore Fireworks and see how far you can take it as a prototyping tool.

Additional Resources

So here are a number of additional resources to keep you busy, including iPhone stencils, articles, presentations, and a few videos.

Fireworks Tutorials

Tutorials on just about every aspect of Fireworks from how to get the most out of Master pages to improving your workflow can be found at http://www.fireworkszone.com.

“Creating an Interactive PDF File from a Multipage Document in Fireworks CS4”

In this article, we’ll take a look at how effortless it is to export a PDF from Fireworks, with a focus on creating interactive PDF files. http://www.adobe.com/devnet/fireworks/articles/interactive_pdf.html

“Designing Interactive Products with Fireworks”

An article by Cooper interactive on how they use Fireworks to design interactive products. http://www.adobe.com/devnet/fireworks/articles/cooper_interactive.html

“Fireworks Tips & Tricks—Creating Interactive Prototypes”

David Hogue, Director of Information Design & Usability at Fluid, explains how they use Fireworks for interactive prototypes. http://tv.adobe.com/#vi+f1498v1660

“Learn Fireworks CS4—Creating Interactive Prototypes for Review”

An overview of the flexible export options supported by Fireworks CS4 from lynda.com. The video covers exporting to HTML, PDF, and even Adobe AIR. http://tv.adobe.com/#vi+f1594v1015

“Prototyping Adobe AIR Applications with Fireworks CS 4”

A presentation giving a brief overview of prototyping AIR applications using Fireworks CS4. http://scalenine.com/blog/2008/12/01/adobe-max-presentation-and-source/

“Designing for Mobile Devices Using Fireworks CS4”

A short article outlining some of the techniques used to build the layout and generate the design assets in the mobile application. http://www.adobe.com/devnet/fireworks/articles/design_mobile_devices_03.html

iPhone GUI Stencils

iPhone Stencil by Teehan+Lax http://www.teehanlax.com/blog/?p=447

iPhone Icon Template by Keep the Web Weird http://www.keepthewebweird.com/iphone-icon-psd-template/

iPhone Stencil by 320480 http://320480.com/

Summary

There’s a reason Fireworks has such a strong fan base as a prototyping tool. Here’s a few reasons you might want to consider using Fireworks next time you’re prototyping:

• It’s like Photoshop and Illustrator had a baby—the best of both worlds under one roof.
• It uses master pages, shared layers, and symbols for consistency and efficiency.
• It ships with a number of useful GUI sets.
• You can export to a clickable PDF, HTML, Flash, Flex, and AIR prototype. How’s that for flexibility?
• Integration with the rest of the CS suite creates better workflows.