What is Flash Catalyst?

Flash Catalyst, previously called "Adobe Thermo", is an application specifically developed to approach both designers and developers. It can easily transform any Photoshop or Illustrator Layout into a complete, animated and interactive website or Rich Internet Application based on the Flash Platform. The final result of Flash Catalyst can be imported and modified by Flash Builder (previously Flex Builder), allowing developers to have a beautiful layout ready to be coded. The application is packed with features which allow designers to take a simple layout, add effects and then publish in flash platform without having to write a single line of code! This is the power of Flash Catalyst.

The Concept! The Evolution!

After the very first MAX talk about a new fantastic tool named "Thermo", all the RIA and Flash community blogs and forums were filled with some amazing videos. In these videos we could see a static Adobe Illustrator Layout being transformed into a fully functional application in few minutes. Adobe was getting prepared to impress even further..

This was in October 2007, meanwhile Thermo became Catalyst, another year passed and we could still only find scarce photos at a few conferences. At the same time, Flex 4 started to gain attention with almost weekly news. Thermo seemed to have disappeared.

November 2008; an unexpected date! Adobe distributed free preview copies of Flash Catalyst, only for MAC OS and Gumbo (Gumbo was the code name for Flash Builder 4). Developers and designers started to pay more attention to Adobe labs, but unfortunately, until June 2009, nothing more was heard...

June. 2009. On the first day of the month (finally) Adobe released the Flash Catalyst first public beta. Well, things start here!

The Flash Catalyst IDE

The IDE is well designed and divided, it's intuitive and elements are easy to find. I'll discuss these panels a little further. Note that my OS is in French, so if you already know FC and your OS is in other language you might find some differences, but I'll name them also in English.

At the top left, the very first panel we see is the "States / Pages". These are the states of the application. Imagine, on first state you have a login panel, on the second one you have the main application. These states are easily identified as the following image shows!

The application will load on the first state and if you want to go to the second state, you will need to perform some tricks (well... only one trick - currentState="Page2"), but in Flash Catalyst things are made with some style. We put a simple button on the "Stage" and make it change to "Page2" with onClick interaction.

The second panel is where we put all our stuff, if you import an Photoshop File or Illustrator File all the elements will appear here. If you work with Flash and Flex you can consider this the main stage. See how similar it is:

You can also find a button at the top right corner, which refreshes the stage. This is useful when the stage contains many things and for some reason Flash Catalyst forgets to update changes automatically.

The third panel is the "Timelines" panel and it holds some big surprises. Flash catalyst has a timeline, but if you expect it to function like Flash's Timeline, you'll find that you're mistaken. This timeline is very limited and its major purpose is to create smooth animations between Pages (transition from Page 1 to Page 2 and reverse) with some elements and simple effects like fade, move, rotate. This panel might be a little hard to understand, but within a short space of time you'll think differently. Let's take a look at it!

In this panel, you'll find on the left the State/Page transitions and the Action Sequences (no, this was not translated to French) where you can create custom actions and effects. When a "real" layout is loadded and transformed into elements, they will appear on this timeline. You can apply a specific effect to just one specific component. This timeline works similarly to the Flash Animation Panel but in here you specify the start and end time of the effect or transition. You'll see in the next image what I'm talking about, this was made with a simple layout:

As I've explained, on the left you will find the "Page1" components, in the center you have the animation timeline and on the right (not shown before) the "Page2" components. You can put a separate effect on each side component; here the "Page1" elements start to FadeOut, then halfway through, the "Page2" elements start to FadeIn, giving a very smooth transition effect.

We can also see one of the best Flash Catalyst features here; the Preview button (the little "Play" button in the middle). If you have some transitions, effects or sequences, just press this button and you'll see the animation on stage without leaving the IDE. This is really useful, believe me!

The next panel is the "Utils / Tools" panel and in here you'll find some native Flash / Flex components such as shapes, text, the zoom and select tools.

At the bottom of this one, you have the common "Calques / Layers" panel, where you can organize your application elements. If you open a PSD or AI file, the layer order will remain the same; everything will be in the same place. If you have things well separated in Photoshop or Illustrator, you'll also benefit from it in here! You have your imported layout all here. If you're making a project from a empty template, this is where the things will appear when they're added to stage. See the panel:

The following panel is the most complete. It contains three main parts, the Components, the Library and the "Data" panel:

• The Components (Wireframe Components): Some of the common Flash / Flex components like buttons, scrollbars, checkbox, datalist... they can be drag & dropped onto the stage.
• The Library (Bibliotheque): The components used in the application. These can be common components, but also custom components. Custom components can me made from our layout, with the "Element Options" panel, it's a Gray, nameless panel which I'll explain last.
• The "Temp Data Generation" (Creation-Donnes de Temps) panel: In here we can generate custom data for a datalist, this is normally used to generate datalist entries (rows) to preview the final result.

