We’ve just launched the first public beta for Flash Builder 4 (previously called Flex Builder) and Flash Catalyst. You can grab them from Adobe Labs.
Flash Catalyst is our newest tool in the RIA toolbox. Created with the designer in mind, it is a tool for creating the application interface and interaction. That doesn’t mean that developers can’t use it :D Basically, using Flash Catalyst, you can transform a static design (an Illustrator file or Photoshop file) into a Flex application. You can transform graphic items into text inputs, buttons, list, scroll bars, and so on. And while doing that, the tool creates the UI with the the exact look and feel of the original design.
After creating the UI, the designer can further refine the UI by creating the different states of the app and the transitions (with or without animations) from one state to another. He can also set the transitions to be started as a result of the user interaction with the UI controls. And all of this is done without coding. You can see below my Flash Catalyst workspace with a project. Keep in mind that at any given point you can edit an element back in Illustrator or Photoshop, and the tool will update the design.
It is worth mentioning that Catalyst can be used either in production stages (making designer / developer collaboration more productive), or in the prototyping phase (the designer can create prototypes to be shared with clients).
The result of the designer work is saved in a new Flex project format, called FXP. And this file can be opened by the developer in Flash Builder 4. As one might expect, Flash Builder 4 improves upon Flex Builder 3 both in terms of evolution and revolution. I will not talk here about the evolutionary features (improved code formatting, compiler, debugger, and so on). I’d rather talk about the revolutionary features. One of the them is the ability to work with Flash Catalyst projects. This means that the developer can focus on building the communication layer, and client business logic instead of “wasting” important cycles on things like transforming pictures into working Flex components.
This is an image of Flash Builder with the imported FXP project.
In Flash Builder 4 we’ve added new features to facilitate how a developer “consumes” server-side services. We have wizards that can introspect the server service and generate the ActionScript code in order to use it. We have wizards to generate the value object (or data object), and based on this object you can generate a Flex form.
What made this developer/designer workflow possible is the Flex framework, the fourth incarnation. We changed the component model (Spark is the name for the new components, Halo is the name for the Flex 3 set) in order to separate the logic/data from appearance. At the same time we introduced a series of new graphic primitives (MXML graphic). I have to add that while we have implemented round-trip between the Flash Catalyst and Illustrator/Photoshop, there is no built-in round trip between Flash Builder 4 and Flash Catalyst. But there are some ways to enable round trip. More on this matter in the near future.
If you can not tell yet, I am very excited to see these tools out, and I’m really curious to hear what you think. And just to keep it on the fun side, now the designers have to work more (they are in control of the final UI; no more passing the pictures to developers and blaming them if it doesn’t look good), and developers can have more time for beer and reading blogs (like mine, for example :D) because of the new wizards that make it so easy to connect the UI to the server data.
Where to go from here
First of all make sure you download these tools and play/work seriously with them. My belief is that they could save you loads of time and money.
Next, if you want to give us feedback, please use the dedicated forums.
And finally, if you want to learn more, have a look here: what’s new in Flash Builder 4, Flash Catalyst, and the Flex 4 SDK. Andrew Shorten has a tutorial that gives you a quick overview of what is possible with these two tools.