Round-trip editing of artwork

Using Flash Catalyst round-trip editing, you can launch and edit your application artwork using the rich editing capabilities of Adobe Illustrator CS5 and Adobe Photoshop CS5. Open the artwork in Illustrator or Photoshop, make your edits, and then return to Flash Catalyst.
Note: FXG is the rich graphics interchange format used for round-trip editing. For more information on FXG files, see Working with FXG.
  • Use Illustrator to round-trip edit bitmaps and vectors. Use Illustrator to edit a single object, a mixed selection of objects, or a group. Using Illustrator, you can also edit the following components: Button, Checkbox, Radio Button, Horizontal Scrollbar, Vertical Scrollbar, Text Input, Toggle Button, Horizontal Slider or Vertical Slider. You cannot round-trip edit Custom/Generic components.

    Note: You cannot round-trip edit more than one component at a time. You cannot round-trip edit graphics that have been optimized by choosing Optimize Vector Graphic.
  • Use Photoshop to edit bitmap images, a selection of multiple images, or a group containing only images.

    Note: If a component is part of a mixed selection or group, the custom component appears as a non-editable placeholder layer in Photoshop or Illustrator.
  • When you edit a vector (shape or text), changes apply only to the state in which you select the vector.

  • Make all structural changes to objects in Flash Catalyst. Changing the structure of objects during round-trip editing can break the intended behavior of objects or transitions in which they occur.

  • When you edit an image or component that is stored in the Flash Catalyst library, you are editing the object definition. If you’ve shared the object to multiple states, the changes apply in all states. If the image is used inside a component, the changes are reflected in the component.

    You can simulate editing a bitmap in a single state. Add a new layer in Photoshop with a copy of the original image. Make edits to the copied layer and turn off the eyeball for the original layer.
  • When you round-trip edit a button (or other component), its states are shown as separate layers in Illustrator and Photoshop. If you round-trip edit a group, its children are shown as separate layers.

  • When you round-trip edit an object, the surrounding objects in the artboard are visible (but dimmed) for reference. These objects appear as locked background layers in Illustrator and Photoshop and cannot be edited.

Launch and edit in Adobe Illustrator

  1. Select the object you want to edit in the artboard.

  2. Choose Modify > Edit in Adobe Illustrator.

    The object opens in Illustrator. Other objects in the artboard appear dimmed for visual reference during editing. The non-editable artwork is added to the background layer in Illustrator and is locked.

    A message tells you that you are editing an object from Adobe Flash Catalyst.
  3. If the Edit In Adobe Illustrator message appears, click OK.

  4. Make your changes.
    To view blend modes correctly in Illustrator, create a filled rectangle behind the blends.
  5. When you have finished editing, click Done at the top of the application window.

    The FXG Options dialog box appears.

  6. Click OK to close the FXG Options dialog box and return to Flash Catalyst.

  7. Return to Flash Catalyst.

    The changes you made in Illustrator appear in Flash Catalyst.

For more information on editing in Illustrator, see Illustrator and Flash Catalyst workflow.

Launch and edit in Adobe Photoshop

To round-trip edit in Photoshop, download and install the Flash Catalyst FXG extensions for Photoshop. The extensions include the FXG plug-in and the Simplify Layers For FXG script.

Note: You must have the Flash Catalyst FXG extensions for Photoshop installed before you can launch and edit Flash Catalyst project artwork using Photoshop.

Instructions for downloading and installing the extensions are located here:

  1. Select the bitmap image you want to edit in Photoshop.

  2. Choose Modify > Edit In Photoshop.

    A message reminds you to download and install the FXG extensions for Photoshop.

  3. If you have already installed the extensions, click OK to dismiss the message.

    Adobe Photoshop CS5 starts and the bitmap image you selected appears in the Photoshop canvas.

    View full size graphic
    A message in Photoshop reminds you to run the FXG scripts before returning to Flash Catalyst.
  4. Make your changes in Photoshop.

    When you’re done editing in Photoshop, save it as a PSD file before running the Simplify Layers For FXG script. The PSD file is your master file, preserving any layer styles (effects), adjustment layers, layer masks, smart objects that you added.
  5. Choose File > Scripts > Simplify Layers For FXG.

  6. Choose File > Close and click Yes to save changes.

  7. Return to Flash Catalyst.

    The changes you made in Photoshop appear in Flash Catalyst.

For more information on editing in Photoshop, see Using Adobe Photoshop CS5.

Tips for preserving fidelity during round-trip editing

When you round-trip edit between Flash Catalyst and Illustrator or Photoshop, you are using the FXG file format to move objects between applications.

Follow these tips to preserve the fidelity of your Flash Catalyst artwork and the edits you make during round-trip editing.
  • The filters you add in Flash Catalyst are editable in Illustrator.

  • If you rotate, or apply a filter to a bitmap in Flash Catalyst, you cannot edit it in Photoshop until you rasterize the image. Choose Modify > Rasterize.

  • Filters and effects you add in Illustrator convert to vectors or bitmaps when returning to Flash Catalyst.

  • Adding layer effects, masks, shape layers, and adjustment layers in Photoshop requires that you run the Simplify Layers for FXG script before returning to Flash Catalyst. There is no harm in running the script. A good practice is to always run the script before returning to Flash Catalyst.

  • Always set Proof Colors to Monitor RGB in Illustrator to lessen the difference when comparing colors between Flash Catalyst and Illustrator. Use the following steps to change the setting for Proof Colors in Illustrator:

    1. Choose View > Proof Colors (to select it)

    2. Choose View > Proof Setup > Monitor RGB

For a video with more information on setting proof colors in Illustrator, go to the 27 min mark in this video: Structuring UI design comps for use in Flash Catalyst

See the following for more information:

Importing artwork

Working with FXG