At MAX 2008, Adobe demonstrated and distributed to attendees a preview release of Flash Catalyst, the Rich Internet Application (RIA) interaction design tool formerly known as Thermo, which was first introduced 13 months previously at MAX 2007.
Flash Catalyst imports user interface (UI) compositions designed with Photoshop CS4, Illustrator CS4 or Fireworks CS4 and converts the artwork into Flex MXML mark-up, preserving all of the original attributes of the imported file. The MAX preview release of Flash Catalyst is Mac only and has limited functionality, and while it’s not even considered an alpha release it’s definitely stable enough to use in a development environment. In an interesting move, the preview release was only distributed at MAX, a public alpha or beta release for both Mac and Windows is anticipated in March 2009.
Flash Catalyst is built on top of Eclipse, like Adobe’s Flex IDE Flex Builder. Adobe demonstrated a new ColdFusion IDE at MAX this year which is codenamed Bolt and is also based on Eclipse - both Flash Catalyst and Bolt would be offered as stand-alone installations and Eclipse plug-ins to combine into a mega-Adobe development platform.
The CS4 release of Adobe’s design products is an important part of the company’s next stage of RIA tools as it includes its new XML-based graphics interchange format: FXG. While Adobe was involved for some time with SVG it found that it had limitations for future implementations of Flash — FXG was developed as a result. Flex developers have had the opportunity to try FXG out for a while as it’s part of the public beta of Flex 4.0, codenamed Gumbo, which offers improvements in the way components can be visually skinned. Flash Player 10 also supports FXG.
Flash Catalyst is most likely to be used by designers, as they will be able to use it to convert their UI and application designs into prototypes with working interactions. Take a shopping cart as an example, the first thing that you’ll notice after importing it from Photoshop is that all the original layers have been preserved in Flash Catalyst, any text is still editable as are the design filters that may have been applied, such as drop shadows.
What Adobe identified was the number of throwaways that occur during the web application build process: from Visio, to wireframe, to the Photoshop design that typically is used as a guide for layout by the developer implementing the design into a RIA project. The last step is often the most mangled as it’s not exactly easy to implement the design exactly as the designer created it. Flash Catalyst is a tool that the designer can use to produce a working prototype that can be handed over to a developer to then add interactions to. On the other side of the coin, Flash Catalyst means that the developer can quickly start applying a design to a Flex-based project once they’ve received the Photoshop composition from the designer.
The Flash Catalyst interface will be familiar to users of Adobe products, with panels for layers, project library, components and timeline. The number of component types available for this release is limited to toggle and radio buttons, scrollbars, text input and check box.
New to Flash Catalyst is the head up display (HUD), a product of Adobe’s UX (User eXperience) design group — it’s a new contextual semi-transparent floating panel. Select a design object and the HUD options include converting it to a component, select an interactive object and instead you’ll see specific options for it, select nothing and the HUD minimises. One inspiration for the HUD was the fact that so many of us are either using larger monitors or multiple monitors and how it would be useful to have a floating panel closer to the action that provided commonly used tasks.
Selecting artwork and using an option from the HUD to convert to component can convert graphical objects into interactive objects like buttons quickly and easily. Once converted it’s easy to edit a button’s state, although Flash Catalyst has limited graphics editing tools at this stage. Inter-application workflow currently has limited support; you can round trip with the preview release to Illustrator CS4, with button states preserved in Illustrator — all via FXG interchange.
Flash Catalyst projects are saved in a single file format that can be opened by Flex Builder 4, which is currently in development and was provided as a preview release alongside the Flash Catalyst preview. Components like buttons are saved in the project internally as separate files, the code for these can be opened and edited if necessary once the project has been imported. Flash Catalyst can also publish a project to a Flash movie or SWF that can run in Flash Player 10.
Interactions are added to components from the HUD with standard onClick, onRollover and onRollout available for a button. The default actions are limited to a transition between application states and playing an action sequence in the timeline. Flash Catalyst timelines are different to Flash timelines that a lot of developers are already familiar with as they are time based instead of frame based which Flash is. The timeline panel in Flash Catalyst is also different; it’s not like the new motion editor in Flash CS4 but more like the timeline feature of Apple Motion.
Content changes in Flash Catalyst are managed by changing view states, the UI refers to them as “pages/states” and the interface shows the different states as though they are pages of content. This is a good metaphor for a designer working on a piece of interactive media for the first time, but it will be interesting to see how this works as a block of code for a developer as view states have always been easier managed via the design view in Flex Builder. View states do not add any additional overhead to the performance of a Flex-based application.
While Flash Catalyst is part of the Flash product line-up it’s not able to open a Flash file (FLA) and modify that, although it’s able to use a SWF as a design asset.
The code produced by Flash Catalyst could be used by a developer today, provided they also had the beta of the Flex 4 SDK, which is available, to compile the code it produces. That output could be SWF compatible with Flash Player 10 or an application authored for Adobe AIR 1.5 both of which are freely available now.