Creating interactive prototypes for reviews

Provide functional prototypes to clients by exporting them to web pages, interactive PDF files, AIR applications, or Flash presentations.

• View full-size on Adobe TV
• View more videos like this

Requirements

To complete the tasks demonstrated in this tutorial, you need the following software and files:

Adobe Fireworks CS4

• Try
• Buy

Sample file

lrvid4034_fw.zip (ZIP, 23MB)

Prerequisite knowledge

Intermediate knowledge of web design

Creating interactive prototypes for reviews

Adobe® Fireworks® CS4 offers a number of options for viewing deliverable files, such as website designs and application interfaces. In this tutorial, you will review the different applications you can prototype in Fireworks CS4, as well as some options for outputting content for client review.

The HTML click-through

One purpose of the HTML click-through prototype is to allow clients to review the website for flow and design elements. Because you are still in the design stage, it is easy to make changes. To begin the process of building your prototype:

1. Open or create a master page in Fireworks. The master page is an extremely useful feature, as it allows users to share common elements throughout a design.
2. To add a hyperlink to an element, choose the Rectangle Hotspot tool from the Web tools section of the Fireworks toolbox. Note that the Properties inspector displays the properties associated with this tool.

   

   Figure 1: The Rectangular Hotspot tool
3. Select the element, text, or graphic, which you want to change into a hyperlink. Then, click the Link text box in the Properties inspector.

   

   Figure 2: The Link text box
4. Choose a web page you have saved to your local hard disk from the pop-up menu. You have created a link between your selected element and the designated web page. Because this link is established on the master page, it will appear on all pages in your design.
5. To export the file as a functional website prototype, choose File > Export. The Export dialog box opens. Choose a location in which to save your file.

   

   Figure 3: Exporting a file as a functional website prototype
6. Choose HTML And Images from the Export pop-up menu. Make sure you deselect the Current Pages checkbox to export all pages of the document.
7. To configure the HTML settings, click Options. The Options dialog box opens. The General options are as shown in Figure 4. Click OK to close the dialog box and save the HTML settings.

   

   Figure 4: Configuring HTML settings
8. Click Save to finish the export. To view the web page, double-click the file and it will open in your default web browser.

Exporting standards-based CSS and HTML

One of the new features of Fireworks CS4 is the ability to export standards-compliant CSS and HTML. You can also build a functional web page that can be modified in Dreamweaver or another web editor. To export a document as CSS:

1. Set up your web page layout and content in Fireworks.
2. Choose File > Export > CSS And Images.
3. Click Options to open the HTML Setup dialog box. Change the HTML settings, such as page alignment, as needed. Select the Write CSS To An External File checkbox to write your page and element styles to a separate CSS document. Deselect Write CSS To An External File to add CSS to the head of the HTML document.
4. Click OK to apply the changes and close the HTML Setup dialog box.
5. Create a new folder in which to save your web page.

   

   Figure 5: Creating a folder
6. Make sure the Put Images In Subfolder and Current Page Only checkboxes are selected. Click Save to apply the changes.

   Note: Once you click save, you can view the document in Dreamweaver or as a web page. The web page appears the same as the document does in Fireworks. The text remains editable; it is not converted to a graphic. Only graphic elements appear as graphics in the web page.

   

   Figure 6: Previewing a web page

Exporting a PDF file

You also have the option of exporting a file as a PDF. To export a PDF file:

1. Choose File > Export. Select Adobe PDF from the Export menu in the Export dialog box.
2. To password protect a document, click Options. You can also change such properties as compatibility, compression, and image quality from this menu. Click OK to apply the changes.

   

   Figure 7: Exporting a file as a PDF
3. To automatically open the PDF file in Adobe Acrobat® after it’s been exported, select the View PDF After Export checkbox.

   Note: If you don’t have Acrobat installed, the PDF will open in Adobe Reader®. In both applications, you can zoom in or out of the PDF document and click to preview the various elements. The PDF document has a high level of interactivity that allows you to preview the document without having to open it as a web page in a browser. Users can also add comments to highlight necessary changes and edits.

Creating an AIR prototype

You can also build an AIR prototype out of a Fireworks document. To build the prototype:

1. Choose Commands > Create AIR Package. The Create AIR Package dialog box opens.

   

   Figure 8: Creating an Air package
2. To create a preview of the document, click Preview at the bottom of the dialog box.

   Note: The file looks like a floating desktop application. You can even click the various elements and navigate through the document. You can also drag the application around the desktop and close it when you are finished previewing it.

Demonstrating a current document

One last option for previewing a Fireworks CS4 document is to use the Demo Current Document option. This option is good for documents that do not have a lot of interactivity and involves setting the file up as a Flash slide show. To use the Demo Current Document option:

1. Choose Commands > Demo Current Document. The Demo Current Document dialog box opens. Select the pages you want to include in the slideshow.
2. Click Create Demo. The Select Folder dialog box opens. You can either choose an existing folder or create a new folder in which to store your document.
3. Select a web browser from the dialog box options. Click Open to generate the page.
4. To view the page as a Flash presentation, open the document in a web browser such as Firefox. You will see a navigation menu that allows you to play the presentation or navigate the document page by page.

Where to go from here

• Fireworks CS4 Help and Support
• Learn Fireworks CS4
• Introducing Fireworks CS4, by Jim Babbage
• Understanding styles and symbols, by Jim Babbage
• Creating CSS/XHTML-based layouts, by Jim Babbage
• Lynda.com

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the authors