What is Adobe Flash Catalyst CS5? - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Adobe Flash Catalyst Creative Suite 5 can make creating Flash web sites or desktop applications easy. You can start by creating your design in Photoshop or Illustrator and importing the resulting file into Catalyst. Then, you can do the following:

  • Create buttons that change while the user hovers the mouse cursor over them or clicks them (just like buttons in Flash).

  • Add buttons, sliders, and other user interface components that link to other locations or perform other marvelous tricks.

  • Add animation, such as moving components on and off the screen.

  • Develop an entire site with multiple pages.

  • Easily add animated transitions, such as resizing, rotating, or moving objects, or fading objects or pages in and out.

In larger projects that might require programming code (such as desktop applications or database-driven web sites), Catalyst makes it easy for the designer and the developer to interact smoothly. The developer can use the information from Flash Catalyst directly in Adobe Flash Builder, a program for adding ActionScript. The designer can then incorporate changes made in Builder back into Flash Catalyst files.

In the figure, you see Catalyst with an example of a web site designed in Photoshop and transformed into an interactive web site. You can find the original site at www.tellnshow.com.


Thanks to Ellen Finkelstein for permission to use her website as an example.

If you’re an artist working in Adobe Fireworks, you can also interact with Catalyst using files that are saved in the FXG format. (Choose Commands→Export to FXG from the Fireworks menu.) However, these files do not currently support layers. If you want to use Fireworks files in Catalyst, perhaps the easiest thing to do is to export them into Photoshop format to preserve layers before importing into Catalyst.

The Catalyst screen consists of the following:

  • Artboard: Like the Stage in Flash: where you do your main designing.

  • Heads-up Display (HUD): Use this dark floating panel to easily convert objects. It changes based on what you select.

  • Tools palette: Container for selection tools, basic shapes, zoom, text, and a rotation tool.

  • Layers panel: Rearrange, view, and lock layers, as well as add and delete layers. It sits below the Tools palette, along with Wireframe Components and Library.

  • Library panel (hidden in figure): For objects that you plan to use more than once, or objects that you import, such as images or SWF files.

  • Wireframe Components panel (hidden in figure): A selection of user-interface components you can add to your website.

  • Interactions panel: Where you define what action to take for button clicks and other interactions.

  • Properties panel: Set properties for selected objects.

  • Breadcrumbs: Navigate back from working with button states (or states of other components) to the main Artboard. (The figure shows only one breadcrumb item.)

  • Timelines panel: Specify movement of objects, rotation, changes in opacity, resizing, and more.

  • Design-Time Data panel (hidden in figure): For applications requiring data, you can add sample data using this panel.