Yesterday, Adobe made a pleasant surprise and quietly announced that the Beta version of Flash Catalyst is finally out. I’ve been teased by many presentations over the past few months and I was excited I could finally get my hands on this product and try it out.
In case you don’t know what Catalyst is, it’s an ambitious effort to bridge the gap between design and development workflows. This is a very interesting topic to me as I worked hard with the Expression Blend team from 2004 to 2007 to solve that problem. Blend and Catalyst are very different from each other, and I will not be attempting a comparison here.
I played with Catalyst for a couple of hours yesterday, simulating some workflows for a couple of RIAs that we’ve worked on before, and trying to get some graphics into Flex for a project that we’re currently working on.
Here are some of my first impressions of the tool
- The import from AI and PSD is flawless. Graphical elements appear exactly the same as they do in Illustrator and Photoshop.
- The environment looks familiar with existing Adobe graphics and illustration tools, and the keyboard shortcuts and modifiers work the same, providing a minimal learning curve to get started with the tool.
- The tool converts graphical elements into native Flex drawing elements. This leads to a very lightweight application that maintains high quality look and feel since nothing is rasterized. ( Some components got converted from Photoshop into sliced CSS, so I am assuming that the native graphics is only available for imported Illustrator files only, which makes sense).
- The new timeline provides state based animation and effects rather than keyframe based animation, a model that I admire in Flex over Flash, and that’s far more convenient for Rich Internet Applications.
- It is still unclear to me who should be using Catalyst. I happen to be a devigner (developer/designer) and I know how to move between tools. Since Catalyst blends many aspects from Photoshop, Illustrator, Flash and Flex, I’d imagine it’s convenient for both designers and developers to use.
- The fact that Catalyst doesn’t work with Fireworks is bothersome to me, as this is my favorite program for mocking up interfaces and delivering graphical assets. During a Protofarm presentation last week, Adobe mentioned that support for Fireworks will come in future versions. I guess I’ll have to be patient and wait.
- I strongly believe that Catalyst should be integrated into Flex, and not a separate tool. May be I am biased by what I’ve learned while working on Blend and doing my earlier research on programmer’s productivity, but I know that there is some resistance from developers and designers for adopting new tools. It also makes sense to integrate it into Flex Builder as it’s got many features that already exist in Flex (State-based animation, code/design views, etc…)
- My biggest challenge using Catalyst would be round trip design/development workflows. Almost every RIA project we’ve worked on involved late transfer of graphical assets into the application after the wireframes have been delivered, a prototype has been developed, several iterations of prototyping and redesign have been performed, and final assets were delivered.
- While CSS separates presentation logic from business logic, Catalyst makes the presentation assets part of the code, which is a drawback for me. We’ve enjoyed switching assets dynamically on several projects by simply providing a different CSS file that was blissfully generated from Fireworks through the Flex extension, and we’ve worked on several projects where clients needed the interface to be skinned dynamically. My initial investigation into Catalyst didn’t provide a way for me to do this, at least not easily.
- Currently there are half-dozen UI components that are supported. When I tried converting graphics for a tab container, I couldn’t find a corresponding UI component. I hope that Adobe will ship the final version of Catalyst with as many standard components as Flex currently supports
- No library support: An Illustrator file typically contains multiple instances of the same component. For instance, a dialog box design would contain two buttons for Ok and Cancel, using the same graphics as an Illustrator symbol. There is no way that I found to designate an existing button graphics to a previously converted button instance. Especially with PSD files being converted by Catalyst into bitmap images, it would be nice to have a way to unify the button designs that are created. Moreover, it would be awesome if Catalyst could parse Illustrator symbols and automatically convert them to controls based on some naming convention.
- Navigation in and out of groups and layers was a bit hard. Double clicking does not navigate into groups, which made it hard to navigate sub-elements for conversion or animation.
- The timeline needs some work for it to become more intuitive. Currently, there are no UI hints or affordance mechanism to call to one action or another once a state is selected. There is definitely a good amount of empty space before any transition is created to hint users about what needs to be done.
Flash Catalyst is ideal if you’re building a new RIA based on Flex Builder/Actionscript and you’ve got your user interface assets ready. Overall, I am very pleased by the approach that Adobe is taking to help bridge the gap between designers and developers. I believe that this is a very important gap to fill in every software life cycle, and I give Adobe credit for being one of the first movers into that space with a very robust tool.
If you’d like to learn more info about Flash Catalyst, here is a short video by Kevin Lynch: