User interface

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.

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.

View full size graphic

Code workspace

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.

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.