Prototyping Flex and Adobe AIR applications

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.

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:

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

• To create a Flex application prototype, see Prototyping Flex applications. To create an Adobe AIR application, see Create an Adobe AIR application.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

MXML export limitations

Before you use the Flex MXML export feature, it's important to know about its capabilities and limitations:

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.

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.

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.

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.

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: http://www.adobe.com/go/learn_fw_airexperiencebrand_en.

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.

Create an Adobe AIR application

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.