Round-trip Flash Catalyst and Flash Builder 4?

One question I heard a lot in the last weeks was about the round-trip between Flash Catalyst and Flash Builder 4. Out of the box, there is no round-trip between these two products. We do, however, support round trip between Flash Catalyst and Illustrator/Photoshop, and between Flash Builder 4 and Flash Professional CS 4.

Let’s take this workflow:

The designer creates the user interface in Illustrator
Using Flash Catalyst he transforms the static design into a functional design
He hands the FXP project created by the Flash Catalyst tool to the developer
The developer imports the FXP project into Flash Builder 4 and starts to add client logic and data services
The designer has to change something, and wants to work directly on the developer’s project.

This is the message you get when you try step 5:

What are the challenges for a round-trip between Fc and Fb?

Why does this limitation exist in the first place? Before answering this question, let me tell you that we definitely want to have a round-trip between these two products, and we might have it in the future (keep in mind that Flash Catalyst is a version 1 product). Now, if you have a look at how a developer can work in Flash Builder 4 you can see two main approaches: Design view, or Code view. Sometimes you create custom components, and you do a lot of tricks and magic in order to create the desired application, and when you switch to Design view, nothing appears on the screen. This is really no big deal, because you can continue work in Code view, and press the Run button to check the application.

However, if you are the designer, and you work in Flash Catalyst, then all you have is the design view. If the design view can not render the application user interface and interactions on the stage, then the designer can’t work at all. Imagine trying to work on an Illustrator file without being able to visualize the document. It is really the same situation.

The solution

After giving this matter some thought, I think there is some kind of a round-trip that can be employed between these two products.

There are couple of things you need to do in order to succeed:

The designer always keeps an instance of the FXP project that will not be touched by the developer. For example when he gives the FXP to the developer, he makes sure that he also keeps a copy of that file.
The developer does his magic on the file received from the designer.

Now, suppose the designer has to modify the UI of the application to accommodate client’s wishes. He opens his FXP project, and makes all the changes. When he finishes, he gives a copy of the project to the developer. It doesn’t matter what kind of changes the designer made; if you look at the project you might find: new files, files deleted, existing files changed.

Which means that the easiest way to merge the designer changes into the developer project is by using a Merge tool or File/Folder Comparison tool such as Araxis. And just to illustrate my point, I added a new button in Flash Catalyst, then I saved the project. After this I unzipped the new project in a folder called v2 and the first version (or the developer’s project) in a folder called v1. Then, using Araxis I compare the two folders:

I can see very quickly if there are new files (like Button4.mxml), or if there are changes in the existing files (like Main.mxml). In the next image you can see the differences highlighted for Main.mxml.

Finally, there is a way to see the generated code in Flash Catalyst it self, and even to change it. Flash Catalyst offers a Code view (on the top-right corner you can choose between Code and Design view):

If you go in Code view, actually you can see the project as it will appear in Flash Builder when imported. While being in Code view, if you open an MXML file, you can see the code, but you cannot change it. And this is perfect, because, as I said, this is a designer tool and designers usually don’t work with code, but with tools. If you really want to play with the code inside of Flash Catalyst (maybe you are a designer/developer), you right-click on a file and choose to open it with Text Editor, then you can actually change it inside of the tool. But keep in mind, you might ruin the Design view by doing this.

Conclusion

I am not saying this is easy to do. But I really think it can speed up the integration of the designer changes into the developer project. And because we are still working on version one of the Flash Catalyst, we are still thinking and figuring out things.

Please, let me know what your opinion is on this matter.

June 23, 2009 | Filed Under Flash Builder, Flash Catalyst, Tutorials

Comments

RSS feed for comments on this post.

12 Responses to “Round-trip Flash Catalyst and Flash Builder 4?”

