Flash Catalyst CS5

Flash Catalyst CS5, Adobe’s brand new interactive design tool, represents a bold initiative with a narrow and specific function. The program lets non-coder designers fashion interactive graphical elements that come to life as components of a Flash project—but only in conjunction with Flash Builder 4, which is now a member of the CS5 family.

Flash Catalyst’s boundaries are defined by The Three No’s: No design (drawing tools are limited; you draw objects in Illustrator or Photoshop); no coding (you use Flash Builder); and no animation (you use Flash Professional). With Flash Catalyst, Adobe has pried apart the major interactive design functions and targeted them to the designers, programmers, and animators best able to accomplish specific tasks.

The Catalyst interface is anything but intimidating. Coding is generated in the background as designers work, and it is embedded in a saved FXG file—an XML based format supported by Photoshop ( ), Illustrator, Fireworks, and Flash Builder 4 (renamed from the previous Flex Builder), but not Flash Professional CS5. There is a Code view, where you can see the code generated, but you cannot edit it. So, while you can create, view, and test a button’s rollover effect in Catalyst, the button itself can only have a limited set of actions associated with it—such as opening a Web page or launching a video—until a Flash Builder 4 ActionScript expert sets it in motion.

Flash Catalyst provides a familiar Layers Panel, rules, grids and guides, an Align function, and a library of components that designers can add to their pages. The toolbar is rudimentary, with a stripped-down set of tools for selection, drawing, navigation, and zoom. Text editing and formatting options are similarly bare bones. The concept is that designers will create and edit artwork and type in Illustrator and Photoshop, and when editing rounds are complete, the artwork is saved as an FXG file.

I found the inability to move, hide, or resize Catalyst’s limited set of panels a bit disconcerting at first. If the interface is supposed to make designers feel at home, it might have been nice to give panels the same attributes found in other CS5 applications: a panel menu and the ability to move, resize, and collapse panels. According to Adobe, this permanently anchored set of panels is a “version 1.0” feature, with the implication that future versions may sport more fully featured panels and controls. That said, the more I worked in Catalyst, the more I could see that such controls might be unnecessarily distracting, since the point of Catalyst is to assign interactivity to objects, not to edit or create them.

Bringing graphic elements to life with Actions

When a new project is launched in Flash Catalyst, the opening dialog provides the option of opening a new project from a design file in Illustrator or Photoshop. Oddly, while you can have multiple design artboards open in a single file, you can have only one Catalyst project or file open at a time.

Support for Illustrator effects and Photoshop filters is extensive, limited only by features not supported in Flash Player 10. Flash projects are (mainly) based on scalable vector artwork. Unlike bitmap/raster artwork (best used to digitally represent photos), scalable vectors lose no resolution or quality when a viewer or an application zooms in. Scalable vectors do not increase in file size as they change size on the screen. Both Illustrator and Flash (including Catalyst) are vector-based, and Catalyst’s ability to animate and activate Illustrator objects is a significant change in Illustrator CS5 as well.

Combined with finely synchronized support for Illustrator and Photoshop artwork, the essential magic of Catalyst is that it can convert that artwork to interactive components. For example, you can draw a form input field in Illustrator or Photoshop, but you can make that form field accept data in Catalyst (processing actual data requires handing the project off to a Flash Builder coder). You can do the same with other form input fields: radio buttons, text input, or check boxes. And you can use Catalyst to convert other Illustrator or Photoshop artwork to sliders or scrollbars. You can also add immersive content or interactive video created with Flash Professional to your Flash Catalyst projects in order to provide a more compelling user experience.

Designing a customized scrollbar for a Flash application is as easy as copying and pasting a horizontal or vertical bar from Illustrator or Photoshop, along with artwork to use as a thumb, an up arrow, and a down arrow. A simple popup menu assigns a scrollbar part to any selected graphical element. The concept is exciting. The biggest shortcoming is that the set of available actions is quite limited. They are:

• Play, pause, or stop video
• Go to a URL
• Play, pause, and stop SWF files or go to a specific frame
• Change a component’s state
• Change or fade opacity
• Add a sound effect
• Move, resize, and rotate objects
• Rotate an object in 3D space

Catalyst also generates a number of form elements, but I found gaps when I tried to design accessible forms. The set of form fields also does not include popup boxes.

Similarly, the video player controls were truncated in their ability to convert a graphic element to a Start, Stop, or Pause button. There’s no option to assign a mute button or volume control.

Wireframing and prototyping

Catalyst includes a set of symbols for wireframing (creating a sketch of what an interactive page should look like). Here too, I found the tool set limited to the basics. You can insert form fields and scrollbars, add formatted text, and draw shapes. On the other hand, this set of wireframe symbols and actions matches Catalyst’s set of actions (the list above)—thus allowing a designer to prototype an interactive page that is all set for the coder’s handiwork.

If a wireframe layout for a Flash project is copied into Catalyst from Illustrator, some elements of that layout can be activated, meaning they can have actions applied to them.

Animation

Catalyst also has a timeline. No, not that timeline—not the grid of frames and layers used to create animations in Flash Professional. The Catalyst timeline looks and functions very much like the Animation panel in Photoshop CS5. You do not animate objects in Catalyst, but you can apply (and schedule) effects like fade-in and fade-out, sound effects, movement, resizing, rotation, and 3D rotation.

Designing a four-state button in Flash Catalyst is intuitive. Simply double-click on button artwork copied from Illustrator or Photoshop, and assign Button from Catalyst’s Convert Artwork to Component popup.

You can either use the modest set of graphic filters in Catalyst to modify the up, over, down, and disabled states of a button, or use four separate images from Illustrator. If you elect to tweak button states right in Catalyst, you can choose from Blur, Drop Shadow, Inner Shadow, Bevel, or Inner Glow effects.

Handing off projects to Flash Builder

Generally speaking, nobody will create stand-alone projects using Flash Catalyst. It is meant to assemble interactive objects that can be given to a coder to animate and connect with live data. A form is designed in Catalyst and connected to a server in Builder. Designers working in Catalyst can use (dummy) test data (called design-time data) to visualize how their graphic elements will work with data, but an ActionScript coder in Flash Builder will need to activate the project with live data.

The reason that Catalyst projects can be opened only by Flash Builder is that Catalyst’s invisible process of generating code creates editable modules that, until CS5, have been called Flex. Flash Builder (formerly known as Flex Builder) can work with this code, but Flash Professional cannot.

Macworld’s buying advice

Within its clearly defined and constrained boundaries, Flash Catalyst CS5 is a radical step toward integrating visual designers more closely into the process of building Flash interactive projects, and separating out the three major functions of Flash: Interactivity, animation, and coding. Catalyst is an interesting innovation, with potentially significant implications for Flash development, but it debuts as a 1.0 product, a work-in-progress. It’s stable but its features are quite limited. If people are in an environment where the CS5 Web, Design, or Production Premium collection is available, they’ll likely use it, but at this point, I wouldn’t suggest that an independent designer who works with Flash developers buy it.

Designers who find Flash Professional challenging but approachable may not be satisfied with Catalyst’s limited set of actions, but designers who have never crossed the bridge into working with Flash will find Catalyst an appealing entree into the process. At the other end, Flash Builder coders will appreciate being able to integrate batches of Flex code generated directly by designers without having to guess at their intent.

[David Karlins is the author of the upcoming book Adobe Creative Suite 5 Web Premium How-Tos: Essential Techniques [Peachpit, 2010]. He teaches graphic and interactive design at San Francisco State University Multimedia Studies Program (online) and at 3rd Ward in Brooklyn, N.Y. His free tutorials and videos are found at davidkarlins.com .]