Fireworks Article

Exporting MXML and images from Fireworks CS3

Exporting MXML and images in your workflow

With the addition of the MXML and Images export option in Fireworks CS3, Fireworks can now have a more influential role in bringing predeveloped Fireworks designs and layouts into Flex. Prior to this feature, a designer working in Fireworks would present a layout to a Flex developer, who would then have to recreate it in Flex (see Figure 1).

Figure 1. Original workflow from Fireworks to Flex

Now MXML export makes the conversion for you, from Fireworks to MXML (see Figure 2).

Figure 2. Workflow from Fireworks to Flex with MXML export

This saves the Flex developer from having to recreate the layout in Flex, instead enabling him or her to focus more on development within Flex.

New rich symbols

The transition from Fireworks to Flex is made possible thanks in part to the new Flex rich symbols available in the Common Library in Fireworks. These symbols represent a subset of components available in Flex, enabling a designer to work with the same assets that would be available in Flex. Though not all Flex components are available, many of the most popular are. Figure 3 shows some of the Flex rich symbols available to the Fireworks designer.

Figure 3. Some of the Flex component rich symbols

Even if not destined for MXML, these symbols can be used to create a mock design of something as it might appear in Flex.

MXML export limitations

Before you start planning to use the MXML and Images export option, however, it's important to know about some of its capabilities and limitations:

MXML and Images export does not skin. Exporting a document using MXML and Images export does not create skins for your components in Flex, even if you've modified them in Fireworks. MXML export simply generates MXML documents for use in Flex. These documents may also include linked images for objects in Fireworks that could not be converted into MXML tags. These images are added to the MXML document via <mx:Image> tags.

MXML and Images export does not use slices. Because the purpose of MXML export is to generate an MXML document—a tag-based document for use with Flex—slices do not play a part in creating images or marking out table cells as they do for an HTML export. When the MXML and Images export option does create images, it uses the document's optimization settings to determine the format and compression of the images it exports.

MXML properties are limited to the rich symbols' properties. When converting Fireworks documents into MXML, the MXML and Images export feature identifies the properties of an MXML tag based on the properties associated with the Flex rich symbol that relates to that tag. Because Fireworks only supports a subset of Flex components with a limited number of properties, you may not be able to set all the properties you want to set from within Fireworks.

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. There is no way to force Fireworks to define the styles in an external CSS file.

Frames are not supported. When creating designs and layouts for MXML output, you should not use frames. If you want to have different designs in one document, use pages.

The main point to remember is that the purpose of MXML and Images export is to convert a Fireworks layout designed with Flex in mind (using the Flex rich symbols) into a layout that can be used inside of Flex. This does not include graphic skinning, but simple positioning, some styling, and arrangement with the inclusion of images only for objects that cannot be directly translated into MXML tags.

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 2 of 5

Previous Page

Next Page