Georges Jentgen [http://www.isageo.com/geo] on June 23rd, 2009 11:59 am

Well I believe that there might be a need for being able to round trip from Fc to FB and back. But ultimately I believe that Fc will more be used for sub-projects of a big flex project.

So in a recent case a designer put together a new shopfinder design for our website. Instead of putting it into the existing project, she created a new project just for the shopfinder module.

So working in Fc on smaller projects eliminates the urge to have the ability to round-trip back and forth. It would be great to have it, but in my opinion, it’s not the most needed feature.

And because you can already show a Fc project to a customer as a working prototype you only send it to the developer as soon as it’s finished.
Mihai Corlan on June 23rd, 2009 12:53 pm

@Georges Jentgen

I think this is a valuable point of view. thanks for your input.
Jeffrey Gilbert on June 23rd, 2009 5:19 pm

Wanna do us a favor and have someone put together a perspective for just this task?
Mihai Corlan on June 24th, 2009 9:38 am

@Jeffrey Gilbert

This is an excellent idea Why not creating an Eclipse plugin? Any one with Eclipse/Java experience wants to take up on this task?
Peter Molgaard [http://blog.petermolgaard.com] on June 24th, 2009 4:37 pm

Thanks Mihai for sharing this view.. its nice to have someone from Adobe accepting that we need roundtripping from day one… thanks buddy, for sharing this perspective on the situation with the limited scope for FC 1.0
Yet another Flash Catalyst / Builder workflow method | Flex Stuff by Gilles Guillemin [http://www.flexstuff.co.uk/2009/06/23/yet-another-flash-catalyst-builder-workflow-method/] on June 24th, 2009 4:37 pm

[...] Mihai Corlan made a Round-trip Flash Catalyst and Flash Builder 4. Not the most straightforward ever [...]
maarten [http://blog.arten.be] on June 26th, 2009 5:38 pm

I’m sorry but this is not something that qualifies as a “round trip”.
It’s “a probable solution” but to call it a round trip is a huge overstatement…
Mihai Corlan on June 27th, 2009 3:45 pm

@maarten

I am not calling it a round-trip, but a solution for the time being. Thanks!
Rupert on July 9th, 2009 6:48 pm

Hi

[warning: Adobe N00b just arrived from Java world -- please forgive ]

What other alternatives are there?

My initial thought was similar to Georges’ using separate projects. E.g. Fc project(s) have all design files never to be touched by the developers. Fb project(s) integrate them by kicking the Fc files off after injecting hooks (handlers, etc) in (perhaps by finding pre-agreed points by ID — rather akin to a JavaScript approach).

Is this possible? (could someone point me at references if this is common lore that I just haven’t seen yet? please + thank you!)

Cheers, R.
jeff on July 20th, 2009 11:49 am

Just thought i’d give you a perspective from a UX prototyper.

My job is to prototype user-experiences as fast as possible – mainly to put into user testing. I’m presently evaluating Catalyst and Flex.

Despite having a degree in computer science, my background is heavy in graphic design experience, so Catalyst looks like a great tool to me, but round-trip editing looks like it would be pretty crucial. Let me give you an example of why:

1. Made some artwork into a button component in FC and attached an interaction to it.

2. Noticed that the cursor didn’t change to a hand when hovering over the button. Couldn’t find a place to change this in FC.

3. Opened up the FXP in FB, found the button and added ‘buttonMode=”true” ‘ to the code. All good, hand cursor shows when over the button now.

Problem is, now I want to go back into FC to add some more states. FC won’t let me…

I understand the problems outlined above – it would be easy to add stuff in FB that would be very difficult to represent in FC. However, I think it would be worthwhile allowing folks to take a FXP back into FC and give a warning like “This project has been modified outside FC, these modifications may make this project unstable”.

In a case like the one outlined above, where the code modification is fairly innocuous I can’t see why FC should have any big problems. If someone is skilled enough to be modifying an FXP outside FC, they’re informed enough to know how risky taking it back into FC is. Let the user make the decision.

BTW, I’m seeing a lot of potential for FC to make my life a lot easier – fast enough to prototype on the fly, good enough code generation to build on later.

– jeff
Faz on October 13th, 2009 6:45 pm

This feature is absolutely critical. I don’t see how the product can succeed without it and why some users see it as a low priority feature.

Having experienced the full workflow between Expression Blend and Visual Studio for Silverlight projects and seen the workflow interaction between UX/Graphics and the developers, this is what FC/FB ‘must’ be aiming for in v1. It’s crippled without it. There I was Beta2 would have it in

If you can resolve this as well as the performance issues in the product it’ll be a game changer. Until then, I’m a seriously frustrated fan!
Mihai Corlan on October 13th, 2009 8:39 pm

@Faz

I don’t think anyone thinks that this feature is low-priority. But I think many believe that even without this feature (yet) it is still a great tool to have it in your toolbox.