Create expressive interfaces and interactive content without writing code

Adobe Flash Catalyst CS5 software is an approachable new interaction design tool. Transform static artwork from Adobe Photoshop, Illustrator, and Fireworks software into fully interactive projects without writing code, and publish as SWF or Adobe AIR files. Collaborate with developers who use Adobe Flash Builder software, and leverage the expressiveness, reach, and consistency of the Adobe Flash Platform.

New from Adobe, Flash Catalyst is built with the designer in mind, combining an intuitive user interface and toolset that will feel familiar - similar to Photoshop, Illustrator, and Fireworks - with the expressiveness, consistency, and reach of Adobe Flash technology. The result: a feature-rich interaction design tool you can successfully use to publish SWF files without writing code.

Designing and building interactive applications doesnt have to be hard, and with Flash Catalyst, it isnt. Thats because Flash Catalyst uses a simple and intuitive menu-driven interface with easy-to-understand language. As youd expect from a professional Adobe design tool, you always have complete control over the appearance of your artwork, and you publish your interactive content as a SWF file that displays with Adobe Flash Player 10.

Flash Catalyst is developer-friendly, and writes the code for you in the background while you focus just on the task at hand - creating expressive, interactive content. Using the open-source Adobe Flex framework as its underlying structure, Flash Catalyst helps ensure that when you have to hand more complex projects off to a developer, everything is already in place, ready to go.

With Adobe Flash Catalyst CS5, you can:

Use the power of the Adobe Flash Platform to create interactive content. Rapidly create expressive interfaces and interactive content to your exacting design standards. Deliver your creative vision using the reach and consistency of the Adobe Flash Platform. Integrate video, sound effects, and dynamic media easily, and get the look you want quickly and precisely with layout tools and functions. Export projects for the web as finished SWF files or directly to a customer as Adobe AIR files that can run across platforms as desktop applications.

Explore interaction design without writing code. Transform static Photoshop, Illustrator, or Fireworks designs into fully interactive projects without requiring any development or coding skills. Use pages and states to structure your content so you can easily control navigation and interactions, and create and edit smooth animated transitions. You can also design and preview functional data lists without involving a database. With an easy-to-use and approachable interface, Flash Catalyst enables designers to expand their skill set to include interactive projects.

Speed the design and development process. Support for FXG, an XML-based file format, lets you share artwork between Photoshop, Illustrator, Fireworks, Flash Catalyst, and Flash Builder. When a project requires development - for example, a connection to data services - you can hand your Flash Catalyst project over to a developer who can open it directly in Flash Builder, preserving design fidelity and interactions defined by you. In addition, you can share assets and components with developers using Library Packages.

Who uses Flash Catalyst?

Flash Catalyst is an approachable new interaction design tool built for anyone who wants to create expressive interactive content without writing code. Many types of creative professionals and developers can benefit from the features in Flash Catalyst, including:

Interaction designers, who can use Flash Catalyst to transform prototypes from Fireworks, Photoshop, or Illustrator into fully interactive projects without writing code. With the ability to create and edit smooth animated transitions and easily integrate video, sound effects, and dynamic media, they can create user interfaces and digital experiences.

Graphic designers, who can use Flash Catalyst to transform static Photoshop or Illustrator designs into fully interactive projects without writing code. Using intuitive menu-driven functions to define interactions and to create components like buttons and scroll bars, they can create expressive microsites, portfolios, and application interfaces that clearly communicate their intended message.

Web designers, who can use Flash Catalyst to transform prototypes from Fireworks, Photoshop, or Illustrator into fully interactive projects without writing code. Using mock data to define and preview the look and behavior of dynamic data without needing a database, they can create professional microsites, application interfaces, and website navigation elements.

Interactive designers, who can use Flash Catalyst to transform prototypes from Photoshop, Illustrator, or Fireworks into fully interactive projects without writing code. With the ability to create and edit smooth animated transitions and integrate video, sound effects, and dynamic media easily, they can create user interfaces and digital experiences.

Web application developers, who can use Flash Catalyst to work closely with designers and define custom components, interactions, and behaviors. With the ability to open Flash Catalyst project files right in Adobe Flash Builder software, and using SWF and Adobe AIR publishing options, they can develop rich Internet applications that can be delivered virtually anywhere.

Video editors, who can use Flash Catalyst to integrate video content from Adobe Premiere Pro and After Effects into fully interactive projects without writing code. Using intuitive menu-driven functions to incorporate video and audio content and custom playback controls, they can assemble compelling stories, create video presentations, and pitch concepts.

Top features of Adobe Flash Catalyst CS5

Fully customizable components

