judah’s blog

Update: If you are familiar with Flash Catalyst the first section describes the pros and cons. If you just want to get to the main topic of the post you can skip down to the first header.

Speaking as a completely objective third party observer with absolutely no personal relation to the matter... Frontpage was an interesting programs. It had a great design view, properties panel, code hinting, snippets code and more. All the features were great. All these features worked for you. The horrifying thing was that it would rewrite your code sometimes reverting your work and in a many cases counter productive. When you're trying to get your site to work with both Internet Explorer 4, Internet Explorer 3 and Netscape 4 this "helpful" assistance would ruin all the work you had just done. This was before SVN so saving multiple versions of your HTML files was a constant procedure. They eventually added a "don't rewrite my code" option and it became relevant and useful. They realized that the people using their products needed more than the cookie cutter shaped designs they provided. Anyway, that is completely unrelated to this post...

Flash Catalyst! What a neat program. :) It's been helpful in taking artwork from Photoshop and Illustrator and creating accurate hi-fidelity FXG (Flex/Flash XML Graphics tags) skins for Flex. At least as high fidelity as I've seen on the web. Since the art can remain as vector shapes and paths they don't lose there sharp edge as you zoom in or resize. Cool!

Flash Catalyst has also been valuable in learning transitions, FXG and component skinning. The goal of FC was for the designer to import the design, convert art to components or component skins, create transitions and then package it up and hand it off to the developer to add coding logic. This approach is obvious in theory but it hasn't been the case. In reality, on Flex projects it's the developer NOT the designer who is using Flash Catalyst to integrate the artwork correctly into the project.

For example, some text inputs that were in the design next to each other were in the code in completely separate Groups. So what, you say, just copy and paste them into the right Groups in the code. This had disastrous results. Since FC doesn't yet support positioning using constraints or automatic layout containers every element in the design is hard coded to an x and y position. Flash Builder could not open the design so I was stuck in code. Many buttons and inputs had no name or id so there was no way to tell what is what and where. The automatic tab order was also out of order because of this issue. So anyway, the quickest solution was to go back into FC move all the form controls under the same group layer, add names in the layers to help identify each component in code and set the tab order in the properties panel because some controls were in sub groups and would not cycle correctly.

Another example, when the skins were created for Buttons or TextInputs there was a lot of redundancy. So what one person, says, it works right? Yes and no. I don't know how much performance is affected by multiple instances of a filter but file size and memory size are important. For example, one image had three instances of the same filter:

When it could have been rewritten like so:

This redundancy was also evident in multiple image files for the same graphic. So going into FC was quickest solution to find each instance and point them to just one image file.

An important note: There isn't a place to set the ID on Flash Catalyst components. When a designer converts artwork to a component and then exports a custom component with multiple text inputs, say a registration form, none of those text inputs contain ID's. The ID is important for validation, formatting and form submission. So when the developer gets any updated designs, which he does, he has to manually find and add the ID to each text input, radio button, button, each time etc. He has to "wire" the controls back up again adding focusIn, focusOut, change, keyDown and keyUp handlers. Also adding in Place the controls back into VGroups etc.

Another amazing feature is the ability to swap out or replace images with other images or symbols. So lets say your designer has a specific graphic used throughout the design. Instead of having 10 identical images of the same image you can go to each of the images in the Design View and select one specific instance of that graphic from the library and delete the 9 extra images. Now you are only loading one image instead of 10.

You can also swap out skins for components*. So say the designer creates one button skin and has 20 buttons (or graphics of buttons) total. You can reuse that same button skin in your 20 other button instances by setting the skin class in the properties panel. *Unfortunately there is a bug that prevents you from selecting a different skin. This same bug also prevents you from replacing a graphic with a component. So if you have those 20 same buttons that are originally vector art from illustrator you have to convert each one to buttons and then create new skins for each. You cannot reuse a skin. When this bug is fixed you will only have to convert the art to a button and select the previous created skin.

Summary
Flash Catalyst is version 1. Don't expect everything at once. In the meantime if we want to get the most out of FC now we have to work around these issues. The next section will tell you just that.

