As I talk to more and more designers and developers one of the things that comes up is whether Catalyst makes it easier or harder to do iterative design on a project. The workflow most people have seen is you start in a tool like Illustrator, Photoshop, or Fireworks; create a high fidelity visual design in that tool; and then import that into Flash Catalyst where you can start turning that artwork into visual components. I think that’s a pretty powerful workflow for designers of all stripes.

The issue that comes up most is that not everyone starts that way. In a lot of cases people create a skeleton application first in Flash Builder and then want to apply visual designs later. Themes are one option, and we’ve got a new Theme chooser in Flash Builder to help with that, but one of the great things about Flex 4 is that it’s easy to create very customized, unique skins for components. So without the ability to do round-tripping between Flash Catalyst and Flash Builder in the 1.0 version of Catalyst, what can designers do to iterate on a design alongside a developer? The answer is the Flex Library project.

I realize this is far from an ideal workflow, but I think for Flash Catalyst 1.0 and Flash Builder 4 it works okay and provides a way for teams of designers and developer to iterate together without stepping on each other’s toes.

Core Steps

• Export assets to a Library Project in Flash Catalyst.
• Import that Library Project as a Library Project into Flash Builder
• Link the imported Library Project to your main Flash Builder project.
• Make design changes in Flash Catalyst.
• Re-export the Library Project and import it by overwriting the old Flash Builder Library Project
• Your main Flash Builder project will be updated with the new design.

Detailed Walkthrough

So let’s say a developer has an application that they’ve created with the default components. I’ll start with something really basic:

<s:Button x="19" y="78" label="Button"/>
<s:HSlider x="210" y="31" />
<s:List x="152" y="108">
 
</s:List>
<s:TextInput x="10" y="31"/>
<s:Button x="152" y="77"/>

Clearly a great RIA in the making. But I take a lot of pride in my work and I want to use the power of Flex 4 to create a unique set of skins and components that stand out. In the ideal workflow I would be able to give this to my designer, they would open it in Catalyst, create some great components, and send it back to me. I can’t do that, but I can do some design in Catalyst and then bring in those designs in a special way. First I’ll create some great looking components in Catalyst by starting with a blank project and importing Illustrator/Photoshop assets, and then convert them to components.

After I turn all of my artwork into interactive components I am going to pop over to the library panel and start giving them usable names. By default Catalyst calls the created components “Button1″, “Button2″, “ItemRenderer1″, etc. I give them names that will mean something to the developer and help differentiate components.

Once I do that, all I have to do is export my library file into an FXPL file by right-clicking anywhere in Catalyst’s Library panel. With that done, I have the ability to import that FXPL file as a new Flex Library project in Flash Builder.

That library file contains all of the assets and skinned components I just created. In order to use those, I simply add that project to my main Flex project from the project Properties->Flex Build Path and I can start changing the skinClass attribute for my components to point to those new files.

<s:Button x="19" y="78" label="Button" skinClass="components.BlackPushButton"/>
<s:HSlider x="210" y="31" skinClass="components.MetallicSlider"/>
<s:List x="152" y="108" skinClass="components.GreyDataList">
 
</s:List>
<s:TextInput x="10" y="31" skinClass="components.MetallicTextInput"/>
<s:Button x="152" y="77" label="Button" skinClass="components.GreyButton"/>

But now the client tells us they want that black button to be an interstate sign (who knows). I have that asset in Illustrator so I can open my original Flash Catalyst file that I created the library project in and I have a couple of options. I could create a new button with a unique name or I can change the original button component using the round-tripping between Illustrator. I’ll do the latter.

Once that’s finished toggle back to the Library panel and re-export the assets making sure to overwrite the original file. Then switch back to Flash Builder and go through the import process again. By default, it will try to create a new project and just append “_1″ to the project folder. Make sure you overwrite your project by removing that. You’ll get a warning, but that’s fine.

This is where the magic happens. Without doing anything, you can run your application and you’ll automatically have those new assets. Any event handlers you’ve wired up to the button or any code you’ve created that use that button will remain unchanged; only the button graphics will change. Because the projects are linked, any change we make to our imported assets filter down to our core project.

The designer can use that original Catalyst file and the re-export process to make modifications to any asset we want. They can also create new components from artwork, create custom components, or add image assets and all of those will be available to the developer inside of that main Flex project.

This is all still kind of a work in progress, but I think this will work for some of the design-develop problems people need to solve. While the 1.0 version of Flash Catalyst will have some limitations around the Flash Builder workflow, there are still a lot of basics there that can be built on. If you’ve tried this or have other ideas on how this could work, definitely drop me an email. I’d love to hear feedback.