The Flash Catalyst workflow

Adobe Flash Catalyst CS5 is a design tool for rapidly creating application interfaces and interactive content without coding. Examples include interactive ads, product guides, design portfolios, and user interfaces. While there is not a single, prescribed workflow for creating all projects in Flash Catalyst, there are tasks common to many basic projects. Here is an overview to get you up and running quickly:

General workflows

There are two main types of Flash Catalyst applications. These applications include micro sites and data-centric applications.

In this document, micro site is an application that is complete when published in Flash Catalyst. No additional development is required. A data-centric application requires additional development, such as integrating components with external data or web services. A Flex developer completes the development using Adobe Flash Builder.

The workflows for designing micro sites and data-centric applications are similar.

Micro site workflow
Data-centric designer/developer 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 new Flash Catalyst project

You can start a new project in two ways:

  • Start with a blank artboard and build your application. This approach is useful for rapid wire framing of user interfaces. Catalyst provides wireframe components, drawing tools, and the ability to import various media to rapidly prototype an interface.

  • Import a completed design document as layered artwork created in Adobe Photoshop, Illustrator, or an exported design from Fireworks. Using this approach, you can design in your favorite Adobe Creative Suite application and quickly convert the artwork into a functioning interactive application.

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.