Flash Catalyst enables designers to increase their creative productivity and leverage their existing skills to create a stand-alone Flex application. It also facilitates collaborating in a team when creating Flex applications. Designers can create their graphics using Adobe Photoshop CS4, Illustrator CS4, or Adobe Fireworks CS4, and then convert these graphics into a Flex application by importing the native files into Catalyst, while keeping the layers intact. Catalyst acts as a bridge between Flex Builder and CS4.

This is all great, but as a developer you shouldn’t wait for designers to adopt to Catalyst and you can leverage Catalyst today.

In this post, I would like to talk about integration and workflow between Flash Catalyst and Flex working with Catalyst as a developer tool. This blog post is based on my experience working with Catalyst and is based on creating production grade applications. I believe that Flash Catalyst is a valuable tool and once you get to work with it and utilize it well, you will find it hard to work without it, mainly since it will save you valuable development time.

While Flash Catalyst got great reviews by many people since it was released as Beta, I also hear criticism in the Flex community about the tool and I would like to touch that before we diving into workflow tips.

This is the image from the T-Shirt given to participants during FlashCamp San Francisco this year:

I am not sure if Flash Catalyst is really a gift to the designer?! Remember that old TV show Smurfs:

I think that the source of the criticism is because of the following reasons:

• Catalyst was labeled as a designer tool - Adobe put a label on Flash Catalyst and categorized the tool as a designer tool. Even the t-shirt in the above picture (from Adobe’s San Francisco Flash Camp event) labeled the product for designers, and not just designers, but female designers! We see the same on the Catalyst site (http://labs.adobe.com/technologies/flashcatalyst/) where you have a male developer on one side and female on the other side. I have to tell you, I have a lot of designer friends that are male and they are as talented and as capable as female designers. I personally believe that Adobe should release the product without putting any labels on who should use it.
• High expectations - Adobe’s Marketing department has portrayed the product as if it allows seamless and effortless round tripping integration between CS4 and Flex, when in reality the round trip is not as seamless as described. Lower your expectations before using the tool.
• Designer? tough pitch! - it’s a hard to tell designers “look, I will give you this amazing tool that will add work for you”. Designers are busy just as much as developers and many are not going to be as thrilled to adopt to a new tool that will require them to put more time and add them more responsibilities.
• Adoption - designers adopting the technology may take a year or two since although it’s similar to other design products, there is still a learning curve and round tripping should be improved for better integration.

Who feels the pain? Designers or developers?

When it comes to skinning, interactivity and converting pixels to code, I believe that developers are feeling the pain much more than designers, since every time they need to skin a component or create interactivity, coding in Flex 3 is a tedious process and not easy unless you do it on a regular basis. Sure, designers feel the pain when their work is degraded during translation of graphics to code, but it’s usually solved by going over the work with the developer and adjusting the pixels.

Developers can benefits from using Catalyst:

How you can leverage Flash Catalyst as a developer:

Create your view in Catalyst and integrate it using the presentation model

Before using Catalyst you would get a comp from a designer and convert it into code. That process, at least to me, was a painful process that I always hated since I have to bother myself with tweaking CSS files and creating custom components which takes a lot of effort on complex components. With Catalyst you can import Illustrator / Photoshop files to Catalyst without opening CS products. I found that the best approach is to identify the different views you would like to break your application into components instead of trying to create one application. When you create an application you usually break your views to different components and I would do the same with Catalyst. What I mean is that you would figure out how you would like to split your view and create Catalyst projects based on that.

Your assumption should be that you will have to change the Catalyst’s code and adjust it instead of assuming that the code Catalyst will spit out will be production grade code. Once you completed your work with Catalyst you can import, the FXP (Flash XML Project) file into Flash Builder and separate the ‘view’ from the ‘logic’ using the presentation model (similar to code behind) design pattern. There are many presentation model approaches, but the key is to have a ‘clean’ code that doesn’t have functionality so you can easily make changes to the view and follow Flex 4 and Catalyst architecture of separating pixels from the plumbing. You would import it as it’s own project and copy paste the classes you need while refactoring the location and names, as well as changing the generated code so it’s more readable.

Skin component

Another useful technique I found with Flash Catalyst is to skin components or at least create the scaffolding to skin components. For instance if you want to skin a button, sure you can code the class and states from scratch, but it will be done faster with Catalyst. Using Catalyst you can easily take an Illustrator file and convert a pixel to a button or any of the available components in Catalyst as well as create the states and interactivity which will save you time as well as generate FXG when available. FC also uses optimization techniques when possible, such as package pixels in a SWF.

Using the FXG rather than images can give you a much better crisp look to your applications, not to mention decrease the size of your SWFs (if image embedded) or increase performance since the FP10 drawing API is faster than loading external images during run-time.

Create interactivity scaffolding

I used Catalyst many times to create simple wire framing for interactivity. For instance, let’s say you have three components that you want to create animation (states) on certain user gesture, you can create boxed using Rectangle and convert them into ‘Custom / Generic Component’ then add the different states and interactivity. Export the project as FXP and then use the files as the scaffolding in Flash Builder and replace the custom component with the real component.

Designers and developers can work in parallel

The designer can create the pixel and adjust the pixel as you need to make changes. So while you will be the one converting the pixel into code, you can work with the designer to make changes as you need them. For instance, you may notice that adding a shade to a vector graphic in Illustrator will convert the graphic into an image in Catalyst that doesn’t happens all the time but in certain cases, so you can work with the designer and have these images adjusted so they can turn into FXG code. As you work with the designer you can show him/her how you are working with Catalyst so the designer can slowly take over some of Catalyst work when he/she is ready.

I am sure that as Catalyst rolls out of Beta the round tripping and integration with FB4 will be easier, meanwhile have fun and enjoy the tool when you can.

Cheers, Elad Elrom