Creating an interactive PDF file from a multipage document in Fireworks CS4

Adobe Fireworks began as a unique hybrid imaging application. With the release of Fireworks CS4, the product has evolved into a rapid prototyping tool. This journey began in CS3, but as you explore Fireworks CS4 you'll see that the prototyping and layout tools have been fleshed out to make it easier to use than ever before.

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.

You can follow along with this article using your own files. Or if you prefer, you can download the provided sample files and use the included PNG file. The sample files include a completed prototype, which uses both button symbols and hotspots. Buttons and hotspots are the two web features in Fireworks that you can use in order to make the PDF interactive.

Note: If you explore the sample PNG file, you'll notice I've used another new feature in Fireworks CS4: Attach Text in Path. I love this command! You can now map text to flow within any vector shape, mimicking (in this case) how text would appear around a floated image. To use the command, add some text and draw a closed vector shape. Select both objects and choose Text > Attach in Path. The best part of this feature is that the text remains editable, and if you change the dimensions of the vector shape, the text will reflow with it.

Fireworks CS4 comes with the ability to export files in the PDF file format. There are many reasons to incorporate PDF files into your design workflow:

• PDF offers a compact, cross-platform file format to securely deliver ideas, concepts, and designs to your clients in an electronic distribution.
• Interactive PDF files demonstrate website or application flow without requiring you to upload files to a server—and clients don't need to access a staging server.
• Clients using Adobe Acrobat Reader can place their written feedback directly in the document.
• Designs exported in PDF format improve printing functionality and ensure that your artwork will print exactly as it looks in Fireworks.

I'll discuss the first three points listed above first, and then I'll talk about printing.

Delivering content with unprecedented ease

I'm a big fan of deliverables. They improve my cash flow. When a client views and approves a design, I usually send an interim invoice. The catch phrase that describes Fireworks, "Design once, deliver to many," really resonates with me now. I have had several methods for delivering the designs I create. The PDF export feature offers yet another way to share files with other team members and clients.

Once a client receives the PDF file by e-mail or on disc, they can enjoy an interactive experience without an Internet connection. Previously clients had to be online in order to click through my sample HTML pages. This means that design can be reviewed and comments can be added, whenever and wherever it is convenient. For example, clients can even review and provide feedback while sitting in a plane.

Embedding comments inside review documents

The PDF files you export from Fireworks can also be set up to accept comments. This improves the experience for clients because they can provide input right in the document as they are reviewing it. If you wish to activate the commenting feature, you need to also install Acrobat Professional. However, your client only needs to download a free copy of Adobe Reader to view the PDF and add comments.

Setting up PDF files for interactivity

The process for creating an interactive PDF is very similar to creating an interactive HTML click-through. You can use hotspots or slices, or a combination of both, to create the interactive elements. For more information on this concept, see the article I wrote for the Adobe Edge newsletter: How to create a click-through mock-up with Adobe Fireworks CS3. As you create new pages, Fireworks tracks them and adds them as HTML links in the link field in the Property inspector.

As you can see, there are many advantages to exporting your designs in PDF format. Beyond the obvious small file sizes for easy distribution and the ability to print your design to exactly match your Fireworks document, you gain the security of knowing that your hard work cannot be reused or copied, and an interactive click-through really facilitates the approval process. Best of all, your clients will love the ability to review the PDFs you send them—even if they are offline. In the next section we'll take a look at the provided PDF sample file and deconstruct how it was created.

If you haven't already, be sure to download the sample files provided on the first page of this article. Once you've uncompressed the ZIP file, open the pdf_export.png file in Fireworks CS4.

The sidebar navigation incorporates button symbols, which are configured so that an HTML prototype displays the rollover effects. This file is set up so you could create an HTML click-through, too (following the "Design once, deliver to many" convention). The rollover effect is not supported in PDF files. In order to get around this, I've faked the over state by adding the rollover leaf. This way, clients can still see the end result.

When you create a button symbol, Fireworks automatically creates a slice around the object, because it assumes there will be rollover states for the button.

The footer navigation will end up as proper HTML text in the final site, so I used hotspots instead of rollovers in the footer area. If desired, you could also mimic CSS pseudo class styles for the text links by adding styled text on specific pages, using the Styles panel. But we'll save that lesson for the topic of a future developer center article.

You can quickly add links by selecting each hotspot and slice one by one. As each is selected, use the link drop-down menu in the Property inspector. In order to target the pages in your Fireworks document, always be sure to choose one of the links listed below the bottom dashed divider line. Links above the divider are provided as a history of links that have been applied to the document in the past (see Figure 1).

You're not limited to choosing page links either. You can also set absolute URLs in the link box and—assuming the user has an Internet connection—clicking the link in the PDF file will load the corresponding website. I have this set up for the accommodations button, if you are following along with the provided PDF in the sample files folder.

Once you have set links on each of your hotspots or slices, save the file. Then choose File > Export. In the Export dialog box, choose Adobe PDF from the Export drop-down menu (see Figure 2).

