Adobe Creative Suite 5 Design Premium Part 3

Extend the reach of your designs without writing code

When designers collaborate with developers to produce interactive content, they sometimes have to compromise their creative vision. With CS5 Design Premium, designers can work on interactive content and media-rich projects themselves using familiar tools, skills, and design processes—and without touching a line of code. Here are just two ways you can design and deliver your work in digital media using skills you already have:

• Craft interactive content that adds depth and impact to web pages, create artwork in Photoshop or Illustrator, and then use new Flash Catalyst to define interactions for elements such as buttons, sliders, and scroll bars. When you’re finished, export the interactive content as a SWF file. With Flash Catalyst, you can also design user interface elements for websites or applications and even create Adobe AIR applications that run from the desktop.

• Optimize a print layout for onscreen delivery, simply open the layout in InDesign and use new panels to add interactivity, animation, video, and/or sound.

Now you can take your designs in exciting new directions and maintain design control without becoming a programmer.

Interactive content with Flash Catalyst CS5

New from Adobe and built specifically for designers, Flash Catalyst enables you to create interactive content without writing code. With Flash Catalyst, you can take advantage of the expressiveness of Flash technology and the ubiquity of Flash Player to deliver compelling interactivity, video, and audio to computers around the world.


Transform artwork created in Photoshop, Illustrator, or Fireworks into high-quality interactive content that can liven up your web pages or make complex information engaging and easier to understand. Design simple projects, such as an interactive portfolio site or product brochure, that you can complete yourself in SWF format. Or tackle more complex projects such as a user interface for a web application built in collaboration with a developer. While you design visually in the foreground, Flash Catalyst generates Adobe Flex code in the background.

Begin by importing a design comp created in Photoshop, Illustrator, or Fireworks into your Flash Catalyst project. Use easy-to-understand menu commands to convert individual elements into functional interactive components such as buttons, sliders, and scroll bars. When you’re finished polishing your interactive content, you can add it to web pages, embed it in a PDF file, or run it as a self-contained Adobe AIR application directly on the desktop.

In Flash Catalyst, simply select objects created in Photoshop, Illustrator, or Fireworks and indicate the interactive function you want it to have. For example, draw scroll bar parts in Illustrator and use menus in Flash Catalyst to assign scroll bar functions to the parts.

In Flash Catalyst, simply select objects created in Photoshop, Illustrator, or Fireworks and indicate the interactive function you want it to have. For example, draw scroll bar parts in Illustrator and use menus in Flash Catalyst to assign scroll bar functions to the parts.

Dynamic digital documents in InDesign CS5

Engage and inform readers and clients with documents and presentations that integrate interactivity, animation, sound, and video. Help reduce costs by creating interactivity directly in InDesign.

New intuitive panels help you add rich media to page layouts:

Animation panel. Apply the same motion presets included in Flash Professional CS5, or add your own custom presets to InDesign to instantly animate objects on the page without writing code. Options in the Animation panel let you specify duration, speed, rotation, scale, and opacity. Quickly edit a motion path using the Pen tool, and convert any path—even one you import from Illustrator—into a custom motion path with the click of a button.

Object States panel. Create multi-state objects that indicate which button is selected, display images in a slide show, or show versions of text in different languages. Multi-state objects are page items that have multiple appearances. Object states can be images, text frames, or any other objects or groups you want to display when someone clicks or rolls over an interactive button while viewing an interactive document. For example, you might create a multi-state object that consists of multiple images to create a click-through slide show; when the viewer clicks a button, the next image appears.

In InDesign CS5, manage states in the Object States panel. You can rearrange states to change the order in which they appear.

In InDesign CS5, manage states in the Object States panel. You can rearrange states to change the order in which they appear.

You can preview motion presets in the Animation panel in InDesign CS5.The butterfly proxy demonstrates the effect. Use the Pen tool to edit any motion path—even one created by a motion preset.

You can preview motion presets in the Animation panel in InDesign CS5.The butterfly proxy demonstrates the effect. Use the Pen tool to edit any motion path—even one created by a motion preset.

Timing panel. Control animation timing and playback without having to use a timeline to add keyframes or create motion tweens. Use the Timing panel to determine when objects such as bullet points in a presentation or images on a page should animate in the interactive document. For example, animations can be triggered to play when the page loads, when the page is clicked, or when a button is clicked. Loop the animation or play it a specific number of times. Link objects to animate simultaneously with the same or different durations.

The Timing panel in InDesign CS5 provides an intuitive way to control when animations begin to play and how many times they repeat.

The Timing panel in InDesign CS5 provides an intuitive way to control when animations begin to play and how many times they repeat.

Media panel. Preview and scrub through placed video files without leaving InDesign. You can select a frame from the video sequence to represent the video in your InDesign document before the video plays, and even create navigation points that determine which parts of the video play when you click a button or otherwise trigger an action.

Entice viewers to watch an embedded video by selecting a frame to represent it on an InDesign CS5 layout.

Entice viewers to watch an embedded video by selecting a frame to represent it on an InDesign CS5 layout.

Preview panel. Take animations, buttons, and other interactive elements for a test drive without leaving InDesign. You no longer have to reexport your content every time you edit rich media elements—interactivity, animation, video, or sound—just to see how the change affects the document. Instead, preview and test a selection, the page, or the entire document before you export your final SWF file.

Superior text layout and typography in Flash Professional CS5

Designers have come to expect rich typographic control in applications like InDesign and Illustrator. However, it’s been extremely difficult or even impossible to set professional-level typography on the web—until now. With the Text Layout Framework support in Flash Professional CS5, designers can take advantage of rich typographical controls, including:

•    Advanced text styling such as kerning, ligatures, tracking, leading, superscript, subscript, discretionary hyphens, margins, hypertext, baseline shift, typographic case, digit case (oldstyle/lining figures), and digit width (proportional/tabular figures).

•    Advanced text-layout controls including threaded text blocks; the selection, editing, and flowing of text across multiple columns; linked images; text wrap; and inline images (supporting PNG, JPEG, SWF, or any Flash Player DisplayObject). Tab stops and CSS anti-aliasing are also supported.

Top features in Flash

Professional CS5

•    Newtext engine

•    Abilityto distribute content virtually anywhere

•    XML-based FLA source files

•    Code Snippets panel

•    Enhanced ActionScript editor

•    Improved Creative Suite integration

•    Flash Builder integration

•    Spring for Bones

•    Video improvements

•    New Deco drawing tools

With the new text engine in Flash Professional CS5, you can take advantage of rich typographical controls, including threaded and multi-column text.

With the new text engine in Flash Professional CS5, you can take advantage of rich typographical controls, including threaded and multi-column text.

Next post:

Previous post: