Creating a Flex document in Fireworks

When creating Flex designs or layouts in Fireworks, you should be working primarily with the Flex components available in the Common Library panel (see Figure 4).

Figure 4. Flex components in the Common Library

These rich symbols work specifically with MXML export to ensure you get the results you expect. When you export your document as MXML, each of these symbols will be converted into their respective MXML tags. Objects in your document not recognized as being a Flex component get exported instead as bitmaps and linked to the MXML through an <mx:Image> tag.

The Cursor, ScrollBar, Tab, and ToolTip symbols are special cases. These particular symbols are ignored during an MXML output, as there is no direct translation of these from Fireworks to MXML. The ScrollBar, for example, will automatically appear in Flex container instances when their content can be scrolled. In Fireworks, these symbols simply serve as decoration or indicators as how parts of a design should function.

When using components from the Common Library, it's always good to drag the ones you know you'll need to the canvas first. Then, for more instances of those components, either duplicate them from the original created from the Common Library or grab them from the document library. Attempting to get a symbol from the Common Library that already exists within your document will cause the Resolve Library Conflict dialog box to appear.

Exporting a Fireworks document to MXML

This example uses the sample file login.png, which is included in the package provided with this article:

1. From the source files, open login.png, which is located in the Fireworks folder of the sample package: [samplefiles]/Fireworks/

   It is a two-page PNG document whose first page should look like Figure 5.

   

   Figure 5. Page 1 of login.png

   In Flex, this will be the login screen to reach the second, main page (see Figure 6).

   

   Figure 6. Page 2 of login.png

   Note that any interactivity would have to be implemented in Flex. For Fireworks, the only concern is layout, and to a degree, design (meaning some styling, but not skinning; the MXML and Images export option does not support skinning).

   Each of these pages in Fireworks represents separate MXML files to be used in Flex. Each Flex rich symbol on the canvas translates into its corresponding component in the MXML. Everything else becomes an image. As with a multiple HTML export, the MXML files created in a multi-page MXML and Images export take on the names of the pages being exported. By default, page names in Fireworks have spaces in them ("Page 1", "Page 2", and so on), so you will want to be sure to change your page names to something more compatible for Flex before exporting. In login.png, this has already been done and the document can now be exported.

2. If you don't already have one, create a project in Flex Builder 2 to test this export. Make sure you know where the project files are being kept. For Flex Builder 2, these locations are:

   Windows: C:\Documents and Settings\[user]\My Documents\Flex Builder 2\[project name]

   Mac OS: Mac HD/Users/[user]/Documents/Flex Builder 2/[project name]

3. With login.png open, select File > Export to open the Export dialog box.
4. Select MXML and Images from the Export pop-up menu.
5. Check the Put Images In Subfolder checkbox, leaving the default destination of images/ for the export folder.
6. Make sure Current Page Only is not checked so each page in Fireworks will be exported to its own MXML file.
7. In the file browser, navigate to your Flex Builder project.

8. For the export File Name, type anything (see Figure 7). Since this is a multipage export, the name used in the Export dialog box is ignored in favor of the names given to the pages. It's these page names that will be used to name the corresponding MXML files.

   

   Figure 7. Export dialog box

9. Click Save to complete the export.
   Two files, login.mxml and main.mxml, are produced in the Flex project directory and can now be opened in Flex Builder. In Design view they should look very much like their Fireworks counterparts, with the exception of components like scrollbars that do not get exported. For example, in this case, page 2 had a cursor, tooltip and scrollbar that were not exported to the main.mxml page (see Figure 8).

   

   Figure 8. main.mxml in Flex Builder

Any images associated with those files were exported to the images folder. Additionally, two images of the full MXML pages were also created with the other image files. These are not important to the MXML pages and can be removed, but can also serve as a preview for how the MXML files should look.

At this point in your workflow, the designer would hand content over to the developer. With the help of the MXML and Images export option, there's a lot less layout work to do, so the developer can begin working on functional code almost immediately.

Page 3 of 5

Previous Page

Next Page