With the release of Adobe Fireworks CS3, the workflow for designing and creating Flex 2 applications has been greatly improved with new features. This article introduces a methodology for designing Flex 2 applications with Fireworks CS3.

Although I discuss one approach for creating Flex applications, keep in mind that describing all of the features available in CS3 for Flex application development is outside the scope of this article. For example, MXML export—a great new feature included in Fireworks CS3—is not covered here. But you can read about it in Trevor McCauley's article, Exporting MXML and images from Fireworks CS3.

This article focuses on creating a fictitious To-Dos application. Use the provided sample files so you can follow along with this article.

Requirements

To complete this tutorial, you will need to install the following software and files:

Fireworks CS3

• Try
• Buy

Free Flex Style Explorer 2.0.1

• flex_style_explorer.zip (ZIP, 728K)

Note: Download and install the Flex Style Explorer on your local machine.

Flex Builder 2 (SDK included)

• Try
• Buy

or Free Flex 2.0.1 SDK (included with Flex Builder 2)

• Download it now

Sample files:

• my_to_dos.zip (ZIP, 752K)

Prerequisite knowledge

This tutorial focuses on working with Fireworks CS3 to create Flex applications and assumes you are familiar with the Fireworks interface.

Working with Flex components in the Common Library

Fireworks CS3 makes wireframing Flex applications extremely easy with the inclusion of the Common Library. To access the Common Library, first open the sample file MyToDos.png (or your own blank document) in the sample code () provided. Select Window > Common Library (or press F7) and then open the Flex Components node in the tree.

For this tutorial, you'll create a small "To-Do's" application. To begin the interface for the application, I dragged an accordion, button, textInput, and textArea from the Common Library onto my workspace (see Figure 1).

Figure 1. Placing Flex components on the canvas from the Common Library panel

The great thing about these symbols in Fireworks CS3 is that they're all 9-slice enabled, and they come with a set of symbol properties. That means you can scale the components to any desired size and the 9-slice grids will make sure it scales properly. Additionally, the Symbol Properties panel allows you to control some basic properties, including the title of the panel, the labels on the buttons, and much more.

In addition to the out-of-the-box components that you've dragged onto the workspace, you need to draw a few more items to build the interface of the To-Do's application. First, add a plus icon to the Add button. Then for each to-do item in the list, add two icons for "remove" and "archive." Use the Fireworks drawing tools to add those items to the wireframe you are working on so it matches the interface shown in Figure 1.

Designing the look of the application

Now that you've completed the wireframe for the application, name the layer WireFrame and then add a new layer on top, called Visual Design. At this point, you can begin using the drawing tools in Fireworks to create the visual design for the application, with the WireFrame layer beneath as reference (see Figure 2).

Figure 2. Drawing Visual Design layer using WireFrame as a guide

At this point, do not worry about any technology or functionality of the application. Just focus on creating the best visual design for the application. Feel free to make any adjustments to the design that you feel will improve its look and feel.

For example, as I examined the accordion headers in the WireFrame layer, I noticed that the chrome created by the accordion headers was too heavy—and drew too much attention, drawing my eye away from the content beneath it. To fix this, I decided to make thin lines between each accordion header. I also added a slight gradient to signify which of the accordion headers the user of the final application selects.

Styling the application with the Flex Style Explorer

After visually designing the look of the application, it's time to decide which components to export as skins. Evaluate the application and decide if there are components that can be generated using CSS.

Fireworks CS3 includes an ActionScript 3.0 engine that makes it possible to run Flex Style Explorer 2.0.1 as a command panel from within Fireworks. Here's how it works:

1. Quit Fireworks CS3.
2. Download flex_style_explorer.zip at the beginning of this article and unzip its contents.
3. Double-click FlexStyleExplorer.mxp to install the Flex Style Explorer command panel using the Extension Manager.
4. Restart Fireworks CS3.

Now if you open the Window menu in Fireworks, you'll notice that Flex Style Explorer appears as one of the options. This means you can open the Flex Style Explorer, choose a component, and try to match the visual design that you've just created in this article.

After experimenting with changing the look of the components, select the Export All CSS button at the lower left of the Flex Style Explorer to copy the CSS generated by Fireworks. Once the CSS is copied, you can paste it directly into the myToDos.css file in the sample Flex project in Flex Builder (see Figure 3).

Figure 3. Launching the Flex Style Explorer from within Fireworks CS3

Skinning components to customize the display

After examining the elements in the application, I encountered a few components whose look and feel I could not match with pure CSS using the Flex Style Explorer. They include the accordion headers and the buttons for "remove" and "archive" in the application. Let's skin these components now.

To prepare for the skinning, first copy and paste each of those components from your Visual Design layer into a new layer. Create additional layers for the different states as well.

For example, I wanted a mouseover state for the "remove" and "archive" buttons, so I duplicated the layers where I copied the "remove" and "archive" buttons, and appended "over" to their layer name. Then I edited the image to be slightly darker. This way, when users roll their cursor over these buttons, they will get visual feedback that they can click them. This improved the interface design.

I also decided to change the accordion headers slightly. Because I knew that Flex would stretch my headers to the appropriate width, I didn't want to include an image that was 200 pixels wide. Instead, I shortened the image horizontally to 20 pixels. This allowed Flex to stretch a smaller asset.

After creating new layers and copying all the component skins into the separate layers, you can optimize and export your skins to the assets folder of the Flex project. First make sure that all the layers you want to export are visible. (For this project, I've turned on visibility for all but the WireFrame and Visual Design layers.)

Next, select File > Image Preview in order to target the PNG 32 file format. Save the skins in the PNG 32 file format to include the transparency layer in your images. This ensures that the "remove" and "archive" buttons look perfect whether the row is selected or not.

Click the Export button and then choose the location to save the files (the "assets" folder in the Flex project), making sure that both the Export Layers to Files and Trim Images options are selected. The Trim Images option ensures that you export the skin at a particular size, rather than the full size of your workspace.

After you do the export, the skins for the components and the CSS generated by Fireworks are included in the folder with your Flex project. At this point, you're ready either to hand off the files to the developer team or continue working in Flex Builder to build the functionality of the To-Do's application.

Where to go from here

This tutorial touches only on a few of the new features available in Fireworks CS3 that are related to building Flex applications. Explore using the Pages feature of Fireworks to design multiple screens in your application.

To learn more, explore the documentation regarding Flex integration in Fireworks CS3. Also read Trevor McCauley's articles, Exporting MXML and images from Fireworks CS3 and Creating rich symbols for the MXML and images export. Check out Narciso Jaramillo's informative article, Designing Flex 2 skins with Flash, Photoshop, Fireworks, or Illustrator. You'll also find helpful design tips and other useful tutorials in the Fireworks Developer Center.

About the author