At the core of content creation with Flash Catalyst are components - the building blocks that you use to create interactive content. These components include things like buttons, scroll bars, sliders, text fields, checkboxes, and data lists, and serve as a way for users to interact with the experience or application that you create. If youre used to laying out print pages by placing objects like text frames, picture frames, rectangles, and so on, youll find working with components in Flash Catalyst is similar.

If buttons or scroll bars dont sound very exciting to you, thats only because these elements are usually taken for granted - they appear virtually the same everywhere you look on the web or inside of dynamic applications. With Flash Catalyst, you have complete control over the appearance, or “skin,” of any component.

Flash Catalyst offers two ways to customize the appearance of components:

• Start with static artwork. Create static design comps in Photoshop, Illustrator, or Fireworks, and use them to create your Flash Catalyst project. Then, select individual elements in your design, and use the Convert Artwork To Component command to transform the static art into fully functional interactive components.
   
• Start with basic components. Flash Catalyst comes with a library of fully functional basic wireframe components that you can simply add onto your page. You can customize these components using the Properties panel in Flash Catalyst, or you can take advantage of roundtrip editing capabilities and edit the components directly in Photoshop or Illustrator. This is perfect for when you want to build and test the interactions first, and then finalize the appearance afterwards.

Powerful layout tools

Designers who are used to having complete control over their designs and layouts will feel right at home with Flash Catalyst, which offers sophisticated interface design features similar to those found in Photoshop, Illustrator, Flash Professional, and Fireworks:

• Toolset and shortcuts. Use familiar selection, transformation, text, shape, and magnification tools that you already know from other Adobe design applications. Keyboard shortcuts are similar as well, reducing the learning curve.
   
• Layers panel. Giving you complete control over your artwork, the Layers panel clearly indicates the structure of imported Photoshop and Illustrator files, and makes it easy to define interactions for the various states of interactive components.
   
• Rulers, grids, and guides. Ensure the accurate placement of objects while designing by using familiar rulers, grids, and positionable custom guides. Objects snap to these elements just as they do in other Adobe design applications. Flash Catalyst features a collection of basic prebuilt components that you can quickly skin to your liking.Interactive components, like this one, can be designed with virtually any appearance.You probably already know how to use many of the tools and keyboard shortcuts in Flash Catalyst - they match those in other Adobe design applications you use.
   
• Properties panel. For any selected object, you can easily adjust size, position, stroke, fill, color, and opacity settings in the Properties panel. You can even add filters like drop shadows, glows, blurs, or even specify transparency blend modes.
   
• Align and Arrange functions. Designers rarely “eyeball it,” and with familiar align and arrange tools, you dont have to - its easy to make sure everything in your design lines up perfectly. Group artwork to organize your designs and to ensure easy selections.

Its obvious that Flash Catalyst was built from the ground up with the designer in mind - a welcome thought for any designer looking to author interactive content.

Roundtrip editing

With Flash Catalyst, you can start a project using static designs or artwork from Photoshop, Illustrator, or Fireworks. In addition, you can integrate just about any JPEG, GIF, or PNG file into your Flash Catalyst project, and then transform it into an interactive component. When youre done, you can send it off to your client or manager for review.

However, rarely do review cycles pass without change requests. With interaction design, seemingly small change requests - such as modifying the appearance of a button or a slider - can be extremely time-consuming, because the design comp is functional. In the past, you would have to start from the beginning by modifying the art in a design application and redefining all of the interactions.

In Flash Catalyst, you can select a design element or component, and edit it in Photoshop CS5 or Illustrator CS5. Upon completion of the changes, the artwork is saved and automatically updated within the Flash Catalyst project. Any interaction or transitions that were applied to that element remain in place, unaffected by the artwork change.

For example, you might want to change the way a button appears when a cursor passes over it, which would require a change to the Over state of the button. You can select the artwork in Flash Catalyst and choose Modify > Edit In Adobe Illustrator CS5 to take advantage of the familiar tools and creative power found in Illustrator. This command sets the following steps in action:

1. Flash Catalyst copies the button component, and also captures a snapshot of the entire page.
    
2. Illustrator opens a new document and places the snapshot, at 20% opacity, on a locked layer. This allows you to see your button in the context of your entire page design.
    
3. The button appears in position in the Illustrator document. The Layers panel reveals that all four states of the button are present in the Illustrator file, each on its own top-level layer.

At this point, you can use the full Illustrator toolset to edit or design any of the states of the button component. Upon completing your edits, you can save the Illustrator file and return to Flash Catalyst. The design changes you made in Illustrator are updated in the button component without disturbing its structure, or any interactions or transitions that you may have already defined for it.

With roundtrip editing, you are free to tweak your designs at any point in the workflow, without losing the interactions you have defined in your project. Its never too late to make a design change to get everything just right with Flash Catalyst.

