There’s a lot of buzz and excitement about the new release of Adobe Flash Catalyst CS5 and for several good reasons. This new rich Internet application (RIA) interaction design tool has the potential to significantly improve the workflow for designing, developing, and publishing RIAs built on the Adobe Flex Framework.
Many designers have already begun to work with Flash Catalyst, and the response is overwhelmingly positive. Using Flash Catalyst, designers can publish working Flex applications without writing a single line of code. Some examples include interactive advertisements, product guides, design portfolios, and user interfaces for rich media applications.
Let’s take a look at ten features and benefits that make Adobe Flash Catalyst CS5 a smart choice for anyone who produces interactive content for the web or desktop.
Design fidelity
A common challenge for many application designers is handing off static artwork and describing the intended user experience to developers. The original vision is left to interpretation and sometimes lost in translation. By using Flash Catalyst, designers can now publish completed rich internet applications or provide functional application elements to developers while maintaining design fidelity throughout the entire workflow.
The Flash Catalyst workflow begins by creating artwork and structuring the application using familiar design tools—Adobe Illustrator, Adobe Photoshop, and Adobe Fireworks. The design composition is then imported into Flash Catalyst. Layers, groups, names, and the structure and position of artwork are preserved in Flash Catalyst.
)
With your original artwork and design structure preserved in Flash Catalyst, you can now begin to turn static artwork into functional application components. Flash Catalyst maintains the appearance and behavior of user interface elements all the way through to the published application—with pixel-level accuracy, consistently across operating systems and devices.
For applications that require integration with severs and services, the developer gets to implement precisely what the designer wants because they no longer have to go through the interpretation process. This leads to an overall better application design, delivering a more expressive and intuitive application.
Converting artwork to built-in Flex components
Interactive components, such as buttons, scrolling panels, check boxes, input text, and scroll bars, are the building blocks of rich internet applications, and Flash Catalyst makes adding them easy. Flash Catalyst provides a collection of built-in component types with predefined states and behaviors, such as the up, over, down, and disabled states of a simple button component. You select the artwork to include in the component, tell Flash Catalyst which type of component to create, and then indicate which artwork to show or hide in each component state. The Flash Catalyst built-in components types include:
- Button
- Checkbox
- Radio Button
- Toggle Button
- Text Input
- Horizontal Slider
- Vertical Slider
- Scroll Panel
- Horizontal Scrollbar
- Vertical Scrollbar
- Data List
)
If the available component options don’t fit your needs, you can use the Custom/Generic Component option to design original components with up to 20 unique states. By using custom components, you can add unlimited depth and scope to your application by nesting components within other components. For example, you can design a control panel or dialog box that appears when someone interacts with the program. This can include other components, such as buttons and sliders, or other submenus. The really unique opportunity here is that you’re not limited to traditional models for user interface controls. Because you can skin your components using custom artwork, you can design completely original and highly creative user interface elements.
Interactivity
Something we all want to achieve is to capture and maintain the attention of our audience. One way to do that is to put them in control of their own experience. This is done through careful design that defines how users interact with an application, and how the application responds to those interactions.
Something that designers will really appreciate is how easy it is to add interactions to user interface elements in Flash Catalyst. With just a few clicks, you can easily define what happens when a user interacts with a component (or grouped artwork). Turn buttons into navigation menus, control the playback of video and sound, or open a web page in a new browser window. Create a panel that slides or fades into view and then reveals more information. Design a button that spins in 3D or plays a sound effect when someone rolls over it. You can even create conditional interactions that behave differently based on certain conditions. For example, clicking a Next Page button takes the user viewing page 1 to page 2 and the user viewing page 2 to page 3.
Smooth animated transitions
Reproducing film-like transitions in web applications used to be a time-consuming, specialized task for computer animators. But with the introduction of Flash Catalyst, designers can now produce smooth, professional-looking animated transitions with the click of a button.
)
Transitions are animations that play once as the user moves from one page or component state to another. Transitions can include simple fades, as well as animated effects like moving an object across the screen, morphing an object from one shape to another, or resizing images.
In Flash Catalyst, you can add transitions simply by changing the existence or properties of objects from one state to the next. For example, a Fade transition appears when an object is present or visible in one page but not in another. A move transition appears when you change the position of objects. Just click the Smooth Transition button in the Flash Catalyst Timelines panel to apply default transition settings and the smooth animated transition becomes apparent. You can then adjust the timing and duration of the transition in the timeline or Properties panel.
){kind=small}
Video, sound, and SWF movies
Adding video and sound effects can turn an otherwise dull site into something engaging and memorable. Flash Catalyst supports video files with the .flv and .f4v filename extensions and audio files with the .mp3 filename extension. Flash Catalyst does an excellent job creating fades and movement, but you can also produce more complex animation using other Adobe Creative Suite tools and then publish the movie as a SWF file. The SWF file is imported as an asset in your Flash Catalyst project. You can then use interactions to control the playback of your SWF content, including playing and stopping at a specific frame in the movie’s main timeline.
Data lists and design-time data
When developing an application that’s used to present large amounts of data, it’s not always possible to see the end result until the application is running and connected to a back-end data source. That is unless you’re using a Flash Catalyst Data List component and design-time data.
)
Flash Catalyst includes special type of component called a Data List component that’s used to retrieve and display a series of related items. The name data can be little misleading. Each unique record in a Flash Catalyst data list can include artwork, text, or a combination of both. It doesn’t need to be a list at all. Traditionally, a data list might look something like a spreadsheet or data table. Using Flash Catalyst, you can build a Data List component that displays a tiled wall of images, a scrolling filmstrip, or a series of thumbnails, from which you select and view other content or navigate to new locations in the application. By adding a scroll bar, you can extend the list to include any number of items. Of course, there’s nothing stopping you from making your data list look like an ordinary list if that’s what you want. In fact, there’s even a built-in wireframe Data List component to help you get started. Design-time data allows you to use content, such as sample database records or bitmap images, without having to actually connect to a back-end system. This gives designers complete control over the final look and feel of the user experience. A developer using Adobe Flash Builder can replace the sample design-time data with real data from a database while maintaining the interactions and pixel-perfect design from Flash Catalyst. Round-trip editing Flash Catalyst provide a good collection of tools for creating and modifying basic lines and shapes—including gradients and a nice collection of filters for adding drop shadows, beveled edges, and more. If you have a copy of Adobe Photoshop CS5 or Adobe Illustrator CS5 installed, you can also take advantage of the Flash Catalyst integrated round-trip editing features. Select the artwork you want to edit, launch Illustrator or Photoshop, make changes, and then return the edited artwork to Flash Catalyst.
Rapid prototyping
Your workflow may require developing prototypes for client or stakeholder reviews or for vetting ideas with other designers and Flex developers before reaching the actual development phase of the project. A working prototype can help sell your ideas by showing functional design elements instead of static wireframes and written notations.
Flash Catalyst is an excellent tool for quickly generating a functional prototype without writing any code. Using the built-in wireframe components, the Flash Catalyst drawing tools, and early design comps, you can very quickly build a working model of your application.
)
Extending the application with Flash Builder
If your application needs to retrieve data at runtime from a web server, web service, or third-party API, you can share your Flash Catalyst project file (FXP) with a developer. The developer completes the project using Adobe Flash Builder 4.
Flash Builder (formerly Flex Builder) is the integrated development environment (IDE) for developing cross-platform data-centric RIAs using ActionScript and the Flex framework.
Flash Catalyst and Flash Builder are designed to work together. The applications you create using Flash Catalyst are Flex applications. The entire time you’re designing artwork, building components, adding interactions, and creating smooth transitions, Flash Catalyst is writing MXML code for you automatically. A Flex developer can open your Flash Catalyst projects in Flash Builder and pick up right where you left off. For example, you can create a Data List component in Flash Catalyst and use design-time data to define the appearance and behavior of the list. Then, have your developer bind the component to a data source using Flash Builder. When the application runs, your data list includes every record in the data source. The data is kept separate from the application, so the data can change at any time without redesigning or republishing the application. You can also use Flash Catalyst to design data management controls to view, edit, add, and delete records in a database. Flash Catalyst is an excellent tool for designing user input controls, including text input fields, radio buttons, check boxes, and the button used to submit a form. Design your forms using Flash Catalyst and then have your developer add the code to collect, store, and circulate the information by email. These are just a few examples.
Publishing for a variety of audiences
There are a few ways to publish and distribute Flash Catalyst applications. One version includes the necessary files to run the project as a web application. This version includes everything you need to publish the application to a web server for viewing online. A second version is a larger SWF file with all of its assets included and no dependencies. The purpose of this redistributable version is to share it. For example, you can share the file with a client and they’ll have everything they need to view the application locally. There is also an option to build an Adobe AIR application. AIR is a stand-alone desktop application that runs without a web browser or Internet connection. All of these options are built for accessibility to support assistive technologies such as screen readers. This improves the user experience and makes projects readily apparent and easily navigable for visually impaired users. If the project requires additional development, such as binding component to a data source or web service, simply save the project file (FXP). This file can be imported into Flash Builder by a developer who will finish and publish the application.
)
Conclusion
Using Flash Catalyst, designers share ideas by demonstrating functional designs rather than static screens, and work more efficiently when collaborating with developers to build rich Internet applications. This empowers designers to have complete control over both the visual and interaction design, allowing each person to focus on their core strengths. Designers, design and developers write code without having to learn each other’s skills. Designers can iterate on the design with the clients and stakeholders before a developer gets involved. In many cases, designer can even publish finished applications from within Flash Catalyst. But when further development required, the developer gets to implement precisely what the designer wants because they no longer have to go through the interpretation process, which leads to an overall better application design.