by Doug Winnie
For the past ten years, I've been involved with Adobe Flash in various ways: as a designer, UI team manager, and multimedia instructor. Now as group product manager for workflow at Adobe Systems, I work with all the Creative Suite product teams, including Flash, Thermo, Dreamweaver, and Fireworks, to identify and maximize workflow efficiencies within and across Adobe products and technologies.
In this article, I explore some of the biggest features of Flash CS4 Professional and show you how they can improve your workflow.
Animating objects on the stage with the timeline has been the cornerstone of Flash since it was first created. However, the way you interact with the timeline and build animations hasn't changed much over the years. As animated content and the Flash community matured, the original Flash model wasn't adapting well. With Flash CS4, the limitations of the old model have been eliminated. The new version now supports highly iterative animation workflows that give motion designers much greater capabilities and enhanced flexibility.
The first giant step forward is the adoption of a new object-based animation model. Now in Flash CS4, each object animates on its own layer and automatically converts to a symbol, which puts the focus on the animation instead of on the file structure.
Through the new animation model, the workflow is easy: Simply select the frame you want your object to end up on and move the object to its desired location. You can easily change the animation later as well. Just move the object on the stage, and the animation automatically updates. The same flexibility extends to the duration of the animation. You can click and drag the end of the frame tween in the timeline to make it longer or shorter — no more manual frame insertion. In addition, all animations automatically use motion paths, which can be dragged, resized, repositioned, rotated, transformed, or adjusted just like any object on the stage.
Figure 1. CS4 Tween span
Figure 2. Motion path
Changing or animating individual attributes discretely in intricate animations that combine filters, color effects, and eases has also been challenging. New in Flash CS4 is the Motion Editor, an advanced animation panel that gives you unlimited power to create and refine the exact animation you want with per-attribute accuracy and editability. Inspired by Adobe After Effects, the Motion Editor panel animates individual attributes on a per-instance level. Add custom easing to attributes independently, and through a click-and-drag interface, add Bezier curve animation paths that are iteratively adaptable as your animation needs change.
Figure 3. Motion editor
Flash CS4 now adds animation of 2D objects within 3D space, entirely within the application — no code required. Flash offers two ways to create 3D animation. The first is 3D rotation. This takes the object and rotates it on the x, y, and z axis while keeping the object stationary on the x, y, and z planes. 3D translation does the reverse by keeping the object rotation fixed but physically moving the object along the x, y, and z planes.
Figure 4. 3D rotation
Flash separates these models through individual tools, which you can toggle between using the keyboard shortcuts. Using the rotation and translation controls, you can animate any object in Flash on all three axes and planes, which tie in directly with the object-based animation model and are exposed in the Motion Editor after you first create your 3D animation.
Many times, I have worked long and hard to create the perfect animation for a project. The problem was keeping that animation consistent with animations created by other motion designers for the same project, or ensuring the animation would be reusable in future projects. When collaborating on a project, sharing animations is often difficult. But with Flash CS4, you can now share animations consistently using motion presets.
Figure 5. Motion presets
Flash CS4 comes with more than a dozen animations that can be added to any object through a simple panel. By selecting the object, you can apply any motion preset to it through the Motion Preset panel — just click Apply.
To share and distribute custom animations, complete with 3D rotation, translation, filters, and color effects, create a preset, and export it. This XML file can then be easily imported to the Motion Preset panel and instantly applied to guarantee that animations look and feel consistent across projects or creators.
Some animations need to limit mobility and animation parameters. Objects such as characters, animals, or mechanical gadgets have skeletons or limbs that restrict certain types of movement. Flash CS4 can easily add this type of structure, or virtual bones, to your animation subject in one of two ways. You can connect individual objects together as segments of limbs. Or you can give structure to a single existing object.
Using the Bones tool, you can add skeletal connections between objects using drag and drop. On a per-joint basis, you can customize rotation and translation parameters to limit certain types of motion using the Property Inspector. For instance, you can specify that a forearm can move up toward the shoulder, but it can't bend backward. Translation provides elastic animations where objects can be pulled apart, and the skeletal system is the glue that keeps them together.
Figure 6. Bones tool
Before coming to Adobe, I worked with lots of different designers who relied on Adobe InDesign or After Effects to create layouts, documents, and motion graphics for projects. When they would first ask me to publish their work on the web, I would always tell them that their designs needed to be converted because I didn't have InDesign or After Effects installed. They were often understandably frustrated that there wasn't an easy way to push their work to Flash. Well now Flash CS4 has a workflow that works for both sides. Flash CS4 introduces the XFL file format, a publishing format for InDesign and After Effects that is natively Flash.
Using InDesign, visual designers can create the layout they want in their online experience and export it using XFL. This XFL file is loaded by Flash, and InDesign pages and After Effects sequences are rendered as individual frames. Images, objects, and text are all preserved with editability. Combined with Motion Presets and the new animation model, Flash CS4 easily gives InDesign documents and After Effects compositions added expressiveness with motion and interactivity.
These are just a few of the new features in Flash CS4 Professional. Integration among the products in Creative Suite is now tighter than ever. I am excited about this release. We have made the designer-developer workflow faster and more approachable. And above all, Creative Suite 4 and Flash CS4 continue to provide innovative tools that make your content and interactive experiences stand out.
For more information about workflow experiences, visit my blog. I will also be talking about Flash CS4 at MAX 2008 in San Francisco, California, and Milan, Italy. If you're at the show, stop by and say hello.
Doug Winnie is a principal product manager at Adobe focusing in interactive design for HTML5 and the Flash Platform. Doug has worked in the web and interactive industry for over ten years focusing on front-end web design and development. During his time at Adobe, Doug has lead numerous teams to make web and interactive design workflows more efficient and powerful leading the Flash Catalyst, Fireworks, and Dreamweaver teams.