Prototyping workflow

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:

For a video tutorial on prototyping application interfaces, see

Create the pages

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.

Layout common design elements

On the canvas, layout design elements that you want to share across multiple pages, such as navigation bars and background images. To align elements, use Smart Guides. For maximum flexibility, structure your layout with CSS. (See Smart Guides and Creating CSS-based layouts.).

Share common elements across multiple pages

When you share common elements, a single change automatically updates all affected pages. Use a master page to share all elements it contains, or share layers to copy subsets of elements. (See Use a master page and Share layers.)

Add unique elements to individual pages

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.)

Simulate user navigation with links

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.)

Export the finished, interactive prototype

Fireworks offers multiple output formats for your prototype, all of which retain hypertext links for page navigation. See the following articles:

Creating CSS-based layouts

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 Also see the following resources:

About CSS page layout

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.

Rules for CSS-based layouts

You observe a few rules while creating CSS-based layouts to get expected results.

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.

Export a CSS layout

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.

  1. Choose File > Export.

  2. From the Export pop-up menu, choose CSS And Images.

  3. Click Options to set the HTML page properties.

  4. Click Browse to specify a background image and set the background image tiling:

    • Select No Repeat to display the image only once.

    • Select Repeat to repeat, or tile, the image both horizontally and vertically.

    • Select Repeat-x to tile the image horizontally.

    • Select the Repeat-y option to tile the image vertically.

  5. Select the page alignment on the browser as left, center, or right.

  6. Select the attachment scrolling as either fixed or scroll.

  7. Click OK, and then click Save.

Create a document demo

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.

  1. Select Commands > Demo Current Document.

  2. Select the pages you want to create a demo for, and click Create Demo.

  3. Select the folder and click Open.

Prototyping Flex applications

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.

Create Flex user interface

Using the Pages panel, create the desired number of interface screens for your initial design.

Insert Flex design components into the layout

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.

Share common Flex components across multiple pages

When you share a single Flex component across multiple pages, a single change automatically updates all affected pages (or screens). You can use a master page to share all the Flex components it contains, or share layers to copy subsets of components. (See Use a master page and Share layers.)

Specify properties for the Flex components

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 layout to MXML

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.

Edit Flex component properties

You can edit the properties and events of Flex components in the Symbol Properties panel.

  1. Select the Flex component on the canvas.

  2. Open the Symbol Properties panel (Window > Symbol Properties).

  3. Set the properties and events of the component in the Symbol Properties panel.

Export a Fireworks document to MXML

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.

  1. Choose File > Export.

  2. From the Export pop-up menu, choose MXML and Images.

  3. Select Put Images in Subfolder if you want to save the images in a separate folder from the MXML code.

  4. Select Current Page Only to export only the currently selected page.

  5. Click Save to complete the export.

    Any images associated with the prototype are exported to the images folder. Additionally, images of the full MXML pages are also created with the other image files. MXML pages don’t require these preview images and can be removed.

Create and export Flex skins

You can skin Flex components in Fireworks and then export them for use in building Flex-based websites and application interfaces.

Skin Flex components

You can create skins for a wide variety of Flex components based on the Flex skin templates and edit them in Fireworks.

  1. Select Commands > Flex Skinning > New Flex Skin.

  2. 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.

  3. Click OK.

Export Flex skins

  1. Select Commands > Flex Skinning > Export Flex Skin.

  2. Select the folder to which you want to export the Fireworks document and click Open.

MXML export limitations

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.

Prototyping Adobe AIR applications

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:

Add Adobe AIR mouse events

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.

  1. Select the objects on the canvas to which you want to apply mouse event behavior.

  2. Select Commands > AIR Mouse Events and choose the event.

Preview an Adobe AIR application

You can preview an Adobe AIR application without setting any Adobe AIR application parameters.

  • Select Commands > Create AIR Package, and click Preview.

Create an Adobe AIR application

  • Select Commands > Create AIR Package, and set the following options:

    Application Name

    Specify the name that appears on installation screens when users install the application. The extension specifies the name of the Fireworks site by default.

    Application ID

    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.


    Specify a version number for your application. 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)


    Add a description of the application to display when a user installs the application.


    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.

    Package Content

    Select Current Document to automatically select the folder from which the files are included.

    Root Content

    Click Browse to elect the page that appears as the root content. If you had selected Current Document, the root content is automatically set.

    Included Files

    Specify the files or folders to include in your application. You can add HTML and CSS files, image files, and JavaScript library files. Click the Plus (+) button to add files, and Folder icon to add folders. To delete a file or folder from your list, select the file or folder and click the Minus (-) button. The files or folders you select to include in the Adobe AIR package must belong to the root content folder.

    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.

    Width and Height

    Specify the dimensions of your application window in pixels when it opens.

    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.

    Digital Signature

    Click Set to sign your application with a digital signature. This setting is required. For more information, see the section that follows.

    Package File

    Specify the folder to save the new application installer (.air file). The default location is the site root. Click the Browse button to select a different location. The default filename is based on the site name with an .air extension. This setting is required.

Sign an Adobe AIR application with a digital certificate

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.

  1. In the Create AIR Package dialog box, click the Set button next to the Digital Signature option.

  2. In the Digital Signature dialog box, do one of the following:

    • 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.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy