15 October 2008
This article assumes that you have prior experience working with Fireworks and are familiar with the process for creating web slices and hotspots.
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:
I'll discuss the first three points listed above first, and then I'll talk about printing.
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.
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.
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:
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.
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 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.
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: