Post navigation

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.

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

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!)

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.

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!

Hey, I’m just reviewing this product for my company and just wanted to say I whole heartedly agree with @Faz

This is such a step in the right direction for Adobe but totally let down by not having this feature. I’m not a MS fan, but I too have used Expression blend and VS and it just works… Adobe need to get this right or suffer the consequences I’m afraid. Which would be a real shame.

The whole Flash, Silverlight and HTML5 arguments go by the wayside if developer tools (and browser support) exists to ensure we’re encourage in one direction or another. The ability to have round-trip development between developer and designer is a big factor in encouraging that direction.

All that said, this is an interesting idea and thank you so much for sharing it with us.

We had some Adobe experts/evangelists in recently demonstrating their updated stack and this topic came up again (as it always does). The answer was “it’s very difficult to do, msft haven’t managed it yet”. I said “they have and they’ve had it since Blend 1.0”. Clearly the guys from Adobe had never tried the competitor offering to make that sort of statement.

Basically, if you keep the same project/solution/file structure throughout your lifecycle/tooling this isn’t event a topic for debate, it just works as all the Silverlight developers will happily tell you.

C’mon adobe, if it’s hard you need to go back and understand why you made it ‘hard’. You own the whole stack!

I’m contracting on a Flex project with this very issue. If you want to work with a designer to edit or change the graphics originally created (meaning after the code has been applied in Flex/Flash Builder), you can’t reopen the project FC. In general, I can’t imagine how to use FC in a large project. I know that it’s only version 1, but seriously… it almost seems as if FC gives designers the ability to pass off complex wireframes as full flex apps. I really look forward to version 2.

hi i am from china, i am not good at english,we develop flash project with flex builder 3,now we want to update to flex builder 4,and try to Take advantage of catalyst，Unfortunatly,i have same of problems,it make me depressed，it is not satisfaction for my project at all.