Home / Articles / Building Adobe WorkflowLab, Part 6: Development

Building Adobe WorkflowLab, Part 6: Development

Article Description

In part 6 of their series on the design and creation of WorkflowLab, Aaron Pedersen, James Polanco, and Doug Winnie, the authors of Adobe Flash Platform from Start to Finish: Working Collaboratively Using Adobe Creative Suite 5, discuss the development of the WorkflowLab codebase. Based on the wireframes (and later comps) and architecture discussions, the team now could begin constructing the application, bringing Adobe’s vision to life.
Design Integration

Design Integration

With the wireframe components and the design comps completed in Adobe Illustrator, the development team was able to start "skinning" the application and its components.

For the skinning process of WorkflowLab, the project team chose to use Adobe Flash Catalyst as a skinning tool. Since the application had already been started in Flash Builder, the team needed a way to convert Adobe Illustrator artwork into the new FXG syntax. To do this, the developers opened Adobe Illustrator and targeted individual layers of the design comp that represented a component. The selected layers were copied and pasted into Flash Catalyst. When Illustrator assets are opened inside Flash Catalyst (or pasted from Illustrator into Catalyst), they're converted automatically into Flex's MXML and FXG.

After the assets were in Flash Catalyst, the development team worked on organizing the layers. This process included eliminating any unwanted assets such as positioning and background layout; otherwise, those layers would end up in the Flex application, possibly altering the application's functionality or hampering performance.

Figure 4 shows the base skin for the task panel of WorkflowLab.

Figure 4 Skinning WorkflowLab's panel in Adobe Flash Catalyst CS5.

With a clean set of layers, the developers next switched to the Code workspace in Flash Catalyst, highlighting and copying all the generated MXML and FXG for the component. In Flash Builder, the wireframe skin would be targeted, and the MXML from Flash Catalyst would be integrated into the skin. This integration process wasn't simply a matter of pasting over the existing code. Since data from the component has been tied into the application, those application specifics were integrated into the new MXML.

This process was repeated for all components in WorkflowLab, resulting in a user interface that really represented the designer's vision. Figure 5 shows the resulting first release of WorkflowLab.

Figure 5 Functioning application with design integration.