The Flash Catalyst workflow

Workflow steps

Follow these general workflow steps when creating micro sites and data-centric applications with Flash Catalyst.

Plan the application

Start with a detailed project specification. This specification describes each page or screen, the artwork and interactive components on each page, user navigation, and the different states of each component. The specification also describes any data list components used to retrieve and display external data.

Create or acquire artwork, video, and sound

Create the artwork, video, and sound for the application. Create a layered design document or composition in Adobe Illustrator, Photoshop, or Fireworks.

Bring in artwork, video, and sound

Start Flash Catalyst. Bring the layered artwork into Flash Catalyst. You can also import individual graphic files or create simple graphics using the built-in vector drawing tools. Import additional assets, such as video, sound, and SWF content. For data-centric components, such as a data list, import a representative sample of the data (text or images). For more information, see Importing artwork.

After importing or creating artwork in Flash Catalyst, you can launch and edit artwork in Illustrator or Photoshop, and then return the edited artwork to Flash Catalyst. Round-trip editing extends the graphic drawing and editing capabilities of Flash Catalyst and improves the iterative design process. For more information, see Round-trip editing.

Create and modify page states

Create pages according to the project specification. For more information, see Defining structure with pages and states.

Create interactive components and define component states

Convert artwork to ready-made components (buttons, scroll bars, data lists, and so on). Use the Wireframe Components panel to quickly add common components with a generic appearance. Create custom components for behaviors that you can’t capture with the built-in components. For more information, see Interactive components.

For data-centric applications, use design-time data to design data list components. Design-time data allows the use of dummy content, such as sample database records or bitmap images, without having to actually connect to a back-end system. A Flex developer can replace the design-time data with real data from a database or web service. For more information on using Design-time data, see Creating scrolling images, panels, and lists.

Components can have multiple states, such as the Up, Over, Down, and Disabled states of a button. Create or modify the different states of each interactive component, according to your project specification

Note: The steps of creating page states and creating interactive components are interchangeable. Some designers prefer to create all interactive components first, and then add those components to pages and states.

Define interactions and transitions

Add interactions that define what happens as users interact with the application. For example, you can add interactions that transition from one page or component state to another when a user clicks a button. You can also add interactions that play animation, control video playback, or open an URL. Use the Timelines panel to add and modify smooth animated transitions between pages and component states. For more information on interactions, see Interactions and action sequences. For more information on transitions, see Transitions and the timeline.

Test and publish the project

When you finish creating a micro site, you can publish the final project as a web or desktop application. For more information, see Preview and publish.

Share the project with a Flex developer

Save a data-centric Flash Catalyst project file (FXP) for further development in Adobe Flash Builder. Export the Flash Catalyst project library. Exporting a library package creates a single file containing every library item in the project. The package is saved as an FXPL file. For more information on exporting a Flash Catalyst library, see Extending Flash Catalyst projects using Flash Builder.

Start a project with a blank artboard:

1. Start Flash Catalyst. In the Create New Project section of the Welcome screen, choose Adobe Flash Catalyst Project.

   Note: If you already have a project open, choose File > New Project to begin a new blank project.

2. In the New Project dialog box, name the project, enter values for the size and color of the artboard, and click OK.

   You now have a new project with a blank artboard. By default, the Design workspace is open. You can build your application by importing artwork, adding pages, creating components, and adding interactions and transitions.

   Note: You can change the artboard values later by choosing Modify > Artboard Settings.

Start a project by importing artwork in a layered design document:

1. Start Flash Catalyst.

2. In the Create New Project from Design File section of the Welcome screen, choose the type of file you want to import. Options include: Adobe Illustrator AI File, Adobe Photoshop PSD File, FXG File (FXG files can be exported from Adobe Fireworks, as well as other applications).

   Note: If you already have a project open, choose File > Import > <File Type>.

   All artwork in the design document is added to the new Flash Catalyst project. The Layers panel reflects the layer structure from the imported document, preserving the integrity of your original design.

   You can now build your application by adding pages, creating components, and adding interactions and transitions.

   For more information, see Importing artwork.