Designing and prototyping Flex applications using Fireworks

Many designers use Adobe Fireworks to create assets for web pages because it includes many helpful features to build and optimize graphic files. However, it is not as well known that Fireworks can also be used to design Adobe Flex applications.

Although Fireworks was originally created as an image editing and web design tool, it has transformed into a powerful environment for designing and prototyping applications. The combination of bitmap editing and vector manipulation tools, along with Flex integration features, make it an ideal tool for designing Flex applications.

Fireworks CS4 streamlines the product development process by allowing you to export designs to Flex code that can be handed off to developers to use as a starting point for the application layout. In this article, I'll explore the designer-developer handoff process and show how Fireworks is uniquely qualified to make the process of product development more efficient.

In this sample project, I'll describe the design process to build a simple Flex banking application using Fireworks CS4. If you haven't already, be sure to download the sample files provided on the first page of this article.

Preplanning is essential. Begin by mapping out the flow of your application in order to ensure a successful outcome of your project. Draw a high-level site map that defines user flows, screen, and data flow of the application in Fireworks by using the shape tools (see Figure 1).

If you are following along with the sample files, Figure 1 represents Page 01 Site Map in the DesigningFlexApps.png file. As you build your own site map, you can drag elements from the Common Library to the canvas and use the line tool or the new arrow line tool to connect items in your diagrams. Alternatively, you could also draw these illustrations in a diagramming tool and import them into Fireworks (see Figure 2).

Fireworks makes it easy to create a site map, and it is critical to have a solid understanding of what the user will see and how the user will interact with the application before creating the design elements.

In the next section, I'll discuss how to begin building out the different views (screens) of the application in wireframe form to ensure that all of the necessary user interface items are included.

Once you have identified the screens of your application, you can sketch out the pages as low-fidelity wireframes. You can review an example of this section of the project by opening Page 02 Wireframe in the DesigningFlexApps.png in the sample files folder.

Use the Shape tools and Text tool to add descriptions to the screen areas. Make sure that the pages are logically assembled, the main interface features are present, and the workflows are intuitive.

Using prebuilt Flex components

You can use the prebuilt component library available in Fireworks (shown in Figure 2) to help you build your wireframes quickly. To do this, open the Flex Components folder of the Common Library palette and drag Flex components, such as a button, onto the canvas. After dragging it out, you can use the Transform tool to resize it to fit your project (see Figure 3).

The Duplicate Page feature allows you to quickly design additional screens by replacing and modifying existing page elements instead of starting over with a blank slate. You can quickly duplicate wireframe screens by simply dragging the layer onto the New/Duplicate Page icon on the bottom right hand side of the Pages panel or selecting Duplicate Page in the Options menu (see Figure 4).

The Duplicate Page feature allows you to quickly design additional screens by replacing and modifying existing page elements instead of starting over with a blank slate. You can quickly duplicate wireframe screens by simply dragging the layer onto the New/Duplicate Page icon on the bottom right hand side of the Pages panel or selecting Duplicate Page in the Options menu (see Figure 4).

Sharing layers across pages

Another timesaving feature in Fireworks is the ability to reuse design elements by sharing layers. Sharing layers increases efficiency by allowing you to share common navigational elements across different pages. By creating two or three shared layers, you can easily create additional user interface states without performing significant redesign work on each application screen.

To share layers across pages, select the option to Share Layer to Pages to access the dialog box. In this example, I added a new page to the design named Page 1 and then I selected it and added it to the Include layer to page(s) list (see Figure 5).

Don't spend too much time on the aesthetics of the wireframes. By definition, these wireframe sketches are designed to show the bare bones of each screen viewed in the application. However, it is critical to solidify the workflow process at this stage, so ask colleagues and friends to review your wireframe sketches and provide feedback. Make sure that users can understand what your application does and how to use it. You may find that your wireframes evolve over time during this process.

In the next section I'll provide some tips and best practices for adding visual content to begin defining the design direction that will ultimately become the front end of your application.

After you've completed your wireframes, you can use the pages as the starting point for your high-fidelity designs. For example, you can add a layer with a background image and incorporate other graphic elements, such as logos. You can also customize the look and feel of existing user interface elements to make your design unique (see Figure 6).

Customizing components

You can customize the look and feel of Flex components to make them match your design. Drag the desired component to the canvas and then double-click the component to edit it. When you are in editing mode, you'll see a detailed view of the component elements. Using the Property inspector, you can change the color of the button, change the font style, resize the elements and customize the design to suit your needs (see Figure 7).

Working with symbols

To increase your productivity, create symbols of any commonly used elements. For example, you can create a banner symbol by drawing a shape on the canvas and filling it with a gradient. Select the shape, right-click it (or Control-click on Mac) and choose the option to Convert to Symbol. In the Convert to Symbol dialog box that appears, set the type to graphic and name the symbol: Banner. Check the option to Enable 9-slice scaling guides; this helpful feature allows you to retain the roundness of corners and perserve the aspect ratio of symbol objects while transforming them. Also check the option to Save to Common Library to make it easy to reuse the symbol. Click OK (see Figure 8).

After clicking OK, the Banner symbol appears in the list of Custom Symbols in the Common Library panel. This allows you to drag and drop it whenever you want to add the symbol to other pages (see Figure 9).

