As I watched an intro tutorial for the public beta 2 of Adobe Flash Catalyst, I found myself having a hard time saying anything else besides "wow".

Flash designers are used to timelines and creating an experience in a visual environment with a range of tools suited for artists, while Flex programmers build RIAs (Rich Internet applications) using mxml and Actionscript in a mostly code based view environment. (Sure, you can drag and drop components but do programmers really do much visual layout?) Even though Actionscript is used in Flash as well, I will be focusing this example on the Flash designers that use it for design only. Ok where were we... For the most part, developers are not expected to make some cool looking UI, and designers are not expected to program the app. Of course there is always overlap and exceptions, but this seems like the standard way. As a Flash designer who started out using the timeline to create movies, I could definitely see where the line was drawn in the sand when it crossed over to programming. If I couldn't do it with a timeline or a paintbrush tool, it was a job for someone else. As many of you might know, running or working for a small business forces you to become a jack of all trades, hence I eventually picked up programming. As both a designer and a programmer, I can say that making Flex apps look slick is not an easy challenge. Enter Flash Catalyst... 

Flash Catalyst is new to the arsenal of products from Adobe and bridges the gap between designers and programmers. Either a designer or a programmer (or anyone who knows how to use a computer) could create the starting view of an app using this tool quickly and easily. Starting off by importing a layered photoshop or illustrator file, you can end up with a mocked up working app complete with button rollovers, scrolling data lists with dummy data, smooth state transitions, and much more. When the front end is done being built, the file can be imported into Flash Builder 4 where all of the under-workings can be exposed, configured, plugged into live data and transform into a real app. Yeah, it's that cool.

Excitedly waiting for Flash Catalyst to download, I decided that a band widget would be a great first example of what was possible using this new program. I hurriedly started a design in Photoshop - little did I know, this would end up taking the longest time out of all of the steps for building the widget. For those with good Photoshop (or Illustrator) manners, naming layers and folders will be very helpful as components in Flash Catalyst get their names from the layers. I also found out that layer effects don't translate very well, so I ended up going back a few times to flatten the effects into regular layers - the same works with fonts if you don't need to have them dynamically populated later. Upon opening Flash Catalyst, I chose my Photoshop file from the application entry prompt and it began the import. Once the file was loaded, I felt like a kid playing with a new toy Christmas morning. The feeling I got while clicking around was very similar to that of Flash - a visual experience. There is a code view inside Catalyst, but I opted to stick with the default settings as a designer would probably do. I had already seen some video tutorials, so I was somewhat familiar with the HUD, or heads up display, and the other parts of the application like viewing states (very similar to button state viewing in Flash). It took about 15 minutes to put together the button rollovers and the list display, but I imagine it would have only been 2 or 3 if I knew exactly what I was doing in there. So this is supposed to just export to Flash Builder 4 and become an mxml/actionscript project complete with all the necessary things to make it work? Amazingly, that is exactly what happened next. 

Before I installed Flash Builder 4 I had to make sure I could still run Flex 3 as I have ongoing projects, and I'm sure I'll still be using that for some time till Fb 4 is a release candidate. Fortunately, the two apps play nicely and I was on my way importing the fxp file. Things looked the same (thank god) on the outside, but further inspection of the code exposed many new things under the hood. I won't get into all of that here, but it was all necessary to be able to support layers, typefaces, state changes and added namespaces. From here on out it progressed like the other flex apps before it - I didn't go with any MVC architecture, but It looks like this would work very well with most of them. It saved all the components in the components folder, so if you are using Cairngorm and have your components folder buried in com.blahblah.blahblah you'll have to change those declarations.

So how much time was saved with Flash Catalyst? I'm not kidding, I think it would have taken me the greater part of day trying to do the same thing with the way I do things now in flex. In addition, it allowed me to do things I would never have even attempted to do with flex. The UI is mostly graphical and looks like it was made in Flash. The boring greyish looking flex app feeling was nowhere to be found, even though this is in fact a flex app. If I were going to make a larger application, I would definitely incorporate vector art or built in UI components as PNG based files can get rather large if you have too many files. 

That's it for now, take a look at the tutorial links below to see Adobe Flash Catalyst in action. You can see my first app below as well.