UPDATE: MANY of these issues I had have been addressed in the new Flash Catalyst CS5. You may find it unnecessary to modify it. BTW if you are a designer this software is the best choice in maintaining your high fidelity designs online. It’s much more than they advertise it to be. There is a trial version so you can see for yourself. But dude, being able to copy your assets from Illustrator and paste them into Flash Catalyst maintain your vector format and animate them is just wild. Dig in. This is just the beginning. :)
As a Flex developer you’ve heard about Flash Catalyst and you’ve probably determined if it will or will not help you. Not so fast chachke. I’ve completely streamlined my workflow, fitting in the design requirements has become much easier and enabled round-trip editing and Flex project integration. Flash Catalyst can help you develop your Flex applications especially if it’s jail broken.
• Maintain high fidelity design from design tools
• Reduce download size of your app
• Easier to make changes in code
• Easier to work with designer and design
• Round-trip skins
• Integrate your Catalyst project with Flash Builder, etc
• Real world learning aid
• - Spark Skinning
• – Spark Transitions
• - Spark Filters
• - the new Text Layout Framework
• Using custom components in Catalyst
• Using additional Flex Spark components (not all are supported)
• Providing ID’s to components and skins
Note: You may (translate will) spend more time in Flash Catalyst than the designer and oddly enough the designer may never use it. FYI This is my unofficial approach based on actual product experience.
• Create Flash Builder project
• Open Flash Catalyst
• Copy artwork layer by layer or at most layer group by layer group from your design tool (PS, AI, FW, etc) and paste into Catalyst (CMD + C and CMD + V).
• Import the default settings except keep nearly everything editable. You can optimize it later.
• Modify and edit the FXG, layers, groups, transitions, names, etc to create Skins and reusable vector art for your projects.
• Copy and paste the skin into your Flash Builder project and assign to your components.
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 relative x and y positions often from different Groups. BTW PS and AI Layers = Flex SDK Spark Groups.
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 is what. 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 or graphics of form controls into and under the same group layer. Then add names in the layers which will add corresponding names in the code. And then set the tab order in the Catalyst properties panel because some controls that were in sub groups of the main group would not focus correctly.
Another example, when the skins were created for Buttons or TextInputs there was a lot of redundancy. So what, you say, it works right? Yes and no. So lets say your designer created a Glow filter on a Button or Image in this case. After importing you’ll see this on the same image:
<s:GlowFilter color="#FFFFFF" alpha="1.0" blurX="10" blurY="10" includeIn="upAndSelected" inner="false" knockout="false" quality="2" strength="1"/>
<s:GlowFilter color="#FFFFFF" alpha="1.0" blurX="10" blurY="10" includeIn="overAndSelected" inner="false" knockout="false" quality="2" strength="1"/>
<s:GlowFilter color="#FFFFFF" alpha="1.0" blurX="10" blurY="10" includeIn="down" inner="false" knockout="false" quality="2" strength="1"/>
When it could have been rewritten like so:
<s:GlowFilter color="#FFFFFF" alpha="1.0" blurX="10" blurY="10" includeIn="upAndSelected,overAndSelected,down" inner="false" knockout="false" quality="2" strength="1"/>
Multiple instances can affect performance and in some cases file size. This redundancy was evident when multiple image files were created for the same graphic. So going into FC code was the only way to consolidate them.
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 what, just add it in in Flash Builder.
Ok so we do that but then when the design changes and it does, the one way Flash Catalyst generated code has no knowledge of your so called ID’s. The design has changed and all or nearly all the components are anonymous again. So the developer has to manually find and add the ID to each text input, radio button, button, each time the design is updated etc. So what you say, how long can that take? The design was modified maybe 40 times (adding in minor updates). Each time each component had to be “wired” up again to the focusIn, focusOut, change, keyDown and keyUp handlers. They also had to place the controls back into the correct Groups etc. Having ID’s solves this.
FC allows you 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 reference one instance of the graphic from the library and delete the 9 extra images.
Another reason you need to edit the MXML is so you can swap out skins for the components in FC. So say the designer creates one button skin and has 20 graphics of buttons total. You can’t reuse that same button skin in your 20 other button instances. You can’t replace a graphic with a component. You cannot reuse a skin.
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.
Flash Catalyst project files
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.
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 to see the changes reflected in the Design View.
Making the first change – Converting Group to Vertical Group
The first thing we’ll do is modify a layer folder or “Group” as it’s called in code so that it stacks its sub layer contents equally spaced apart from each other in a vertical or horizontal fashion instead of the current method where the contents of the group position themselves using absolute x and y positioning. 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 the text “Group” with “VGroup” or “HGroup”. Add the property gap to the tag to set the space between each item. For example,
<s:VGroup gap="18" >
...your content here...
Save the file. Now 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 layers 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…