By Oliver Merk, Principal Consultant

Adobe’s Flex 4 platform and tools are expected to be released in the first half of 2010.

Of note:

1. Flex Builder has been re-christened Flash Builder to promote the Flash platform.

2. The Flex SDK has been turned on its head with the introduction of the Spark component set; skinning will never be the same (thank goodness!).

3. A new product called Flash Catalyst CS5 will finally give designers a chance to realize their creations within the Flex framework.

In this entry, I’ll start with the theme that will have the most impact on everyone on the typical RIA team.

Designer/Developer Workflow

Adobe Flash Catalyst joins Photoshop, Illustrator and Fireworks in the RIA designer’s toolbox.

Originally a lot of us Flex developers got very excited when this new product was announced as Thermo back at Adobe MAX 2007 in Chicago. But Catalyst is distinctly not aimed at Flex application development as you might currently understand it.

Rather, Catalyst allows designers to do three critical things, which I’ll detail below:

1. Easily import assets from the above mentioned applications for use in a Flex/AIR application.

2. Quickly prototype an application for demonstration purposes.

3. Create fully skinned components which can be delivered to a Flex developer for integration into a working application.

Let’s dig into these a bit further.

What the FXG!

Most professional designers work in Photoshop, Illustrator or the two in combination. Being Adobe products, it’s not hard to guess that the integration between Catalyst and these stalwarts is tight.

With Catalyst, designers tasked with creating Flex application GUIs can begin where they’re comfortable, in Photoshop, Illustrator or, my personal favorite, Fireworks.

The native formats of these programs will be importable into Catalyst as a library of assets. Files such as .PSD, .AI and .PNG can not only be imported into Catalyst, but their layers will be maintained as well.

Now the first question an astute designer will ask is, what if I want to go back to Photoshop and tweak my artwork?

Known as round-tripping, this feature is already incorporated into the latest beta builds of Catalyst. Right within Catalyst, the designer will choose to edit an asset and the appropriate program will open with the artwork ready to edit. Upon saving, the designer returns to Catalyst, which has remained open, and sees the changes immediately on screen.

But there’s another way to move assets around: using the new FXG file format.

This new format is similar to the well-intentioned Open Source SVG format we’ve heard about for many years. FXG is an archive format which contains all the information (MXML code and binary assets) required to import and export Flex components and assets using Photoshop, Illustrator, Fireworks, Catalyst. The new Flash Builder 4 can also open FXG files as imported projects.

Show me!

One of the greatest challenges in creating RIAs for clients is getting them to visualize what the completed application might look like. Currently, your options include using Flex Builder’s design mode (still hard to apply complex skinning) or mocking up something in Open Office Impress or the ubiquitous Powerpoint, which are never very accurate.

With Catalyst, designers will be able to quickly prototype not only the visual aspects of the application, but most of its behavior as well. For example, lists can be skinned and populated with temporary data, with minimal effort, so that a client can see the component as it will appear in the final application.

In fact, Catalyst is so easy to use that I wonder how long it will be before sales people realize that they can use it to help clients visualize an application and close the deal a lot quicker. I recommend Catalyst as a sales and marketing tool for those who are tasked with demonstrating the power of RIAs to potential customers but don’t have the time or resources to enlist a designer or developer to create a mock-up.

What About Us Programmers?

I said earlier that Catalyst is not a hard core developer tool and is clearly geared towards developers.

However, it will still make developers’ lives easier in several ways:

1. For those tasked with implementing a design and given a Photoshop file, Catalyst will make short work of converting the original artwork into usable components which can be imported into Flash Builder. If you’re a Flex developer who does a lot of design implementation, Catalyst will be a game-changer for you.

2. Catalyst gives the designer the tools to define not only the skin, but the behavioral characteristics of components. Separate components can be composed in Catalyst and delivered to the developer for integration into a Flex or AIR application. These components can be delivered as FXGs or as SWC libraries.

Here’s another great reason to check out Catalyst. I could argue that the new Flex 4 SDK is almost a whole new platform compared to Flex 3. There’s going to be a learning curve when you first try to grasp how components are composed and while investigating all the cool new features in this release. Because Catalyst generates MXML code, a developer could study this as a good introduction to how things will fit together in the new framework.

Smells good! Is it baked yet?

Catalyst is in its late beta stage and is likely to be released in the first half of 2010. While round-tripping between Catalyst and the graphics applications is almost complete, the round trip between Catalyst and Flash Builder may have to wait for a point upgrade; though I really hope they get it in for the first release.

But that shouldn’t stop you from downloading the latest beta and checking out Catalyst for yourself. You can learn more about it and download a beta from http://labs.adobe.com/technologies/flashcatalyst/.

Have fun!

Adobe Flash Catalyst Beta