Flash Catalyst and Flash Builder integration
Flash Catalyst CS5.5 and Flash Builder 4.5 provide tightly
integrated workflows that let designers and developers collaborate
and work in-tandem on the same project.
Project structure for ensuring Flash Catalyst compatibility
Flash Catalyst CS5.5 supports a subset of features and
components that are available in the Flex 4.5 framework. Therefore,
it is important that you structure your project such that it works
seamlessly in Flash Catalyst.
Plan your project
When you plan your project, identify the visual parts of
the project that a designer owns and the logical parts that a developer
owns. Typically, a designer owns the visual objects, animations,
and the basic layout of the project. A developer typically owns
the architecture, functionality, and the application-level layout
of the project.
Flash Catalyst and Flash Builder provide several tools that help
you define a clear contract between design and development. Separating
your project into a main project and Flash Catalyst compatible library
projects clearly defines which parts of the project the designer
can edit. Using skinnable components provides a clear separation
between logic and visuals at the component level.
Use library projects
Library projects let you separate the design and logic
at the project level. Developers can use library projects to segregate
parts of the project that need to be edited in Flash Catalyst.
Library projects also simplify the merge process because the
developer does not usually edit the library project while the designer
is working on it.
Create a main project and a subsidiary Flash Catalyst-compatible library project
Create the main Flex project.
For more information, see Create
Create a Flex library project.
Ensure that the project
is Flash Catalyst-compatible by selecting Make Project Flash Catalyst
Compatible in the New Flex Library Project wizard. For more information,
Flex library projects.
Add the library project to the build path of the main Flex
To do so, go to Project > Properties, and select
Flex Build Path. Select the Library Tab, and click Add Project.
For more information, see Modify
a project build path.
Place the skinnable components and skins in the library project
and the code files in the main project.
Note: The main project depends
on the library project. Therefore, the library cannot contain code
that depends on the main project and has to be self-contained.
Use skinnable components
The skinning architecture in Flex lets you create extendable
skinnable components that are compatible with Flash Catalyst. Creating
skinnable components in Flash Builder and creating skins visually
in Flash Catalyst lets you separate design and logic at the component
A skinnable component contains the logical part of a component,
while the skin contains the visual assets and layout rules. Additionally,
a skinnable component can indicate that its skin contains parts
and states. The host component can programmatically control the
parts and states of the skin. Restricting communication between
the skinnable component and its skins to the parts and states lets
the two parts to be highly independent and flexible. For more information
on creating custom skinnable components in Flash Builder, see Example:
Creating a skinnable Spark component.
After you create a skinnable component definition
in Flash Builder, create an initial sample skin. If you do so and
import the project into Flash Catalyst, the skin shows up in the
Components panel in Flash Catalyst. You can then easily edit the
skin in Flash Catalyst. Creating a sample skin helps the designer
understand the basic structure of the skin.
Ensure Flash Catalyst compatibility
Like any visual coding tool, Flash Catalyst only supports
a subset of Flex code. However, Flash Builder provides a compatibility
checker that tells you exactly which parts of your code are editable
by Flash Catalyst.
When you create a Flash Catalyst compatible project in Flash
Builder, the Flash Catalyst compatibility checker (Project >
Properties > Flash Catalyst) is automatically turned on. When
you create a project in Flash Catalyst and import it into Flash
Builder, it is automatically configured to be Flash Catalyst compatible.
If you introduce any incompatibilities while editing the project,
Flash Builder displays the compatibility errors in the Problems
view indicating which parts of the code can be edited in Flash Catalyst.
You do not necessarily need to resolve all compatibility issues
before opening a project in Flash Catalyst. The "Type" column of
the Problems view displays the impact of each compatibility problem.
Problems that prevent the project from opening in Flash Catalyst
appear as warnings. Less severe problems appear as "info" notifications.
The project cannot be opened in Flash Catalyst
The file cannot be edited in Flash Catalyst.
incompatibilities in the main application makes the project incompatible.
Skinnable component incompatibility
The component cannot be skinned in Flash
Catalyst or the skin part cannot be assigned in Flash Catalyst.
Design-time data incompatibility
The list data is controlled by application
code that is not editable in Flash Catalyst. You can edit the list
appearance in Flash Catalyst.
Flash Catalyst compatibility warning
This warning does not reduce editability
of the project in Flash Catalyst. It can, however, indicate an editing
experience that is not seamless.
For more details about Flash Catalyst compatibility issues, see www.adobe.com/go/learn_fcprojectcompat_en.
Passing files between Flash Builder and Flash Catalyst
You can use FXP files to exchange a complete Flex project
or to exchange components, component skins, and assets between a
designer and developer.
For complex projects, you can use a library project to structure
your project's user interface as a series of skinnable components
and skins. For more information, see Use
Flex library projects.
You can then pass FXPL files back and forth between Flash Builder
and Flash Catalyst to exchange only the component skins and design
assets. To make sure that things are orderly, the designer can import
the FXPL files into an empty project in Flash Catalyst, create visual
skins, and add interactivity.
Use the following export and import workflows to pass the FXP
and FXPL files back and forth between Flash Builder and Flash Catalyst.
Pass files from Flash Builder to Flash Catalyst
To export an FXP or FXPL file from Flash Builder to Flash
Catalyst, select Project > Flash Catalyst > Export Flash Catalyst
To import the FXP or FXPL file from Flash Builder into Flash
Catalyst, go to File > Import, and select Adobe FXG File (.fxg)
or Library Package (.fxpl).
Pass files from Flash Catalyst to Flash Builder
To export an FXP or FXPL file from Flash Catalyst to Flash
Builder, go to File > Export, and select either Adobe FXG File
(.fxg) or Library Package (.fxpl)
To import an FXP or FXPL file from Flash Catalyst into Flash
Builder, select Project > Flash Catalyst > Import Flash Catalyst
Edit FXP files using the Edit Project in Flash Catalyst command
If Flash Builder and Flash Catalyst are both installed
on the same computer, you can use the Edit in Flash Builder command
to edit FXP files.
For more information, see Edit Project in Flash Catalyst command.
Merge changes from Flash Catalyst to Flash Builder
When you import FXP or FXPL files from Flash Catalyst into
Flash Builder, you can compare and merge differences between the
two projects using the Compare Editor tool. You can also use a third-party
merge tool of your choice.
When you create design assets in Flash Catalyst, you can bring
the assets into Flash Builder by importing the FXP or FXPL file
in the following ways.
Import the design assets into a new project, and then
compare and merge changes using the Flash Builder tools.
Import contents of the library into the existing project.
Overwrite the existing FXP file with the updated version
only if no changes have been made to the project in the meantime.
cannot overwrite library projects (.fxpl).
To compare projects using the Compare Editor tool, select the
projects by pressing the Ctrl key and clicking the projects to compare.
Then, right-click the selected projects, and select Compare With
> Each Other. The results are displayed in the Text Compare panel.
Note: While merging, you can see several changes in setting
files, like actionScriptProperties, or output files, like bin-debug
file, or other parts of the project. You can typically ignore these
changes, and focus only on the changes in the source folder.
For more information on using the Compare Editor tool, see the
Edit Project in Flash Catalyst command
Use the Edit PRoject in Flash Catalyst command if you have
both Flash Builder and Flash Catalyst installed on the same computer.
You can launch Flash Catalyst from within Flash Builder and make
any design changes directly to the project without passing the project
files between Flash Builder and Flash Catalyst.
To launch Flash Catalyst directly from within Flash Builder,
select Project > Flash Catalyst > Edit Project In Flash Catalyst.
can also select Flash Catalyst > Edit Project In Flash Catalyst
from the context menu for the project.
Change the application design, as required. When you edit
the project in Flash Catalyst, the project is locked in Flash Builder.
The project is locked to ensure that there are no conflicting changes.
Save changes and close the project in Flash Catalyst. You
don’t have to exit Flash Catalyst.
In Flash Builder, select Project > Flash Catalyst >
Resume Working On Project in Flash Builder. You can also select
Flash Catalyst > Resume Working On Project in Flash Builder from
the context menu for the project.
When you do so, you are
prompted to save the changes made in Flash Catalyst. Saving the
changes brings the newly saved project back into Flash Builder.
In the background, the originally exported project version from
Flash Builder is deleted after the newly saved project version is
successfully imported from Flash Catalyst.
The design changes
are added to the project, and the project is opened for editing
in Flash Builder.