With the release of Adobe’s Flash Catalyst and Flash Builder public betas the Twitter-realm and Blog-o-sphere have been all a buzz with excitement, skepticism and of course questions, questions, questions. One issue that seems to be the hot topic for the day is the idea that Fireworks CS4 is being treated as a second-class citizen in the new Flash Catalyst world. The root of this assumption starts with first screen you see in Catalyst, note that Fireworks is no where to be seen:
This apparent abandonment by the Flash Catalyst development team is being exacerbated by the fact that Fireworks is often mistaken for a Photoshop wannabe. Non-Fireworks users assume that Fireworks is some kinds of ImageReady, not understanding how great, powerful, intuitive and useful the tool really is. Because of this historical treatment, the Fireworks community is up in arms about how, once again, Fireworks is kicked to the curb in place of the 800 lb. Gorilla that is Photoshop.
The good news is that in reality, Fireworks has exactly the same support and workflow Photoshop does inside Catalyst. The first thing we need to do is get over the fact that just because Photoshop has an icon and import option that it has better support. One of the file options for import is the FXG file format. FXG is Adobe’s new XML based graphical description language that enables easier tooling, development and transport between applications.
Fireworks CS4 has the ability to export its content to the FXG format and this means that designers can easily import their design into Catalyst by, using Commands > Export to FXG.
This converts the file into the new format and then Catalyst can open the design and be used to create Flex based content.
Now, the current argument is that this extra step is a worse workflow then creating a PSD and just opening it in Catalyst. Let’s look at an example. I create my design in Photoshop and then open the PSD in Catalyst and start working on my application. I realize that the design is not quite right or needs to be seriously re-done. I have to go back to Photoshop, using the original PSD, make the changes that are required, and then go back to the Catalyst project and choose File > Import Artwork. At that point, I have to update the component linkage, skins, etc. in the project.
The Fireworks workflow is exactly the same. If I need to make a change, I go into Fireworks, update the design, save as FXG and then import into Catalyst. So, in reality Photoshop and Fireworks are on even footing, PSDs just gets a pretty icon Welcome screen of Catalyst. Yet, Fireworks support of FXG actually adds some interesting benefits.
First off, A few of you may note that Photoshop also has the ability to export its files as FXG. In truth, Fireworks FXG export engine is far and away more superior then Photoshops. For example, go into both tools, create a few basic shapes, slap on some gradients and then export the files as FXG. In my example I named the files Fwks.FXG and PSD.FXG.
Go to the exported file directory and take a look. First you will see two asset folders, in my case: PSD.assets and Fwks.assets. These folders are generated to hold any bitmap or other exported non-vector based files created during the conversion process. Take a look inside the directories and note that in the Fwks.assets is empty, yet in PSD.assets there are multiple images.
What is happening here is that Fireworks is able to covert its vector shapes into pure FXG code but Photoshop can only export them as bitmap images. Right there, Fireworks wins. We are deploying our content to the Flash Player, which is a very powerful vector rendering engine. If we are creating vector content, shouldn’t we be able to leverage it?
This also means that since the layout is all vector for Fireworks we can hand the FXG to a Flex developer and they can easily import, update and also manipulate the FXG inside Flex. This support actually makes Fireworks a superior tool over Photoshop for generating designs and assets for Flex 4 and/or Flash Catalyst based projects.
Its unfortunate that Adobe didn’t do as good a job promoting this support in the initial launch, but we should give a lot of kudos to the Fireworks development team for creating such a powerful export engine for a “future” file format.
- Bookmark :
- Digg
- del.icio.us
- Stumbleupon
- Redit it
Indeed, props to the Fireworks team, that has always astounded me with a tool that I’ve preferred to the Photoshop Illustrator combo for ALL of my graphic design for years now.
The exports folder comparison is a good catch. Thanks
Thanks very much for this article. However, when I do an Export to FXG from Fireworks CS4 I’m getting an error message on the sixth page of seven (”TypeError: txtChars.replace is not a function”) and then no FXG is produced. I have no idea what this refers to; I don’t have any custom commands or such installed.
Do you have any tips on where I could get the attention of somebody to address this problem? The Adobe forums aren’t particularly effective.
Cheers,
Liz
Thanks for the article.
I am curious what version of Fireworks and Catalyst you are using? So far most of my experiments with export to FXG don’t go all that well.
Example just opening the FXG file in the latest Catalyst beta is difficult. The only success that I have had so far is to open a new Catalyst doc then Import… some times this works sometimes it does not (BETA). It never works from the import.fxg on the Catalyst landing page (the page that is missing the FW icon).
Once imported many things don’t translate, example many gradients show up as single color rectangles,,, though they do remain vector (yeah!). Rounded corners show up as hard edge, and sometimes shadows show sometime they don’t. These are all things that are supported in Flex 3. It could be that Catalyst in its current beta form is just not handling these things yet.
*** My most important comment in regards to the lack of support for FW import options is that FXG does not (to the best of my knowledge) support Layer support, thus all my layering is gone upon import. This is crucial to catalyst for creating view states. Especially since much of the Catalyst workflow is based on hiding and showing things in layers. And much of the workflow (from examples that I have seen) is that a lot of layer planning needs to be done ahead of time to make your work with Catalyst successful.
Personally I wish they used the FW page paradigm with layer and states. To be completely honest I wish that Catalyst was built on FW…. Page = View States, Layers are storage, state = button and symbol states, and then of course storage of symbols = components.
***********************
What does work that is not well documented is the import of pngs. (kind of). I recently did an experiment where I took elements from my fireworks design and exported them individually as png files. (thus preserving the complete look).
My findings with this work flow is that Catalyst does maintain the transparency of the png, but also keeps the size of the document rather than snapping to the size of the art-work, so before I leave FW I make sure I do a fit to canvas command.
Also note these pngs are not editable FW pngs, rather they are a flattened image file with transparency.
Why is this good and why is this bad?
- The good is that I can now do prototyping that looks like what I want my end application to look like.
The bad is that since pngs tend to be large in file size I probably would not use png in a real Flex application, thus my work in catalyst is limited to prototyping and would have to be recreated once in Flex.
This last argument is something that I have brought up from the beginning.. Most Flex applications are data heavy and since they are being served over the internet file size still matters. One major factor in usability is how long the user has to wait for an action or for a screen to show up. If the application is constantly loading graphics, and having to compile this info in the swf more than likely you will end up with a pretty application that no one uses. This is one the reasons that I really didn’t understand Adobe’s approach of pushing Illustrator and photoshop as the design tools for Catalyst.
Flex skinning best practice was and will still be to programatically skin as much as possible. FXG is a major step in that direction.
Christian,
When this was written it was the Public Beta Version of Catalyst with Fireworks CS4. Now, granted we hadn’t put this thing through a true development trial-by-fire but this post was a response to the insane amount of comments at the time of the Beta launch that said straight out “Fireworks doesn’t work with Catalyst at all”. The point of the article was that yes you can use FW with Catalyst and the support is pretty promising for the future.
I feel that most of what you are seeing is around two issues. One, the FXG export script was a last minute effort by the FW team to get it into CS4. FXG was barely in its final 1.0 spec when CS4 launched. The FW team did an excellent job considering the time constraints, and as you can see there are a still a lot of bugs still there.
Two, Catalyst is still very much in a Beta state and therefore is constantly changing and contains a ton of issues. More then likely a lot of what you are seeing is Catalyst mis-understanding or processing the FXG incorrectly either due to internal Catalyst issues or FW script export issues.
At this point we feel its too early to start making final judgments on how Catalyst does or doesn’t handle FW FXG. For example, just today Adobe released an updated FXG exporter script to Labs:
http://blog.digitalbackcountry.com/2009/07/new-fireworks-cs4-flash-catalyst-integration/
I will be curious to see if this fixes a lot of the issues you describe, it may even add more support for layers and such. I haven’t played with it yet but word on the street is that the script is a huge leap forward.
I totally agree that FXG is a great step in the right direction, one that has been desperately needed. Yet, so much is changing all at once that its probably going to take a few rounds before we start seeing really stable workflows and processes that make all our lives easier in the Flex world.
Finally, to hit upon your comment around why Photoshop and Illustrator are being pushed by Adobe. Illustrator is an obvious choice for the future of Flex skinning. AI is all about vector art, its the most powerful vector art editor out there (feature set wise) and this integrates perfectly with FXG. This is clearly why Illustrator is miles ahead of the other tools when it comes to Catalyst integration. They are like peas in a pod.
Photoshop is getting a lot of love from Catalyst due to market share. You have to remember that PS is the number one designer tool out there, this means that the Catalyst team HAS to nail the integration. Adobe is a business and market share/user-base always drives these kinds of choices. Unfortunately, this continues to wear on the FW users since they feel left out from the party. That was another aspect of this post, to try and help support my FW brethren that all is not lost… hopefully this information helped do that, even just a little.
Make sure to use the update exporter you can donwload here:
http://labs.adobe.com/technologies/flashcatalyst/fireworksexport.html
It solved the “TypeError: txtChars.replace is not a function” error for me.