User interface

The Flash Catalyst user interface has two workspaces. These workspaces include Design and Code. Use the Workspaces pop-up menu to change between workspaces.

Design workspace

The Design workspace shows a graphical representation of your pages and states. This workspace includes the panels and tools used for creating and editing projects. Use the Hand tool to grab and pan the artboard as an alternative to scrolling. Use the Zoom tool or Magnification menu to change the view from between 25% and 800% of actual size. Use the magnifying glass to zoom into a specific part of the artboard (Alt-click (Windows) or Option-click (Mac OS) to zoom out). When you enter a term in the Search box, the Adobe Community Help client appears. It gives you access to online Help and community resources.

View full size graphic
Design workspace
A.
View tools

B.
Heads Up Display

C.
Workspaces pop-up menu

D.
Search for help

E.
States panel

F.
Component breadcrumb

G.
Artboard

H.
Common library

I.
Tools panel

J.
Layers panel

K.
Interactions panel

L.
Properties panel

Artboard
The artboard represents what users see when they view the published application. The artboard is where you place artwork, interactive components, and other objects that make up the application interface. It has rulers, grids, and guides for positioning and snapping elements. These features are available in the View menu. Use the Modify menu to align, group, and arrange (front to back) the objects on the artboard.

Breadcrumbs bar
The Breadcrumbs bar, located directly above the artboard, tracks where you are as you work in Flash Catalyst. For example, when you open a component, you can use the Breadcrumbs bar to quickly close the component and return to the main artboard.

States panel
The States panel displays a thumbnail for each page in the application. It shows the different states for any component you select. You can duplicate, remove, add, and rename pages and component states according to your project plan. For more information, see Types of states.

Tools panel
The Tools panel includes tools for creating, selecting, and transforming objects, including simple lines, shapes, and text.

Layers panel
The Layers panel is an organized collection of the objects in the application (artwork, components, video, and so on). When you import a design document created in Illustrator, Photoshop, or Fireworks, Adobe Flash Catalyst preserves the original layer structure. As you add states to the application, you use the Layers panel to show or hide objects in each state. For more information, see Layers.

Project Library panel
The Project Library displays the entire list of graphics and other media available in the project, including your project skins and components. For more information, see Libraries.

Common Library panel
The Common Library contains a set of wireframe components and placeholder objects that are ready-to-use with a simple default appearance. You can drag these components and placeholders to the artboard and use them “as is” or modify them to fit the appearance of your application. For more information, see What is a component?.

Interactions panel
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. For more information, see Create navigation and behavior with interactionsAnimations.

Align panel
The Align panel contains controls to align, distribute and match sizes of components and objects on the artboard. For more information, see Aligning graphics.

Timelines panel
The Timelines panel provides controls for creating and editing transitions and action sequences. You can also use the Timelines panel to control the playback of video and SWF content, and to add sound effects. For more information, see Animations.

Design-Time Data panel
After creating a data list component, use the Design-Time Data panel to control which data (images and text) appear in the data list. For more information, see Data lists and scrolling panels.

Properties panel
Use the Properties panel to edit the properties for selected objects, such as graphics, text, and components. The available properties change as you select different objects in the artboard, Layers panel, or Timelines panel.

Heads Up Display (HUD)
The HUD gives quick access to common commands related to the current action or currently selected object. It shows some of the key actions you can perform on the selected objects. For example, the HUD appears when you select artwork on the artboard, giving you the choice of converting the artwork to a component. Use the HUD to quickly create components.
  • If you don’t see the HUD when you select an object, select Window > HUD.

  • When converting objects to components, the HUD displays a message if additional steps are required to complete the component.

  • All of the functionality in the HUD is also available in the main menu. For example, you can choose Modify > Convert Artwork To Component.

Use the HUD to quickly:

  • Convert artwork to components or component parts.

  • Edit the parts and states of a component.

  • Optimize graphics elements.

  • Make the parts of a component the same in all states or copy changes from one state to another.

View full size graphic
HUD updates as a data list component is created

For more information on using the HUD, see What is a component?, Data lists and scrolling panels, Creating Application Mock-ups.

Code workspace

The Code workspace shows the underlying application code. This code is generated automatically as you work in Flash Catalyst.

The applications you build in Flash Catalyst are build on the Flex framework. Flex is an open source framework for building and deploying applications that run in all major browsers and operating systems. MXML is the language developers use to define the layout, appearance, and behaviors in Flex. ActionScript 3.0 is the language used to define the client-side application logic. When you publish a Flash Catalyst project, your MXML and ActionScript are compiled together as a SWF file.

Viewing the MXML code gives designers the opportunity to understand how the application is programmed. The Code workspace is read-only. To edit the code, open the project in Adobe Flash Builder. For more information, see Workflows between Flash Catalyst and Flash Builder.

Code panel
Shows the MXML code in the Code panel.

Problems panel
Shows any errors in the current MXML code.
You can double-click an error in the Problems panel to locate the error in the code.

Project Navigator panel
Shows the Flex project directory structure and files being created as you design your project in Flash Catalyst.

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 common library 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.

    The Resizable option is turned on by default. This allows your project to resize according to different viewing situations. See Resizing Applications and Components.

    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.