Welcome to Flash Catalyst “Panini”
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Adobe has recently released a preview of the next version of Flash Catalyst, code-named “Panini.”
The team behind Flash Catalyst has been hard at work adding tons of new features, refining existing items, and overall helping Flash Catalyst continue to mature into a fine tool for both the prototyping community and Flex developers. If you have not already downloaded the preview release, you can grab it from the Adobe Labs site. Don’t worry, Flash Catalyst “Panini” can be installed without overwriting your current version of Flash Catalyst CS5. So let’s take a look at what “Panini” has to offer.
)
One of the first things that you will notice is the Components Panel’s location has changed from the upper right to the lower left. The reason for this is the team has expanded the number of components available for use in creating Flash Catalyst projects.
){kind=small}
The components are grouped into two categories: Flex and Wireframe & Media. You can quickly toggle the sets by using the buttons along the top of the Components Panel. The Flex set of components are native Spark (or Flex 4 framework) friendly components. You will see a small Fx badge overlaid on each component. These include: button, check box, data list, horizontal scrollbar, horizontal slider, radio button, text input, vertical scrollbar, and vertical slider. Each of the elements can be fully skinned using the Flex 4 skinning techniques.
The Wireframe & Media components are a collection of components that can be used as “for placement only” (FPO in designer-speak), or components that are containers for other media types (images, video, SWFs).
These FPO components are one of the key highlights in Panini. The team has created over 20 new components that can be quickly added to your Catalyst project. The idea behind these components is that Interaction Designers can use them to create more compelling mockups of their designs. Some are just simple placeholder images (vertical bar chart), while others, like the combo box, are custom components which allow for more interaction and customization. If you are using Flash Catalyst as part of workflow into Flash Builder, these components are meant to be replaced by the Flex developer with either legacy MX (Halo) components, their non-skinable Spark components, or by more complex custom components that the developer creates.
As you start to place these components, you might notice that the architectural blue style has been replaced with a neutral gray style. Hopefully this will help folks understand that you are showing them a wireframe mockup of their next great idea, and not the final design.
As you survey some of the other visual changes to Flash Catalyst’s user interface, you will notice that it has gained an Align Panel. This panel is located next to the Interaction Panel on the right side of the interface. It contains all the common alignment, distribution, and spacing options for both object and artboard.
)
You might be wondering with the new Align Panel and the expanded Components Panel if it is possible to rearrange the panels with Flash Catalyst. Unfortunately, this is a feature that is not in this release. Also, only one project can be open at a time.
Resizable Components and Applications
One major complaint with Flash Catalyst was that neither the application nor its components were resizable. This meant that the Flex developers would have to go through the Flash Catalyst project once it was imported into Flash Builder and adjust all the size and constraint references in every component. With Panini, a lot of those issues have been removed. You might have noticed that when you select a component on the artboard, open circles appear on each of the four sides.
)
These are ‘suction cups’ that will allow you to lock the component to the artboard. If you right click (control-click on the Mac), you can set the type of constraint (fixed or center). The None option allows you to break the suction between the component and the artboard.
)
The artboard is also resizable. In the lower right corner of the artboard is a new control that will to change the dimensions of the artboard. By clicking and dragging this control, you will also see how your components will resize as well. To return to the default size of your artboard, double-click the new resize control.
Custom Components
One of the first things you will notice when creating a custom component is a dialog prompting you to name the new component.
){kind=small}
Previously, the component would automatically be named ‘customcomponent1’. This could easily create a problem for the Flex developer who might be working with your Catalyst project if you forgot to rename the component.
Component Swapping
It is also now possible to swap custom components with others in the library. The new component will keep the same dimensions, so be aware of that if you are swapping different sized components. This new feature should allow designers to create FXPLs that can be imported into other projects and easily replace draft components with new versions. Note you cannot swap FXG or Optimized graphics in this release.
New Interactions and Targeting
A new interaction for double-clicking has been added to the interactions panel. Another change to the interactions panel is the ability to enter into a special ‘target mode’ that will allow you to visually select the target of the component. This new feature is extremely useful if your project uses a lot of complex custom components.
){kind=small}
The Interactions panel now has the ability to enter into a special "target mode" to visually select the target of a component anyplace in your project. This will enable you to create much more complex prototypes without having to add the functionality via Flash Builder.
Timeline Improvements
The timeline panel now has a horizontal scrollbar to make it easier to work with longer timelines. In addition, the code that generates the timeline effects has been rewritten. The first result of this rewrite is the elimination of ‘yellow bars’ that occasionally would appear in Flash Catalyst CS5 for complex transitions using groups or multiple objects.
Cleaner Code
One often heard complaint about any system that auto-generates code is that is messy. For example, in the previous version, a component’s width attribute might not be next to its height attribute. In this release, the team has tried to group like attributes together.
Round tripping!
){kind=small}
I decided to save the best for last. One of the promises that Thermo (the 1.0 code name for Flash Catalyst) made was that you would be able to design in Flash Catalyst, open the project in Flash Builder, then re-open the project in Flash Catalyst to continue the design process. Well, with this release, we can now start to do this.
There are still a lot of restrictions on what you can do in this preview release, and this functionality will still have some hiccups, but this is a great step forward. Flash Catalyst can only work self-contained Flex projects. That means no RobotLegs, Mate or other third party libraries can be used in the project. I know this might be a deal breaker for some, but it does open up a new range of possibilities for the designer-developer workflow. And the team is working on addressing a number of workflow collaboration issues for the final release.
As you can imagine, enabling round tripping between Flash Catalyst and Flash Builder has some risks. What happens when a designer tries to delete a button in Flash Catalyst, but the developer has added ActionScript code that references that instance? Well, Flash Catalyst should prevent this from occurring.
){kind=small}
Another area that round tripping will affect is working with Design Time Data. The usual workflow is the designer creates some placeholder data using the Design Time Data panel and styles the look of the repeated item. Then in Flash Builder, the developer removes the reference to the design time data, and links it to some external data source. But what happens if this project is reopened in Flash Catalyst? Will the designer still be able to work with the design of the item renderer? Yes! However, they will not be able to reconnect it to Flash Catalyst’s Design Time Data panel.
Custom Component Skinning
But Flash Catalyst is more then just a prototyping tool. It can be a key component for the Flex developer’s workflow. To assist this, it is now possible to take a custom component built originally in Flash Builder and export it as an FXPL (Flex Project Library). A designer can then import that FXPL into Flash Catalyst, attach the visual elements, then re-export it as a FXPL for the developer. One caveat is that the custom component has to be built with Catalyst friendly components.
Summary
So there you have a quick summary of some of the new features and improvements in Flash Catalyst ‘Panini.’ This is a major step forward for the product. Look for continued refinements and performance increases before the final release.
For more information about this release, look for the sessions from Adobe MAX on tv.adobe.com or on the Flash Catalyst forums!
One final note: Because this is a preview release, Flash Catalyst ‘Panini’ will not import existing 1.0 projects. This is a precaution to prevent a project from being upgraded accidentally. The final release will be able to import 1.0 projects.
I would like to thank both Doug Winnie and Tara Feener for reviewing this article.