First impression on Flash Catalyst and Flex Builder 4 - Part I

With the public beta for Flash Catalyst out, I decided to give it a try on a real project just to get a feel of what will be like to incorporate it into a regular workflow.

I work mostly with large projects and sometimes with teams that I probably know from just a few hours before I get placed right in the middle of the action. Co-workers expect guidance and clients want to see results immediately. So having a proper architecture is important but understanding workflows and interactions between the tools and people using them is fundamental to improve on teams performance and communications, so being able to bring Flash Catalyst into pipeline without causing much disruption is vital.

Step one from Photoshop to Flash Catalyst

I requested a design for a simple app from a Photoshop designer, a wireframe was provided along with comments about what I wanted as an initial interface. When the design was ready, I imported it into Flash Catalyst and indeed, it made a good job of keeping the design integrity.

However I quickly realized the following:

Flash catalyst takes the entire size of the canvas set in photoshop, my designer had created a nice background but I had to go back to him to get it removed. You could also hide the layer but I realized this a little too late (darn). However I think is cleaner just to remove assets you won’t use to keep your files small and more manageable.

Not all designers are diligent at naming *all* their layers and organizing and grouping their content in folders. I had to send it back for a second round to tide up a little more the layers and grouping assets in a logical manner in folders. This does not mean the designer is sloppy or anything but you quickly realize with Fc in the picture these details are very important and not necessarily obvious, but this is something that can be improved once done a couple of times.

Once I got it back, this time assets showed up nicely in folders, however another issue was that some designers use small shapes and lines overlapping to obtain the desired look and feel so this forced me to go and group these assets to make sure I can convert some pieces into components nicely. If you have a lot of these little lines and shapes this can be very time consuming. ( I hear is common to do this in printing work, so something to watch out for ).

Once things looked fine within Flash Catalyst, I decided to give the HUD a spin and start figuring out actions and transitions.

So far my first thoughts in terms of design are:

• It is important designers working with catalyst have a good chat with the developer to discuss the best way to arrange assets in such way that that components layer are nicely tuck together and perhaps the states are separated in folders.

• Layers also need to be named appropriately otherwise you will get a lot of generic names that will be to be changed later, so give them meaningful names.
• Buttons states need to be nicely done in layers to avoid round trips back to photoshop, round-tripping between Ps and Fc is a nice feature, but I if you have to go back and forth 20 times because you overlook details then I just think it’s not productive. I got rollOver states but not all the others, so this is easy to forget.

Our designer at first wanted nothing to do with Fc, so I intentionally ask him to sit with me while importing his Ps file and after going over a few states and adding a few actions he spontaneously said

maybe I can do this

and started playing with. This is definitely a good thing because Flash Catalyst is meant primarily at designers.

One think I must note is that some elements did not end up in the place as they were in Ps , nothing really significant but still, hopefully this will be perfected later.

The next step for me, will be porting the project to Flash Builder, for the final challenge. I am already a little preoccupied by this, as I like to take advantage of frameworks (particularly Cairngorm) so I see a lot of re-factoring involved and I am asking myself if I will be able to bring back the project to Fc after bringing Cairngorm into the project.

I tried it briefly and I got message from Fc saying The project was modified outside of Flash Catalyst and it would not let me import it back, but more on this shortly, so stay tuned for

First impression on Flash Catalyst and Flex Builder 4 - Part II

If you have any comments feel free to use the comments sections, what do you think about bringing Flash Catalyst into your workflow?

Flash Builder 4 Beta and Flash Catalyst Beta now available

Adobe Labs has made pubic beta versions of Flex Builder 4 now renamed into Flash Builder 4 as well as Flash Catalyst. Twitter is off the hook with comments about it since early this morning.

You can download both apps from Adobe Labs. It seems the apps install separately from your existing installations of Flex 3, so it's safe to install and play with them, without worrying about messing any Flex 3 projects.

I will be blogging about Flash Builder 4 and Catalyst this week so stay tuned, meanwhile enjoy and explore the new IDE's

BTW, what do you think of the new name Flash Builder 4 ?