By combining the Pages panel with other powerful Fireworks features, you can quickly create interactive web and software prototypes. To convert a finalized prototype to a functioning site, simply export it to Adobe Flash®, Adobe Flex®, Adobe AIR™, or Adobe Dreamweaver®.
See the following articles on Fireworks Developer Center for general tips on prototyping workflows:
Nick Myers’ article on designing interactive products with Fireworks: http://www.adobe.com/go/learn_fw_interactiveproducts_en
Dave Cronin’s article on industry trends in prototyping: http://www.adobe.com/go/learn_fw_prototypingtrends_en
Matt Stow’s article on using prebuilt CSS templates in Fireworks: Prebuilt CSS templates in Fireworks CS4.
Jim Babbage’s article, Fireworks CS4 How-Tos excerpts: Importing, exporting, symbols, prototyping, scaling.
Dave Hogue’s video tutorials on using Fireworks for interaction design and rapid prototyping:
Using Fireworks for information and interaction design: http://www.adobe.com/go/learn_fw_infointeract_en
Creating interactive prototypes with Fireworks: http://www.adobe.com/go/learn_fw_creatinginteractivepro_en
Rapid prototyping with Fireworks: http://www.adobe.com/go/learn_fw_rapidpro_en
Fireworks as part of the complete design process: http://www.adobe.com/go/learn_fw_completedesignpro_en
Article on designing a website application with Fireworks: http://www.adobe.com/go/learn_fw_designwebsiteapp_en
Kumar Vivek’s article on designing for mobile devices using Fireworks: http://www.adobe.com/go/learn_fw_designmobiledevices_en
For a video tutorial on prototyping application interfaces, see www.adobe.com/go/lrvid4034_fw.
In the Pages panel, create the desired number of pages or screens for your initial design. As the design evolves, you can add or subtract pages as needed.
On each page, add unique design, navigation, or form elements. In the Common Library panel, you’ll find many buttons, text boxes, and pop-up menus that speed up the design process. Component symbols in the Flex Components, HTML, Mac, Win, Web & Application, and Menu Bars folders include properties that you can customize for individual symbol instances. (See Create and use component symbols.)
From web objects such as slices, hotspots, or navigation buttons, link between the various pages of your prototype. (See Link to pages in a Fireworks document.)
Fireworks offers multiple output formats for your prototype, all of which retain hypertext links for page navigation. See the following articles:
To share a flexible CSS-based prototype with clients, or further edit it in Adobe Dreamweaver, see Export a CSS layout.
To create a more conventional table-based prototype, see Export Fireworks HTML.
To distribute a PDF version for comments or printing, see Export Adobe PDF files.
You can design CSS-based layouts in a Fireworks document, and then convert them to HTML pages with CSS rules that replicate your layouts. CSS-based layouts provide a standards-based approach and give a cross-browser friendly code.
For a video tutorial on creating CSS-based HTML page layouts, see www.adobe.com/go/lrvid4035_fw. Also see the following resources:
Tutorial on exporting CSS and images in Fireworks at http://www.adobe.com/go/learn_fw_exportcssimages_en.
Tutorial on creating standards-compliant web designs with Fireworks at http://www.adobe.com/go/learn_fw_standardscompliantdesign_en.
Fireworks allows you to design pages and instantly export the HTML and CSS code by using an export engine that analyzes the placement of the objects. In addition, you can set the page alignment and specify a repeating background image.
You can use the HTML elements available in the HTML folder in the Common Library. The HTML folder contains HTML elements such as button, drop-down list objects, and text fields. You can edit the properties of these elements using the Symbol Properties panel. When you drag any of the form elements to the page, the export engine inserts <form> tags while exporting the CSS-based layout.
Any text on which you had placed a slice appear as images in the exported HTML. If you want this text to appear as text, use the HTML components from the Common Library. The HTML components include headings1-6 and link elements.
Rule 1: Use rectangles to export text and slices to export images
The export engine exports text placed in rectangles. Because only images which are covered by rectangular slices are exported, place slices on the images to have them exported. These slices “tell” the export engine where the images are.
Rule 2: Avoid overlapping of objects
The export engine treats text, images, and rectangles as rectangular blocks. It examines the size and position of these objects to determine the logical rows and columns to place them in the layout. Carefully place the objects so that their boundaries do not overlap.
Rule 3: Plan the layout for rows and columns
The export engine looks for logical partitions where a clear line of sight can be placed between objects or groups of objects. Enclose your column layouts in a rectangle to prevent the export engine from inserting a logical row that breaks the column layout.
Rule 4: Treat the document as two-dimensional
When you design your page, use rectangles to enclose objects that you want to treat as children of the rectangle. The export engine detects such parent-children relationships. The export engine scans the children elements for logical rows and columns as in Rule 3.
In addition to these rules, observe the following:
The export engine exports only primitive rectangles. To export the rounded corners of rectangles, place rectangular slices over them.
To have the strokes of rectangles exported, place rectangular slices over rectangles that have them.
To export symbols, place a rectangular slice over them.
To export filters that you have applied to text or rectangles, place rectangular slices over them.
Fireworks lets you export layouts you create as CSS-based files. You can then open and edit these CSS-based files in Dreamweaver or another CSS-compatible editor.
You can create a demo of the Fireworks document that you are working on. The demo opens in a browser to demonstrate the features and lets you navigate through the pages.
Select Commands > Demo Current Document.
Select the pages you want to create a demo for, and click Create Demo.
Select the folder and click Open.
The prototyping process for Flex is like the workflow used for websites and software interfaces. (See Prototyping workflow.) With Fireworks, you can drag Flex components onto the canvas, specify their properties, and export the resulting user interface to MXML. You can then refine such user interface in Flex Builder.
On the canvas, insert Flex components from the Flex folder in the Common Library panel. These component symbols work specifically with MXML export to ensure that you get the results you expect. When you export your document as MXML, each of these symbols is converted into their respective MXML tags. Objects that aren’t recognized as Flex components instead get exported as bitmaps, which are linked to the MXML through an <mx:Image> tag. (See Create and use component symbols.
When you edit a Flex design component in Fireworks, you can copy the modified XML code into your Flex project. This saves you time when you want to replicate the modified component behavior in your project.
The Cursor, ScrollBar, Tab, and ToolTip symbols are ignored during an MXML output, as these components don’t have direct translation from Fireworks to MXML. For example, the ScrollBar symbol automatically appears in Flex container instances when their content can be scrolled. In Fireworks, these symbols simply serve as indicators as to how parts of an interface design function.
Image slices, rollovers, and hotspots apply only to HTML-based prototypes. Avoid these web objects when creating Flex prototypes.
In the Symbol Properties panel (Window > Symbol Properties), specify the properties and events for each Flex component you’ve inserted into the canvas.
Export the Flex user interface layout, and open the resulting MXML file in Flex. Fireworks exports the necessary MXML with all styling and absolute positioning maintained. Flex developers can use this interface without having to re-create the layout in Flex.
Fireworks can help you layout rich Internet applications (RIAs) by enabling the export of common library assets as known components for use in Adobe Flex Builder. Fireworks exports the necessary Flex code (MXML) with styling and absolute positioning maintained.
When you finalize a Flex application prototype, export it to MXML for further editing in Flex Builder. In Design view, the prototype looks like its Fireworks counterpart, except for components such as cursors and scroll bars that are not exported.
You can skin Flex components in Fireworks and then export them for use in building Flex-based websites and application interfaces.
You can create skins for a wide variety of Flex components based on the Flex skin templates and edit them in Fireworks.
Select Commands > Flex Skinning > New Flex Skin.
Do one of the following:
To create Flex skins for all available components, select Multiple Components.
Fireworks creates a single document with all the available Flex components.
To specify the components you want to create skins for, select Specific Components.
Select only the components with a specific style attached or select all instances of the component.
Before you use the Flex MXML export feature, it's important to know about its capabilities and limitations:
MXML export does not skin components
Exporting to MXML does not create skins for components in Flex, even if you've modified them in Fireworks. MXML export simply generates MXML documents for use in Flex. These documents can also include linked images for Fireworks objects that can’t be converted into MXML tags. These images are added to the MXML document via <mx:Image> tags.
MXML export ignores slices
Because MXML export is designed to generate a tag-based document for use with Flex, slices are not considered in creating images or table cells. When MXML export creates images, it uses the optimization settings of the document to determine the image format and compression method.
MXML properties are limited to rich symbol properties
The MXML export feature bases the properties of an MXML tag on the Flex component in Fireworks. Fireworks provides a subset of Flex components with a limited number of properties.
Styles are embedded
Properties recognized as styles are separated from the MXML tags created, but are kept within the same MXML document inside a <mx:Style> tag. Fireworks cannot define the styles in an external CSS file.
Frames are not supported
When creating designs and layouts for MXML output, do not use frames. If you want to have different designs in one document, use pages.
Adobe® AIR™ for Fireworks lets you transform a Fireworks prototype into a desktop application. For example, some prototype pages interact with each other to display data. You can use Adobe AIR to package this set of pages into a small application that can be installed on a user's computer. When user runs the application from their desktop, the application loads and displays the prototype in its own application window, independent of a browser. Users can then browse the prototype locally on their computers without an Internet connection.
See Ethan Eismann’s article on Adobe AIR and the experience brand: http://www.adobe.com/go/learn_fw_airexperiencebrand_en.
You can add predefined Adobe AIR mouse events to objects in your document. Fireworks provides four predefined mouse events: close window, drag window, maximize window, and minimize window.
Select the objects on the canvas to which you want to apply mouse event behavior.
Select Commands > AIR Mouse Events and choose the event.
Specify the name that appears on installation screens when users install the application. The extension specifies the name of the Fireworks site by default.
Enter a unique ID for your application. Do not use spaces or special characters in the ID. The only valid characters are 0-9, a-z, A-Z, . (dot), and - (dash). This setting is required.
Program Menu Folder
Specify the folder in the Windows Start Menu where you want the shortcut to the application created. (Not applicable on Mac OS)
Specify the copyright notice that is displayed in the About information for Adobe AIR applications installed on Mac OS. This information is not used for applications installed on Windows.
Select Current Document to automatically select the folder from which the files are included.
Click Browse to elect the page that appears as the root content. If you had selected Current Document, the root content is automatically set.
System Chrome and Transparent
Specify the window style (or chrome) to use when users run the application on their computers. System chrome surrounds the application with the standard window control of the operating system. Transparent chrome eliminates the standard system chrome and lets you create a chrome of your own for the application. The transparent capabilities let you create application windows that are not rectangular in shape.
Select Icon Images
Click to select custom images for application icons. Select the folder for each icon size and select the image file you want to use. Only PNG files are supported for application icon images.
Selected custom images must reside in the application site, and their paths must be relative to the site root.
Click Set to sign your application with a digital signature. This setting is required. For more information, see the section that follows.
A digital signature provides an assurance that the code for an application has not been altered or corrupted since its creation by the software author. All Adobe AIR applications require a digital signature, and can't be installed without one.
To sign an application with a pre-purchased digital certificate, click the Browse button, select the certificate, enter the corresponding password, and click OK.
To create your own self-signed digital certificate, click the Create button and complete the dialog box. The certificate Key Type option refers to the level of security of the certificate: 1024-RSA uses a 1024-bit key (less secure), and 2048-RSA uses a 2048-bit key (more secure). When you're finished, click Create. Then enter the corresponding password in the Digital Signature dialog box and click OK.
Note: You must have Java® Runtime Environment (JRE) installed in your computer.