Catalyst is fairly unique in the software world in that it is designed to be a sort of middleman. Most projects will neither begin nor end in Catalyst. Instead, you or your designer will start out by designing a comp of the project in Photoshop or Illustrator and then importing that comp into Catalyst. Once your design work in Catalyst is complete, your project will most likely require further development in Flash Builder.

The Flex framework is designed around a project-based model. Rather than working on a single file as you would in other applications, this project-based model means that your application is going to be made up of many files. Flex projects contain multiple files. Simple projects may only contain a dozen or so files, while complex applications can potentially contain many hundreds or even thousands of files. Some of these files are the core MXML files that provide the basic code base for the application. Other files that often make up the bulk of the project are ActionScript files that provide the application with its processing logic.

The simplest way to look at these Flex-project files is this:

When you work in Catalyst, keep in mind that you are not really creating a Catalyst project per se; rather, you are creating the foundation for a Flex project. Ultimately, Catalyst is nothing more than a new tool to create MXML, the visual layer of the Flex application.

This is why you will see references to Catalyst projects throughout the program and this book, not files. Catalyst does create a project as a single file with an FXG extension, but this file is a package that hides much more complexity behind the scenes. Once you import the project into Flash Builder, you will begin to see the underlying complexity and how Catalyst really does create projects, not files.

Adobe developed Flash Catalyst on top of the Eclipse engine. Eclipse is the same powerful development environment used by Flash Builder (the primary tool for developing Flex applications), and by thousands of other developers using languages such as Java.

Eclipse is open-source, which gives those who want to use it almost complete freedom to do with it what they will. However, unlike its cousin Flash Builder, Catalyst was built with designers in mind. As such, its interface much more closely resembles other Adobe tools such as Photoshop than it does a traditional Eclipse workspace.

The Start screen

When you first launch Catalyst you will be presented with the Start screen (see Figure 2.1). This provides a useful starting point to launch a new project, import a project from another design application, or open a recent project.

Figure 2.1. The Start screen in Flash Catalyst provides a quick-launch point to get you started.

What about Fireworks and Flash Professional?

Experienced Web designers may be wondering about Adobe Fireworks. While it is possible to create Catalyst comps in Fireworks, you cannot work as easily between Fireworks and Catalyst as you can between Catalyst and Photoshop or Illustrator. See Chapter 7 for more details on using Fireworks and Catalyst together.

You might reasonably believe that Catalyst could work seamlessly with Adobe Flash Professional, as they are both obviously tools within the Flash platform. However, Adobe's concept of the Rich Internet Application workflow with Catalyst does not directly include Flash Professional, and in fact you will discover that the two have very different approaches. That is not to say, however, that some integration between the two is impossible, as is shown in Chapter 13.

If this is your first time using Catalyst, it might be easiest to select Adobe Flash Catalyst Project under the Create New Project heading. This opens a new project and allows you to jump right in to wireframing an application. A wire-frame is a rough design of a project, generally with simple shapes to illustrate where the project's elements will be. Wire-frames will generally lack final design elements.

Note

For more information on wireframing in Catalyst, see Chapter 4.

Most of the time, however, you will be using one of the other options on the Start screen, like this:

1. Choose one of the import options on the right side of the Start screen in the Create New Project from Design File section:

   • From Adobe Illustrator AI File

   • From Adobe Photoshop PSD File

   • From FXG File

2. To continue work on an existing project, you can do either of the following:

   • Click the file name directly in the Open a Recent Project section.

   • Click Open Project to browse to the project file.

Note

For more details on creating comps in Photoshop and Illustrator, see Chapters 8 and 9; for more information on exporting a project to Flash Builder, see Part IV.

The main workspace

After you open a project, whether new or from an existing design, you are presented with the main workspace in Catalyst (see Figure 2.2). As with other Adobe design programs, Catalyst relies on a series of panels to organize the workspace.

Figure 2.2. The Catalyst Design workspace. This view shows the workspace when opened for creating a new project.

