Introduction to Flash Catalyst CS5.5

Required Adobe products

• Flash Builder 4.5
  
• Flash Catalyst CS5.5

Note: The downloads currently available on Adobe Labs are early preview releases; final releases of Flash Builder 4.5 and Flash Catalyst CS5.5 will be available for download in early May.

(Besides this article, you can watch my accompanying video to learn more about Flash Catalyst CS5.5.)

Flash Catalyst CS5.5 represents an important step forward in the Flex-based designer/developer workflow. As Flex-based applications become more visually rich, more technically complex, and more prominent in the enterprise, the ability to prototype and create visually accurate applications becomes even more critical.

In Flash Catalyst CS5.5 Adobe has focused development efforts on the following areas:

• Resizability support for applications and components
• Improved Flash Catalyst and Flash Builder workflow
• Wireframing and prototyping enhancements

By default, all new projects created in Flash Catalyst CS5.5 are resizable. With a resizable application, you can see a real-time preview of how your application will respond when viewed in the browser. Using the new application resize handle (see Figure 1), you can scale the artboard to test various layout scenarios. When you add components to your project, you can use a new UI to attach or constrain the component to the edge of its container. These new constraint handles (see Figure 1) can affect the positioning of a component as well as the size of the component. For instance if the left and right sides of a component are constrained to the artboard and the artboard grows in width, then the component will be forced to make up the difference with its width.

Components do not have to be constrained to only the artboard. If you have components grouped or added to other components, constraints can be used as well. Clicking on a constraint handle will attach that side to its container. You can also right-click a component and select Add Constraints to automatically add constraints to all four sides of it.

The primary focus for Flash Catalyst CS5.5 is providing designers and developers a meaningful way to work together. Adobe knows that teams and projects come in many shapes and sizes, so Flash Catalyst gives you numerous options to best fit your specific needs. This section provides a quick overview of workflow options. For a more in-depth look at what workflow best suits your needs check out the article Understanding new Flash Catalyst CS5.5 and Flash Builder 4.5 workflows.

Flash Catalyst CS5.5 and Flash Builder 4.5 roundtripping

Flash Builder 4.5 now supports opening any projects created in Flash Catalyst CS5.5. After creating a wireframe or prototype in Flash Catalyst, you can save your project and then import it into Flash Builder. Once in Flash Builder, you can begin to add business logic and define additional custom components. At any point, you can export the project back to Flash Catalyst and skin the components created in Flash Builder.

Flash Builder 4.5 also supports a new project type: the Flash Catalyst compatible project. This project type leverages a new compatibility checker that ensures code written in Flash Builder can be interpreted by Flash Catalyst. If you start a Flash Catalyst compatible project, you can simply right-click on the project and choose Flash Catalyst > Edit Project In Flash Catalyst to open and edit the project in Flash Catalyst (see Figure 2). Once you’ve finished editing in Flash Catalyst, you can resume working in Flash Builder seamlessly.

More Flash Builder feature support

Among the most exciting new features of Flash Builder 4.5 are the coding productivity enhancements and code style customization. If you define templates or a style in which your code should be formatted, when returning to Flash Catalyst it will respect those preferences and continue to generate code in that same style.

Not only does Flash Catalyst respect your style of coding, but it now respects your package structure as well. Any new files created by Flash Catalyst will be put into the Components package, but Flash Catalyst is also be able to read and understand components created in Flash Builder and placed in your custom package structure.

To work better with Flash Builder, Flash Catalyst now tolerates arbitrary ActionScript files as well as SWCs linked in Flash Builder projects. In many cases, Flash Catalyst cannot introspect or modify these files but they will not cause an error when opening the project in Flash Catalyst.

With new features such as the Align panel, managed layouts, and global interaction targeting, Flash Catalyst enables you to rapidly create wireframes to share with a development team or to generate a high fidelity prototype to share with a client.

Layout enhancements

The Align panel is a particularly exciting new addition, which you’ll recognize if you are familiar with other Adobe design tools. It lets you align, distribute, and resize selected components to each other or to their container.

The Common Library panel (see Figure 3) offers a variety of placeholder components as well as Spark components. You can easily replace the placeholder components with imported artwork by using the Replace With command. The skinnable Spark components (noted by the small pencil icon) can be visually skinned and directly used in your Flex project.

Flash Catalyst CS5 supported only simple groups for layout. With this release, Catalyst CS5.5 supports more complex managed layouts such as Horizontal, Vertical, and Tile layouts. These layout types correlate to the same layout types developers use in Flash Builder.

Interaction enhancements

To help designers create truly interactive prototypes, Flash Catalyst has introduced a global interaction targeting system. Global interaction targeting enables an interaction, such as a click, to control another component anywhere in your prototype. After choosing the component to which you want to add the interaction, simply navigate through your app, select the component you would like to control (see Figure 4), and then choose your command.

Animation enhancements

Enhancements to the Flash Catalyst timeline and animation system will be a pleasant surprise for any designers interested in adding animation to their applications. Flash Catalyst CS5.5 has expanded the number and types of parameters that can be animated. There is now animation support for filters, strokes, fill colors, font sizes, and font colors. In addition, Flash Catalyst CS5.5 has auto-reverse effects, repeat settings, and interrupt settings to enable even more engaging animations.

This is just a brief overview of a few new features of Flash Catalyst CS5.5. To dive deeper into any of these topics follow the links in this article or check out the complete list in the Flash Catalyst Developer Center on the Adobe Developer Connection. If video is more your thing, there is tons of great content walking you through all of these features on Adobe TV. Watch my accompanying video as well.