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:

  1. The designer creates the user interface in Illustrator
  2. Using Flash Catalyst he transforms the static design into a functional design
  3. He hands the FXP project created by the Flash Catalyst tool to the developer
  4. The developer imports the FXP project into Flash Builder 4 and starts to add client logic and data services
  5. 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:

rs_01

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:

  1. 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.
  2. 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:

rt_02

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.

tr_05

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

rt_04

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.

20 thoughts on “Round-trip Flash Catalyst and Flash Builder 4?

  1. 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.

  2. @Georges Jentgen

    I think this is a valuable point of view. thanks for your input.

  3. Wanna do us a favor and have someone put together a perspective for just this task? :D

  4. @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?

  5. 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

  6. Pingback: Yet another Flash Catalyst / Builder workflow method | Flex Stuff by Gilles Guillemin

  7. 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…

  8. @maarten

    I am not calling it a round-trip, but a solution for the time being. Thanks!

  9. 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.

  10. 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

  11. 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!

  12. @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.

  13. @Mihai

    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.

    Regards

  14. i absolutely would appreciate a round-tripping capability for the cycle between FC and FB.

    As designer as well as developer you have often enough to face the problem that, like Jeff described above, you will need to change some design data in a way only FC can do..

    not even to speak of the usual customers requests to add this and that or change something.

    and then not being able to work on ther already advanced project just fails.

    And since FC really improved, its is leaving its status as pure small application creator, and by that it needs defenitally the round-tripping to get fully access to all that its capable to do.

    I hope that the existing import-funtion for FXP files in FC, and the general round-tripping policy adobe shows off with the new CS5 releases are a good sign that this will be included.

    And i kinda am not understanding why it didn’t already happen with the CS5 releases, as they here really build up roundtripping in between almost all apps.

    *cheers*

  15. 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!

    signed, “frustrated and waiting FC developer…”

  16. 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.

  17. Why not combine Flash Catalyst and Flash Builder into one program with two modes? This would eliminate the need to move projects back and forth.

    In the meantime, could you provide a utility to ease the transfer of projects? Maybe even an update to FC that would allow it to open projects modified by FB?

  18. 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.

  19. I must have redeveloped (copy-pasted) so many times the application on every change in Photoshop (-via catalyst)

    Then I tried doing what you mentioned in the post, still a tedious job.

    Looking forward to an easier roundtrip.

Leave a Reply

Your email address will not be published. Required fields are marked *