Flash Catalyst allows you to build an interactive user experience using concepts like pages and states, closely matching an experience that you are already familiar with from traditional print or web design, or when designing DVD/Blu-ray Disc interfaces. The Pages/States panel in Flash Catalyst makes it easy to navigate as you design, and provides a powerful, visual way to see exactly how content will look through different stages of user interaction.

Pages

Just as a brochure or a website may comprise of several pages, an interactive experience or a rich Internet application may take you from one screen to the next. In Flash Catalyst, each of these screens (such as the login screen) is defined as a page. For example, say you are designing a microsite, using layer comps in Photoshop, multiple artboards in Illustrator, or multiple pages in Fireworks to design what each page will look like. When you bring your design into Flash Catalyst, each of those pages still exist, and you can easily define buttons that a user can trigger to move from one page to the next.

States

Components such as buttons or sliders have various states. For example, a button might have four different states, representing its appearance when enabled, disabled, moused over, or clicked on. The Pages/States panel enables precise control over individual components and lets you create unique designs for specific types of interactions such as rollovers and clicks. Smooth animated transitions can easily be applied to objects, and actions can be triggered when a user interacts with the content and moves from page to page or state to state.

Smooth animated transitions

One of the appealing aspects of the Adobe Flash Platform is the expressiveness of the graphics - instead of choppy transitions, artwork moves or changes in appearance gracefully. Designers have traditionally created smooth transitions manually using tweens, or blends between different states of artwork, and a technique called easing, which controls the speed or acceleration of an animation, requiring additional time-consuming steps to achieve the desired look.

Flash Catalyst allows you to create smooth transitions with a single click in the timeline. This enables you to visually edit and create animated transitions between pages or states of components. You can specify the start and duration time in seconds, and quickly preview transitions and action sequences.

With Flash Catalyst, you dont have to manually create tweens or define motion - all of that happens automatically. Just as you define transitions such as fade and rotation in a presentation or movie, you can easily apply actions such as Fade, Move, Resize, Rotate, and Rotate 3D to any interaction in Flash Catalyst. The Smooth Transition function makes these effects all appear to ease in and out with that professional touch.

Flash Catalyst lets you create more engaging content, since transitions can include objects that move and smoothly fade in and out. Ultimately, it extends your creativity by giving you much more control over the user experience - without having to write code or struggle to master complex techniques.

Design-time data

Creating interactive experiences or dynamic applications can present new and unfamiliar challenges for designers. For example, if youre simulating the connection to a database, its difficult to see the end result of a design until its running and connected to a back-end system.

Say you want to create an interactive experience that simulates scrolling through a list of suggested restaurants in a city. Similar to placeholder text or FPO (For Position Only) images in print design, Flash Catalyst allows you to use mock data such as text or images without having to actually connect to a live server. Flash Catalyst uses the term design-time data to refer to this capability. Through an easy-to-use panel, you can enter information into a customizable table, just as easily as you would fill out a table in InDesign or a spreadsheet in Microsoft Excel.

First, you convert any artwork into a component with a variable number of columns and rows of data. Next, you connect a scroll-bar component to the list, allowing users to quickly navigate or scroll through the list items (in this example, restaurants located in a city). Easily add transitions and actions to control the behavior of each item in the list. This enables you to control the look and behavior of the complete user experience even when real data isnt available.

Just as important, using design-time data has additional benefits later in the workflow. A developer using Flash Builder can simply replace the design-time data with real data from a database or web service while maintaining the interactions and pixel-perfect design from Flash Catalyst.

Video and dynamic media

Designers are always looking for a creative edge, and adding video content can be compelling for creating interactive marketing and promotions. For video professionals, creating an online portfolio of their work gives them the ability to acquire more clients.

With Flash Catalyst, you can integrate video, sound effects, and dynamic media as easily as working with static artwork - even scale or position video content as you would an image. Once you place video into a project, standard playback controls are automatically added, or you can turn any piece of artwork into a video control. Flash Catalyst dramatically reduces the time it takes to incorporate sound and video to your projects.

Flash Catalyst can import FLV and F4V files like those exported from Adobe Premiere Pro or After Effects software. You can also use Adobe Media Encoder (included as a separate application) to convert just about any video file for use within Flash Catalyst.

In addition to video, Flash Catalyst can also import SWF files, such as animations, that you or another designer or developer may have created with Flash Professional. Once you have them positioned in your layout, you can specify actions that include Play, Go To Frame And Play, Pause, and Stop, for full control over the playback of the SWF file.

Publish as SWF and AIR files