After you select the Adobe PDF option, you're presented with some other choices:

• Pages: You can choose to either export the current page or all pages of the document. You must choose All Pages to retain interactivity in the PDF file.
• View PDF after Export: This is not required, but it is a good idea. This option allows you to preview and test the PDF file before you send it to your client. If you have Acrobat Professional, you can also enable commenting features for Adobe Reader and change security settings.
• Options: Click this button to access the Adobe PDF Export Options dialog box (see Figure 3).

• Compatibility: You can set the file to make it compatible with Acrobat Reader as far back as Acrobat 4. However, keep in mind that older versions of Acrobat may not have access to all of the same features, such as commenting.
• Compression: You can compress the file using ZIP, JPEG, or JPEG2000 compression to make the file size smaller for e-mails and downloads.
• Quality: Both JPEG and JPEG2000 allow you to specify the quality of the file, to further compress the file size. Bear in mind that standard JPG compression rules apply; the lower the quality, the poorer the image quality of the exported PDF file.
• Convert to grayscale: This is a pretty straightforward option. It is unchecked by default.
• Enable text selection: If you want to protect the text of the file from being repurposed, uncheck this box so that text cannot be selected or copied.
• Bleed value: To add padding around each page in the file, enter a numeric value.
• Use password to open document: You can add security to the file by password protecting the document.
• Use password to restrict tasks: You can restrict printing, copying, commenting or editing functionality by setting a password here. Features listed next to unselected checkboxes will not be available in Adobe Reader. The only way to change the restriction is to enter the password while the PDF file is opened in Acrobat Professional. For example, if I select the option to use a password to restrict tasks, and then select the check box for printing, all tasks listed other than printing will be unavailable to everyone using Adobe Reader to open the file. Even those who have Adobe Acrobat will need to enter the password in order to copy, add comments or edit the file.

Launch your installation of Acrobat Professional (or use the trial version) to try this out. In Fireworks, select File > Export, and choose Adobe PDF as the file format. Browse to a destination folder. The default file name is the same as the Fireworks document, but you can change this name to anything you prefer.

1. If you are working with an interactive document or the provided sample PDF file, make sure to choose the option to export all pages.
2. Click on the Options button. Enter a password that is required to open the document.
3. Enter a new password for restricting tasks. This password must be different from the password you provided to open the file.
4. Select the check box next to the Printing option, but leave the other options unselected.
5. Click OK to exit the Adobe PDF Export Options dialog box.
6. Save your Fireworks document.
7. Acrobat Professional will launch and prompt you for the password to open the file. Enter the password to open the file.
8. Select File > Properties and choose the Security tab. In the summary of tasks, you'll notice that printing is the only task allowed for the PDF document (see Figure 4).

If you decide after exporting the PDF that you wish to allow more tasks, click the Change Settings button. Acrobat will prompt you to enter the task password. Once you've successfully entered the password restricting tasks, you can make changes as desired to let users interact with the document in Adobe Reader (see Figure 5).

Finally, if you want to allow users to add comments to the PDF document while they are viewing it with Acrobat Reader, select Comments > Enable Commenting and Analysis in Adobe Reader. This enables the commenting feature to allow your clients and team members to add feedback directly into the document, which can be much more efficient than sorting through e-mail messages later.

Using Acrobat Professional to test the PDF document's interactivity is the coolest part. Move your cursor over the negation buttons on the side and notice how the cursor changes to a hand icon. Try clicking the buttons to see how you can jump easily from page to page.

I've added hotspots in the footer navigation at the bottom of each page. Acrobat displays hotspot elements with blue/green hotspot boxes by default. If you prefer the hotspot areas to display without the highlighted colors, use Fireworks to apply slices to those hotspot elements as well. Hotspots are clickable too, so give them a try.

Printing your Fireworks design from the PDF file

Printing designs from previous versions of Fireworks has been challenging, because Fireworks was initially designed as a screen-based graphics application. That all changes now that we have the PDF export option, because now there's a consistent output option for screen designs.

To see this in action, simply choose the option to export the file as PDF. Then, use Adobe Reader or Acrobat Professional to print the file. Keep in mind that the default printing resolution for a Fireworks document is only 96 ppi. If you are planning to create hard copy output for PDF printing, you'll want to increase the print resolution before you start creating the design—especially if you are working with bitmap graphics.

If the design you are working with contains vector graphics only, you can increase the resolution after designing the layout by selecting Modify > Image Size. Since the graphics are all vectors, you can reset the image size dimensions and still maintain the image quality.

Where to go from here

PDF export is an extremely helpful workflow tool, but it is only one of many new features available in Fireworks CS4. Also, to get the latest information, tutorials and articles, be sure to visit the Fireworks Developer Center. You'll find many new ways to take your Fireworks projects to the next level—along with some innovative tips and tricks to inspire you.

I have also posted some articles on Community MX about Fireworks CS4:

• Part 1: Fireworks gets a facelift!
• Part 2: Productivity features
• Part 3: Wrapping text inside a path