Adobe Flash Catalyst CS5 Student and Teacher Edition
Adobe Flash Catalyst CS5 software is an approachable new interaction design tool. Use it to transform Adobe Photoshop, Illustrator, and Fireworks artwork into expressive interfaces and fully interactive content without writing code, and publish as SWF or Adobe AIR files. Collaborate with developers who can open your project files with Adobe Flash Builder software to extend functionality, and leverage the reach and consistency of the Adobe Flash Platform.
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 you're used to laying out print pages by placing objects like text frames, picture frames, rectangles, and so on, you'll find working with components in Flash Catalyst is similar.
If buttons or scroll bars don't sound very exciting to you, that's 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.
- 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 don't have to--it's easy to make sure everything in your design lines up perfectly. Group artwork to organize your designs and to ensure easy selections.
It's 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.
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 you're 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:
- Flash Catalyst copies the button component, and also captures a snapshot of the entire page.
- 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.
- 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. It's never too late to make a design change to get everything just right with Flash Catalyst.
Pages and states
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.
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.
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 don't 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.
Creating interactive experiences or dynamic applications can present new and unfamiliar challenges for designers. For example, if you're simulating the connection to a database, it's difficult to see the end result of a design until it's 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 isn't 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 you've 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 you've been working on or to deploy your content as a cross-platform desktop application.
- 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