See how it looks!

The last panel is the "Properties / Propriétés" where you can find information about a selected element on the stage. For example, if you click on a Text element, here you can define its properties such as color, font, size...

Lastly, the magic "Nameless" Panel, the panel I called "Element Options" before. This is actually the most important panel of all; it performs all the magic in Flash Catalyst. It's a back / gray-black panel which will appear when you click something on the stage. Clicking any one part of a layout will open this panel and it contains 3 major sections:

• The "artwork", where you can convert the selected element (Convert artwork) into native flash components as a scrollbar or button. Alternatively, this where you edit element parts when the artwork is already converted into native element (Edit element appearance). In here you'll find an element's states which can be edited (eg. Over, Out, Enables, Disabled, etc...).
• The second section is the application interactions. Here you can define the type of interaction that can be made with the element/component and application, generally the onLoad actions.
• Finally, the custom interactions panel. This will only be available when the element is already an application common component. Here you can perform actions according to the element like RollOver, RollOut, Change, Click... You can also call the Timeline animation by changing the state.

Let's have a look at it..

Well, basically our IDE is presented. However, we're forgetting one thing, something that designers may not be interested in, but it's important to developers. The Code. In the top right corner, you have a combobox where you can select the Design or Code view. If you click on it and are not familiar with flex, you'll probably close it immediately, but if you're a Flex developer you'll want to explore this carefully. You'll find many new things (especially if you develop in Flex 3) which are Flash Builder 4 orientated. The language is MXML with a few elements in ActionScript. You'll also see a Project Explorer where you'll find everything which has already been converted into application MXML elements and components ready to be used in Flash Builder. This is a whole other topic and if you want to learn more I recommend you read the great review which Jesse Freeman wrote about Flash Builder 4.

One of the other cool things is that the project is ready to use and also ready to be visualized. Just go to File > Run project (CTRL+ENTER on Win), your project is compiled and opened in a browser.

The Simplicity.

This can be misunderstood, Flash Catalyst is not easy to use and might well be confusing to begin with, but yes! It really make the things simple. Just design your layout, or get the layout from your designer in a Photoshop or Illustrator file, select your file and create a new Flash Catalyst project from it. Things will look exactly the same in Flash Catalyst. From here just convert the elements to which you want to add behavior, generate some pages, some transitions, test the project and save it. That's all! It's ready for the developer's hands!

The Generated Code

For designers this isn't necessarily of interest, but for developers this could be the most difficult point in FC. As all the elements and properties code is auto-generated, the code will need a good review and probably some modifications to work according to the developer's needs. In Flash Catalyst we can already see the new Flash vector engine in action; if you load some vector stuff into Flash catalyst, you'll find in the code some "Groups", "Stroke", "Rect", "Fill" and "Path" elements with some data. This is how Flash designs vector elements. A simple vector arrow will produce this code:

<s:Path winding="nonZero" ai:knockout="0" data="M 0 21.559 L 8.91 10.
779 L 0 0 L 23.156 10.779 L 0 21.559 Z">

These elements are the implementation of the new Flash 10 / Flex FXG specification that allow developers to use XML style elements or groups of elements to draw in flash, using not only native elements as circles, rectangles, text or curves but also more complex graphics by indicating vector information.

You'll find many states and mainly Flex 4 MXML code that is a little different from Flex 3 and completely new for Flash Developers or Flex beginners.

Conclusion

It's a fantastic application! Have no doubt!

To begin with, we developers can now really work together with designers, show them the developer point-of-view and some application interactions before going to the application development, speeding the whole process up. It will be easy to find fantastic applications and sites built with FC, the creativity will now invade Rich Internet Applications. Saying that, developers will have to pay attention. The generated code is pretty extensive and every change has an impact on the layout. Placing things in Flash Catalyst and having nice generated code is one thing, but coding something according to FC code will sometimes burn a developer's brain!

Flash Catalyst brings many new things to explore, but to be honest I expected more. The components library is reduced, the interaction with elements is also reduced, imported text doesn't always retain its original quality and some things don't work correctly (especially in DataList with a few rows...). Saying that, this is only a beta, right?! We still have to wait for the final release.

Definitively Flash Catalyst will reach the masses but the generated code and Flash Builder 4 interaction will need some time to gain popularity, mainly because the new Flex 4 specifications are very different from Flex 3.

For those who want to learn more about Flash Catalyst, visit the Catalyst Tutorial Page on Adobe Labs.

Thanks for reading, it would be great to hear what you have to say!