With Flash Catalyst, you can leverage the reach of the Adobe Flash Platform to deliver content easily across the web and the desktop. Once youve completed your project, you can export it as a finished SWF file that can be viewed with the popular Adobe Flash Player 10 or as an Adobe AIR file that can run across platforms as a desktop application. This makes it easy to deliver a finished project to a customer or to publish on the web, taking advantage of all of the expressiveness, consistency, and reach that Flash Player and AIR provide.

With Flash Catalyst, you can publish accessible content with the following options at the click of a single button:

• Deploy To Web. Publish all necessary support files to upload your content to a web server. Content can run within its own HTML page, or you can integrate it into existing web pages (for example, with Dreamweaver) to play back just like any embedded SWF content.
   
• Run Local. Publish all necessary support files to run your content directly on your desktop. Content can run directly within your web browser.
   
• AIR. Publish a single self-sufficient AIR file that can run directly on the desktop. You can use this option to send a client or a manager a quick preview of the project youve been working on or to deploy your content as a cross-platform desktop application.

Flash Builder integration

Flash Catalyst offers you the ability to design expressive interactive content without writing code. When a project requires development - for example, a connection to data services - you can hand your Flash Catalyst project over to a developer who can open it directly in Flash Builder, preserving design fidelity and interactions that youve defined.

Everything you do in Flash Catalyst - from artwork creation to defining interactivity - is automatically expressed in MXML, the language of the Flex framework, behind the scenes.

Flash Catalyst saves files in the FXP format - the same project file format that Flash Builder uses. This clean separation between the design and the application logic makes it easy for developers and designers to work together in an efficient and productive manner.

Top reasons to buy Adobe Flash Catalyst CS5

Approachable interaction design - Create expressive interfaces and interactive content without writing code. Designers can define behaviors and control sophisticated interactions with simple menu-based commands without requiring any development or coding skills.

Interactive components - Turn static Adobe Photoshop, Illustrator, and Fireworks artwork into interactive components and add interactions that respond to user input. Interfaces and interactive content can appear with a branded look and feel, as the design requires.

Smooth animated transitions - Graphically edit and create animated transitions between pages or states of components. Designers can extend their creativity by creating engaging experiences with objects that move and smoothly fade in and out.

Design-time data - Define and preview the look and behavior of dynamic data quickly and easily. Similar to using placeholder text or images, you can use mock data without having to actually connect to a back-end system.

Video and dynamic media - Integrate video, sound effects, and dynamic media as easily as working with static artwork, and then add interactions to control their playback. Even import SWF files that you can play from a specific frame.

Round-trip editing - Edit artwork in Photoshop or Illustrator at any time while preserving structure and interactions. Reduce the number of steps required to edit artwork with full fidelity by preserving all layers and visibility settings.

Pages and states - Use these building blocks to organize your projects and to control navigation and interactions. Create unique designs for rollovers and behaviors, and visualize exactly how content will appear through different stages of user interaction.

Powerful layout tools - Get the look you want quickly and precisely with sophisticated page layout tools and functions. Rulers, grids, and guides provide accurate placement of objects while object arrangement tools perform grouping and alignment.

SWF and Adobe AIR export - Export projects to the web as a finished SWF file that leverages the ubiquity, expressiveness, and reach of Adobe Flash Player 10 software, or directly to a customer as an Adobe AIR file that can run outside of the browser.

Adobe Flash Builder integration - Open Flash Catalyst projects with Adobe Flash Builder (formerly Adobe Flex Builder) software, making it easy to add connections to a database or web services while preserving the visual and interaction design defined by designers. Both Flash Catalyst and Flash Builder leverage the open source Flex framework, enabling designers to hand off projects directly to developers in a usable format.

System Requirements:

Windows

• Intel Pentium 4 or AMD Athlon 64 processor
• Microsoft Windows XP with Service Pack 2; Windows Vista Home Premium, Business, Ultimate, or Enterprise with Service Pack 1; or Windows 7
• 1GB of RAM (2GB recommended)
• 1GB of available hard-disk space for installation; additional free space required during installation (cannot install on removable flash-based storage devices)
• 1024x768 display (1280x800 recommended) with 16-bit video card
• DVD-ROM drive
• Java Runtime Environment 1.5 (32 bit) or 1.6
• Broadband Internet connection required for online services

Mac OS

• Intel processor
• Mac OS X v10.5.7 or v10.6
• 1GB of RAM (2GB recommended)
• 1GB of available hard-disk space for installation; additional free space required during installation (cannot install on a volume that uses a case-sensitive file system or on removable flash-based storage devices)
• 1024x768 display (1280x800 recommended) with 16-bit video card
• DVD-ROM drive
• Java Runtime Environment 1.5 or 1.6
• Broadband Internet connection required for online services