by Aaron Pedersen
Designers and developers have long sought a unity between the creative and development phases of web application projects. To date, there are few solutions or products that assist in the collaborative steps of a project lifecycle between both camps. Designers are usually forced to pass off their creations to developers and rely on them to make their vision come to life. Developers are often required to slice design comps and then integrate them into a world of logic, data, and interactivity.
This gap in process is hard enough during the initial creation of an application, but it becomes more cumbersome as a working application is modified to accommodate client change requests. Over many projects, our company, DevelopmentArc, has seen a trend that suggests that the user interface is the most common layer of an application that changes. In most cases, those changes are requested only after a working application is presented to the client. At this point, the application is usually fully wired to data and business logic, making the changes even more challenging. Designers have to make changes to their original creative assets, get client approval, and then pass those changes off to a developer. Developers then digest the modifications and weave the changes back into the application source code. There is now a gap because the original design is separated from the actual application source code.
Adobe has recognized this gap in the designer and developer workflow and has been working to create collaboration between both disciplines through Adobe Flex 4, Creative Suite 4, and Flash Catalyst software. Flash Catalyst is a new interactive design tool that provides a bridge to enable designers or developers to take actual design assets and build a fully interactive Flex application. Clients can immediately provide feedback on the application before the data and logic have been integrated, giving designers a quick way to make iterative changes through a new roundtripping workflow with Adobe Illustrator software.
In this article, we compare the old method of updating content with the new roundtripping method that uses Adobe's newest tools. Then we walk through an example of the proposed workflow on a project that has been initially developed and needs to be updated based on customer feedback.
When updating a Flex application, the process has typically involved three steps to accomplish one goal:
First, designers must track down their original creative assets and revise the look and feel based on the client's request. These modifications may be layout updates or changes to the vector artwork such as a gradient, border, or background. At this point, the updates have no direct effect or implication on the current state of the Flex application. Clients see the changes and approve them without seeing the results inside the Flex application.
Next, the revised creative assets are handed off to a developer and deconstructed into multiple assets for integration into the current application code base. The two most popular approaches for deconstructing assets are to slice them into a bitmap image such as a JPEG or PNG file (using Adobe Photoshop or Fireworks software) or embed them into a SWF file as vector art using Adobe Flash Professional software. Both approaches have the same flaw: By deconstructing assets, we produce new creative material that is no longer directly associated with the original source file.
Finally, our deconstructed assets, once created, are re-incorporated into the Flex application. This does not mean the Flex application will be easy to update because graphics may have changed in size, forcing the application's layout to change. Also, logic relating to those assets might require updating. Up to this point, we have had no means to verify that our updated design has not had a major impact on the Flex application. Only now that the assets have been integrated is it possible to determine the effects of the changes. However, it is likely too late to push back because the client has seen and signed off on the design changes. A developer must now massage the source code to fit the new look and feel.
With Adobe Flex 4, Flash Catalyst, and Creative Suite 4, the iterative workflow for Flex applications has become more streamlined. Flex 4 provides a new component architecture (codenamed Spark) that breaks the layout and design (skins) from the logic of the application. This architecture enables Flash Catalyst to participate in the development of the initial application by creating and modifying the skin layer. Illustrator, through Flash Catalyst, can be used to create or modify artwork inside the application, which is also known as roundtripping. The results are directly infused into the skin source of the application. Our redesign process now consists of one step: redesign.
Using Flash Catalyst, updates to the design can be performed directly inside the Flex application. By pinpointing a particular creative asset, such as a background, a designer or developer can open the asset in Illustrator via Flash Catalyst, apply the redesign, save, redisplay in Flash Catalyst, and have a working application in minutes. There is no longer a need to redesign, deconstruct, and integrate changes into the application. Changes to the design can now be saved directly back to the source without touching a line of code.
To demonstrate the power of the roundtripping workflow, we are going to pick up a project after creation. We have a photo viewer for a photography client that consists of an image area, an image caption with title and description, and a thumbnail strip. The requirements for the application are very basic. It needs the following:
To date, we have used Adobe Illustrator to create the original look and feel of the photo viewer. Then, we used Flash Catalyst to convert the Illustrator file to the initial Flex application. The application includes a complete set of interactive features, such as rollovers or clicks, and uses the Data List component's design-time data to mimic a real data set of images for the thumbnails. Without engaging a developer or touching a line of code, we have created an initial application that we can show our client for feedback (see Figure 1).
Figure 1. Our sample photo viewer application.
Our client is extremely happy with the application but has requested a few changes to the look and feel. We need to replace the white divider bar that separates the image area and the photo strip with a filmstrip border pattern. In addition, we need to change the right vertical scrollbar to match the pattern to give the application a more cinematic look.
To accomplish the changes, we have a couple of options. The first option is to use the old workflow. So we would open our original Illustrator file, make modifications, create new vector artwork, and then integrate it into the application. To do that, we would have to replace the left divider and the vertical scrollbar on the right. Once deconstructed, we would again be disconnected from the original Illustrator creative asset, and we would have to embed the new artwork in the application as bitmaps or vector art via a SWF file.
The second option is to iterate directly inside the Flex application using Flash Catalyst. Using this new way, we can eliminate the deconstruction and integration steps. This would be our workflow:
Step 1: We open the FXP project file in Flash Catalyst and render the project. (FXP is a new Flex Project file format that both Flash Catalyst and Flash Builder 4 can interpret.)
Step 2: In Flash Catalyst, we see our application user interface in its application startup state (see Figure 2). Our caption is hidden inside our view area, and our photo strip shows the design-time data.
Figure 2. The photo viewer in its startup state.
Step 3: We select the photo strip component to edit its parts by selecting the component in the Layers panel, right clicking, and choosing Edit Component. (We can also simply double-click an area that is part of that component to edit it.) The component is selected and highlighted to show the details. All other parts of the application are read-only and grayed out (see Figure 3).
Figure 3. Selecting the photo strip component for editing.
In this current view, we can select the pieces of the photo slider component. For our application, the photo strip is built using the common Data List component. The Data List provides a vertical layout, and one part is a repeated item. In this case, the repeated item is an image with a path that provides a mask to dim unselected items. The other parts of the Data List are the vertical scrollbar and a left divider. The divider is a piece of artwork we included and has no functionality.
When viewing the details of any component, each of its layers is shown inside the Layers panel. Here we can select the vertical scrollbar, right-click, and choose Edit in Illustrator (see Figure 4).
Figure 4. Selecting the layer of the component to edit.
Step 4: Illustrator automatically opens showing the application with the artwork of the component we have selected. In this case, we have all the different states and artwork pieces associated with our vertical scrollbar (see Figure 5). The rest of the application is provided as a visual cue and is read-only.
Figure 5. Editing a component in Illustrator through Flash Catalyst.
Step 5: Our Layers panel is organized based on parts and states: so a group of layers is shown for the Thumb and for the Track.
Our goal is to replace our scrollbar track with a filmstrip pattern and create a thumb that can be seen on top as users scroll up and down the photo strip. We create this using a set of ellipses for each hole of the pattern and grouping them. The thumb is created in black with a white border, in a similar pattern you might see on a browser scrollbar. We copy and paste our creation and replace the old artwork in each state with the new creative (see Figure 6).
Figure 6. Replacing the scrollbar track with a filmstrip pattern.
Step 6: Once we have updated all parts per state, we click Save. Illustrator prompts us to save our changes for Flash Catalyst. Since we are using a roundtripping workflow, we use the default FXG options when saving, which enable us to edit again in the future.
Step 7: In Flash Catalyst, we are prompted to accept the changes from Illustrator. Clicking Yes enables Flash Catalyst to render the changes within the application. The resulting changes are now infused into the application.
Step 8: Next, we repeat steps 5–7 to update the left divider. Once completed, we have an updated application, and our client can immediately view the changes (see Figure 7).
Figure 7. The updated application.
Step 9: Once our client has signed off on the design, we save our Flash Catalyst project and pass the resulting FXP file to the developer who will wire the application with live data and build out any additional logic needed to support our client's needs.
With Flash Catalyst, designers and developers now have a powerful tool that facilitates better team integration as the initial design and application is iterated based on customer feedback. Our example only covers the basics of the roundtripping workflow, but we encourage you to download the newly released Flash Catalyst beta and dive in.
Aaron Pedersen is the co-founder of DevelopmentArc, a boutique consulting and development firm that specializes in web application and user interaction front-end development. Prior to DevelopmentArc, Aaron was an Interactive Architect at DHAP Digital.