Editing MXML Documents
To edit your projects MXML documents we first need to find the path to the Flash Catalyst workspace. To do this publish your Flash Catalyst project (CMD / CTRL + ENTER). Now, the browsers URL shows the path to the project workspace. So in this URL, "file:///Users/judah/Library/Application Support/Adobe/Flash Catalyst/workspace/Project/bin-debug/Main.html", the project MXML documents are located at, "file:///Users/monkeypunch/Library/Application Support/Adobe/Flash Catalyst/workspace/Project/" when on a Mac.

Project Files Description
/src - location of the application source files
/bin - the location of any additional flex libraries
/bin-debug - location of testing swf
/html-template - location of the html template that wraps around your application
/src/Main.mxml - the main application file. make your application changes here
/src/Main.css - the css stylesheet of the main application
/src/components - the location of custom components and component skins
/src/assets/graphics - location of optimized FXG graphic symbols
/src/assets/images - location of images

You can edit these XML documents in any text editor. To apply the changes you need to save the file and refresh the Flash Catalyst project. You can do this by opening the changed document in Flash Catalyst code view. When we do this it will recognize the document has changed and prompt you to use the newer version of the file. Select Yes. If the project does not rebuild immediately publish it using CMD + Enter.

Although you can use any text editor you will want to use an editor that supports the Flex SDK. I recommend you use Flash Builder 4 or FDT. Both have debuggers, code completion and more. Now at this point, you may be saying I'm not a developer. That's ok. There are a few tips and tricks further on that will really make your project shine.

Using Flash Builder to modify, run or debug the Flash Catalyst Project
Open Flash Builder and go to File > Import > Flash Builder Project > Project Folder and select the Flash Catalyst "Project" folder that is located in the FC workspace. On Mac it is located here:
/Users/[USERNAME_HERE]/Library/Application Support/Adobe/Flash Catalyst/workspace/Project/

Once you've imported it you can run and debug it like any other Flex 4 project. You can update the component skin code and consolidate skins and graphics.

You can even round trip the changes back into FC. The important thing to remember is you must convince FC to notice and reload the updated documents if you want to see the changes reflected in the Design View.

Making the first change - Converting the group layout
The first thing we'll do is modify a layer or "Group" as it's called in code to stack its content vertically or horizontally instead of the contents positioning themselves absolutely. To do this we only need to modify a few lines of code. If you're starting with a new FC project drag 3 different components or shapes to the Design View, select them all and select Group.

Now open the MXML document that contains that Group. You can find the document and location of the Group by selecting it in FC Design View and then switching to code view. It will be selected. In your Flex editor replace "Group" with "VGroup" or "HGroup". Add the property gap to the tag to set the space between each item. For example,

Save the file. Next, save the file. Run the application in Flash Builder or switch back to Flash Catalyst and check for newer files (using the method described above). The content inside that Group should now be stacked horizontally or vertically one after another. You can rearrange their order by moving their position above or below the other in the FC Layers panel.

Copy and paste documents to & from Flash Catalyst Code View
You also can copy and paste documents between your editor and Flash Catalyst, thus enabling round tripping. To do this create a separate Flex project instance. Go into FC code view. In the Package Explorer you can select files and directories and then copy them via CMD + C or Edit > Copy from the title menu. You can go back to Flash Builder and paste these files into your separate project folder. After you have modified or upgraded them you can reverse the procedure and copy back to FC. Select the files in Flash Builder Package Explorer and copy them. In FC Code View select the directory where you want to copy the files to and paste them into that directory using CMD + V or Edit > Paste from the title menu. You know where the MXML documents are.

Note: If you use the first method of importing the Flash Catalyst project into Flash Builder the copying and pasting method above won't allow it. It will say that you are trying to paste the same file to the location it is already at.

Note: Save in Flash Catalyst often. When you close FC it will remove the project directory. It will recreate it when you open the FC project again. Keep that in mind.

Oh and one more thing...
You can gain a couple of rich features such as deep linking, image viewer, context menus and more using another simple modification. Stay tuned...

Enjoy and post your questions here...

This entry was posted on Thursday, June 24th, 2010 at 12:04 pm and is filed under Flash, Flash Catalyst, Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.