In Part 4 of this continuing series, guest authors James Polanco and
Aaron Pedersen show how designers can use Flash Catalyst to convert graphic elements created in Adobe Illustrator into Flex components.
James Polanco and Aaron Pedersen are the guiding geniuses behind the Web development firm developmentarc.com,
based in San Francisco. James and Aaron are working on a book for Adobe
Press on integrating Adobe Flash Catalyst and Flash Builder 4 (both
just released as public betas) into the Web designer/developer
workflow. Throughout June, they'll be posting a weekly series of items
that takes a peek "under the hood" of these innovative tools. Check back each Monday for a new installment!
Adobe Flash Catalyst: Under the Hood—Part 4 Converting & Skinning Components
By James Polanco and Aaron Pedersen
With Flash Catalyst, designers now have the ability to take a static design and add the interactivity that makes rich internet applications shine. Up until now, interaction design was passed off to developers for implementation. The designer had to rely on verbal or written communication to instruct developers how they wanted their application to come to life. In our last post we talked about how Flash Catalyst allows designers to create the interaction themselves within the new tool. However, with the added power of Flash Catalyst comes more responsibility and the need to deepen one’s knowledge of the Flex framework and its component set. As well, designers must understand how to convert their artwork into components. In this post we will walk through this process.
Because we have to go through this conversion process (artwork -> Flex components), how the design files are structured and created will require more preliminary planning and organization. Typical questions designers will have to keep in mind include: Were all four of the UI states for the login button created? Which layers represent what view of the application? How are the layers and assets named? By understanding the available components and all their parts, designers will have a better idea of what to design for. A good practice is to keep Flash Catalyst open and explore the desired components while designing for them.
These requirements and changes might be disconcerting to some of you, but don’t worry: your design doesn’t have to be 100% complete (or organized) before bringing them into Catalyst. Catalyst provides powerful round-tripping support, which enables you to edit and add new design content using Illustrator CS4 on the fly. You can cut and paste directly from Illustrator into Flash Catalyst and it will convert your assets into MXMLG for you. This means that as your application is being developed new assets can continue to be added. If you decide its look isn’t quite right, the assets can be easily tweaked in a powerful design tool.
The new Flex component architecture provides two main features: states and parts. States are the various looks a component has. For a Button, those states include Up, Down, Over, Disabled. Parts are additional skin-able elements of a component. For example a label is an optional part of a Button.
Let’s take the process of converting design assets into a Flex Button. The original artwork was created within Adobe Illustrator CS4 and will be converted into a Flex Button using Flash Catalyst. In our Illustrator file we have created six layers: a Button layer which is the parent layer for our children layers, a Label layer and one layer for each Button state.
Once the design is complete, we open the Illustrator file in Flash Catalyst, which converts the artwork into a Flex project. Please note that by keeping the default settings when bringing the Illustrator file into Flash Catalyst for the first time, it will allow us to roundtrip back to Adobe Illustrator in order to iterate the design. After the initial conversion has finished, let’s take a look at the project in the Code Workspace in Flash Catalyst:
Here we will see our entire application structure, which only contains one file, Main.mxml. Main.mxml is the root project file and contains all of the artwork (objects and layers) from our original Illustrator file, converted into MXMLG.
After switching back to the Design Workspace, our next step will bet to convert our Button artwork into an actual Flex Button Component. First we will identify and highlight all layers of the project that are to be included in the Button. You will notice that Catalyst keeps the layer names and structure exactly the same as they were in Illustrator. Because we grouped all of the layers of the component when we initially designed the interface in Illustrator, this enables us to select all of the pertinent layers in Flash Catalyst and be confident that we didn’t miss one.
Right-click the selection and choose “Convert Artwork To Component” from the context menu. A submenu lists the available Flex Components for your application. Choose Button from the submenu to convert all the selected layers into a Flex Button. Once the conversion has finished, double-click the generated button to display its states (Up, Over, Down, Disabled) at the top of the large Pages/States panel.
The assets available for our Button are displayed in the Layers panel. By showing and hiding individual layers we can determine exactly which assets are displayed for each state.
To gain a deeper understand of what Flash Catalyst did for us, let’s look at the Code Workspace again.
Here we see that a new MXML file, Button1.mxml, was created in the components directory. This file is our new Button skin that was generated by Flash Catalyst when we defined the Illustrator assets as a Button component. All of the MXMLG code that represents each of Button artwork assets that used to be in the Main.mxml file has now been moved to this skin file. Within Main.mxml we now reference the skin file when we declare our button:
<s:Button x="286" y="218" skinClass="components.Button1"/>
The above code tells the Flex Button that when rendering UI content use the skin class, Button1.mxml. One of the benefits of moving the assets out of the Main.mxml into an external skin file is that we can change the look and feel of the skin file and not impact any of the code in Main.mxml. This creates the powerful and flexible separation of design and logic.
We hope this article helped shed some light onto the component creation workflow that takes artwork assets and turns them into a Flex component. As mentioned earlier, it is important to learn about the components you are designing for. The more knowledge you have beforehand the more it will assist you in the creation and conversion of those assets into actual Flex components. In our next post we will discuss how designers can hand off their interactive Flex designs to developers.
Here are the other posts in this series:
Part 1: Introduction
Part 2: The Platform
Part 3: Design Integration Workflows
Part 5: The Transport