Menus at the top of the screen provide access to commonly used commands within the program. The menus provide many of the same options available in other similar design programs; I discuss their specific commands as they become relevant within the course of the book.

Design and Code workspaces

Catalyst provides two primary workspaces:

• Design

• Code

All of your actual work in the program will be done in Design. The Design workspace provides a set of panels that allow you to modify your project and its assets, as well as design a canvas to see what the project will look like when it's complete.

All Flex projects are ultimately code based. Catalyst merely provides a visual means by which designers can create this code; everything you do in Catalyst has a code equivalent. The Code workspace allows you to view the code that has been generated by the program, but you should note that it is read-only. You cannot edit code directly within Catalyst.

You can freely switch between Design and Code by choosing Window

Tip

The shortcut key is in the upper-left corner on most standard keyboards, immediately to the left of the number 1.

Design panels

Most of your work in Catalyst will be done via the panels in the Design workspace. If you are familiar with other Adobe applications such as Photoshop or Illustrator, the functionality of these panels should also be familiar:

• The Pages/States panel (see Figure 2.3), stretching along the top of the screen, provides a work area for adding and navigating to the pages in your application.

• A Tools panel in the top-right corner of the screen allows you to select Catalyst's basic drawing tools.

  

  Figure 2.3. The Pages/States panel

• The Layers panel immediately below the Tools panel displays the layers that make up your project (see Figure 2.4). Designers will already be using layers to organize the initial design comps in Photoshop and Illustrator, and those layers are imported and preserved in Catalyst.

  • The Library is grouped with the Layers and contains external assets such as images that will be used in the project.

    

    Figure 2.4. The panels grouped along the right side of the interface include the Tools, Layers and Library, Interactions, Wireframe Components and Design-Time Data, and Properties panels.

• The next set of panels also shares a group:

  • The Interactions panel is where you go to control the actions of the components in your project. For example, you can add instructions as to what happens when a user clicks a button.

  • The Wireframe Components panel contains a set of common Web tools such as buttons and sliders to use in wireframe comps in Catalyst.

  • Design-Time Data allows you to enter information to be used in repeating elements while you create the design.

• The Properties panel, the final panel on the right-hand column, allows you to modify an element that you have selected on the screen.

• The Timelines panel (see Figure 2.5), which stretches along the bottom of the screen, is your workspace for setting up animation.

  

  Figure 2.5. The Timelines panel

Code panels

The Code workspace provides two panels:

• Project Navigator

• Problems

The Project Navigator panel (see Figure 2.6) allows you to see the various files being created by Catalyst as you work. These are the files that make up your project and are used by the Flex developer to finalize the project in Flash Builder 4.

Note

See Part IV for details on using Flash Builder 4 to finalize the project.

Figure 2.6. The Project Navigator panel is available only in the Code workspace.

The Problems panel displays any errors that may be generated when you attempt to run the project. Errors may occur if you forget to complete a set of tasks (for example, creating a scrollbar but not specifying each of its required components).

The Heads-up display

The Heads-up display (HUD) floats on the screen whenever you are in the Design workspace. The primary purpose of the HUD is to convert selected artwork into a component such as a button or scrollbar.

You can freely move the HUD around on the screen to a location where it's easily accessible while still being out of your way. You cannot dock it on any edge of the screen — it will always be floating (see Figure 2.7).

The functionality of the HUD is duplicated. For example, you can right-click (

Figure 2.7. The HUD in Catalyst, showing the options to convert artwork to a component

Help is provided within Catalyst using the Adobe Community Help system. When you click Help

The Community Help application displays help not only from the Adobe help files but also from community resources such as blogs. Users can also comment on help files, noting those items which might be confusing so that Adobe or other members of the community can clarify them.

Flash Catalyst has been designed to look and feel like other Adobe design products. While it provides some menu-based controls, most of the work is done through panels and the HUD. This chapter introduced the idea of creating projects (the main type of file used in Catalyst), provided an overview of that layout, and showed you how to use the application's help system.