The Flash Catalyst user interface has two workspaces. These
workspaces include Design and Code. Use the Workspaces pop-up menu
to change between workspaces.
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
- View tools
- Workspaces pop-up menu
- States panel
- Tools panel
- Interactions panel
- 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
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.
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.
- 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
Start a project with a blank artboard:
Start Flash Catalyst. In the Create New Project section of
the Welcome screen, choose Adobe Flash Catalyst Project.
you already have a project open, choose File > New Project to
begin a new blank project.
In the New Project dialog box, name the project, enter values
for the size and color of the artboard, and click OK.
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.
can change the artboard values later by choosing Modify > Artboard Settings.
Start a project by importing artwork in a layered design document:
Start Flash Catalyst.
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
Note: If you already have a project open,
choose File > Import > <File Type>.
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.