Fireworks CS4 Resources

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.

1. Create Flex user interface

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

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

Note: Image slices, rollovers, and hotspots apply only to HTML-based prototypes. Avoid these web objects when creating Flex prototypes.

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

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

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