by Doug Winnie
At Adobe MAX 2010 last month, Adobe released the public preview of Adobe Flash Catalyst "Panini." Flash Catalyst CS5 was the first step in providing a more seamless and collaborative designer–developer workflow to create user interfaces for web applications using the Flex framework and the Adobe Flash Platform.
With Flash Catalyst "Panini," Adobe is continuing to evolve the integration and collaboration of designers and developers, while providing additional capabilities to enable greater designer productivity when creating application user interface designs. In this article, I review the features that are new in Flash Catalyst "Panini." I invite you to download the public preview on Adobe Labs and use it in conjunction with Flash Builder "Burrito" and the Flex "Hero" SDK.
In Flash Catalyst "Panini," you can create resizable applications that adjust the layout of the objects when the window or browser is resized. To create a resizable application, just make sure the Resizable option is selected when you create a project. You can also access this option from the Artboard Options menu.
When you create a resizable application, you can apply constraints or anchor your components to the edge of your application using constraints. When the project resizes, the components will remain attached to the application edge.
To add constraints, Flash Catalyst displays new decorations around an object when it is selected. By clicking these, you can then attach them to the edge of the artboard using its current distance. You can move the object by clicking and dragging it. While you drag, "Panini" shows the distance from the edge to help you get the precise constraint you want (see Figure 1).
Figure 1. Using constraints to anchor components to the edge of an application.
To preview how your constraints work, click and drag the reverse L handle in the lower right corner of the artboard to see how your application will resize. To restore it to the regular size, double-click the handle.
In Flash Catalyst "Panini," you can now create resizable components in your application. By converting artwork to components, you can define specific resizing rules using constraints.
When the objects are constrained, you can then resize the components in your application, and even make Resize transitions based on changes across states (see Figure 2).
Figure 2. Making resize transitions for components.
The biggest feature of Flash Catalyst "Panini" is the improved collaboration between designers and developers to create a project that can move from design to development and back again. In Flash Catalyst "Panini," you can open a project that has been modified by Flash Builder. To enhance the workflow, there are new compatibility checks in Flash Catalyst "Panini" and Flash Builder "Burrito" to ensure that the project is usable in "Panini."
In addition to sending the project back and forth, developers can create a custom component definition called a custom skinnable component. With this, developers can set up the parts and required design elements of the component that designers can skin and then create the application code that will run the project.
When designers have a project with these definitions, they can convert artwork to a developer custom skinnable component (see Figure 3).
Figure 3. Working with skinnable components.
Inside the component, designers can then link designs to the parts of the component that the developers defined to create a working component.
To help developers work better with projects from Flash Catalyst "Panini," the structure of the code that is created has been optimized based on feedback from the Flex developer community. This includes better handling of line wrapping, organization, and ordering of attributes as well as other improvements.
Finally, when developers have written code that targets specific components, the designers will be notified that specific objects can't be removed from the project. Otherwise the project will generate errors and won't run. In addition, if the developers have created custom event handlers for components, those are shown in the Interactions panel so the designers know that the developers have defined a custom action to take place.
There are several productivity enhancements in Flash Catalyst "Panini" that make it faster and easier for designers to do their work.
The first is the new Align panel, which gives designers a quick way to align, distribute, and consistently resize objects either based on the selected objects or against the artboard or component container (see Figure 4).
Figure 4. The new Align panel.
To help support rapid wireframing, the Components panel has been revamped to include a new wireframe design skin that is grayscale. Also, additional components and FPO (for placement only) objects have been added exclusively for wireframing applications and user interfaces (see Figure 5).
Figure 5. New wireframing tools in the Components panel.
To help designers use Flash Catalyst and provide them with a means to take artwork that is modified in Flash Catalyst using roundtripping to other applications, Adobe has added a new Save As FXG feature. Many people want to use Flash Catalyst "Panini" for wireframing and Flash Professional to build the final application. Using the Save As FXG format, designers can export individual items as FXG files and import them to Flash Professional to continue their project.
The last new feature in "Panini" that helps designer productivity is the ability to swap objects on the artboard with items from the Library. This is helpful if designers need to apply updated skins to objects quickly.
Those are the highlights of the preview release of Flash Catalyst "Panini." For more information on "Panini," Flash Builder "Burrito," and other updates on the tools of the Flash Platform, check out Adobe Labs. If you have questions or you want to submit ideas to the team, use the forums on Adobe Labs.
Doug Winnie is a principal product manager at Adobe focusing in interactive design for HTML5 and the Flash Platform. Doug has worked in the web and interactive industry for over ten years focusing on front-end web design and development. During his time at Adobe, Doug has lead numerous teams to make web and interactive design workflows more efficient and powerful leading the Flash Catalyst, Fireworks, and Dreamweaver teams.