Adding user interface elements to your design

Fireworks CS4 includes a powerful new feature called the States panel. States (similar to frames in previous versions) allow you to create visual variants for your application without investing significant design time to create a unique page for each view.

For example, take a look at the Get Cash screen (the page named 04 Get Cash – Design in the sample PNG file). You could create this screen in a new page by adding a Flex panel with buttons for standard cash amounts. To represent different button states, add a new duplicate state then change the color of one of the buttons in the improved Symbol Properties panel (see Figure 10).

By leveraging the timesaving and reusability features included in Fireworks CS4, you can quickly build out the design and user interface for an application. The pages can be exported in PDF format so that you can share them and gather feedback about the design and flow. Even better, the same document can be used to export the beginnings of an application, including the Flex code. After adding the graphics and text imported or created in Fireworks, you can also incorporate Flex skins to facilitate the handoff process.

Working with the new Flex skinning feature

A new feature in Fireworks CS4—Flex skinning—allows you to quickly access commonly used skins for Flex components in order to provide alternative skins for your application. Do not skip this step. It adds a lot of value to the document when you hand off the code to the development team.

To access the new skinning features, choose Commands > Flex skinning > New Flex skin. Choose the Specific component radio button, then select Panel and the option to Apply skin to All Instances. Click OK (see Figure 11).

This operation generates a new template document that contains all of the skin elements for the panel component. Review the layers in the Layers panel to see how the Flex skin is contructed (see Figure 12).

Select the Panel_borderSkin layer and turn on single layer editing so that none of the other layers in the template are affected. Select the group 2 object and ungroup it to end up with a total of two paths. Select the main path, open the Styles panel and apply the style named Plastic 50.

Continue editing the skin in this way by drilling down into the individual elements and making the desired changes. When you are finished with editing the skin, choose Commands > Exports Skins. This will allow you to hand off the skin file to a developer who can import them into Flex Builder.

In the next section I'll discuss how to incorporate documentation to your Fireworks document, so that developers have a clearer understanding of the goals of the design.

When you work with a team on a project, one of the main things to strive for is clear communication. Anything you can do to facilitate understanding and eliminate confusion will ultimately lead toward a more successful and stress-free release.

In this section, I'll describe how you can include annotations to supplement the design elements that you deliver to the developers that will be interpreting your screens and building out the functionality.

Exporting images

In addition to designing the interface, Fireworks can be used to create documentation that supports the designs you'll hand off to developers. Start this process by exporting your pages as images, because these images will be used for your documentation.

Select File > Export and in the Export dialog box, specify the directory to save your files. In the Export dialog box, choose the export option: Pages to Files. After exporting the images, we'll import them back into a template to make annotations (see Figure 13).

Annotating wireframe sketches

Using Fireworks, you can develop annotated wireframes by importing exported images into documentation templates. If you are following along with the article's sample files, open the Writeup_DesigningFlexApps.png file to view the template (see Figure 14).

Take a few moments to see how the template PNG file is organized. Using this strategy, you can create a single document that represents the designs you've created along with your notes. After importing the previously exported images into the template PNG file, you can use the Export to PDF feature to create the documentation for distributing to the members of your team.

Because Fireworks is tightly integrated with Flex Builder, you can export your design to Flex code (MXML) along with the images that you'll hand off to developers. The Flex components that you dragged onto the canvas from the Common Library panel are automatically converted to MXML using their respective tags. For example, the MXML code for a button looks like this:

All of the custom symbols that you created are also converted to MXML:

Objects in the Fireworks document that aren't recognized as Flex components are automatically exported as bitmaps that are linked to the MXML with an <mx:Image> tag.

The MXML code that is generated by Fireworks contains the necessary styling and positioning information that can be handed off to Flex developers as a starting point for the application. Developers can use the exported MXML code by importing it into a tool like Flex Builder.

After you export the MXML code and image files, you can import them into Flex Builder and use the assets to begin developing the application. First create a new project in Flex Builder. This is achieved by selecting File > New Project. Name the project and specify the directory that contains the exported MXML code (see Figure 15).

By selecting the folder that contains the images and code exported from Fireworks, you are incorporating that information into the new Flex Builder project. The ease of handoff results in rapid development and the flexibility to make new iterations as the project evolves.

Double-click the MXML files in the Flex Navigator panel to open them in the Script window. Using this code as the basis of the new project, you can edit the MXML files to add the desired functionality (see Figure 16).

Where to go from here

Fireworks helps streamline the product development cycle by making the handoff between designers and developers more efficient, which allows team members to collaborate more creatively while reducing development costs.

Fireworks encourages innovation and productivity by offering an environment to generate wireframe sketches, design the interface, document the elements, and create an interactive prototype all within the same tool. Both the Export as PDF feature, which makes it easy to share files across an entire team, and the ability to export Flex code that can be handed off to developers as a starting point are extremely beneficial when building an application.

You can find a wealth of tips and tricks and sample projects by visiting the Fireworks Developer Center. Also check out the following online resources to help you get started:

• Industry trends in prototyping
• Designing a website application with Fireworks CS4
• Adobe TV Learn Fireworks CS4 channel