Adobe Flash CS4 has been radically redesigned and restructured. With CS4, Flash has finally turned the corner from a code-based authoring tool with an interactive animation element, to a designer-friendly space for illustrators to intuitively draw animation. Yes, draw animation—by shaping the path of an illustration the same way an artist would draw a vector path in Adobe Illustrator. With its revamped animation logic, and substantial new animation tools, Flash has now evolved into a much more accessible environment for designers who are comfortable with Adobe design workhorse applications like Illustrator, Photoshop ( ), and InDesign ( ).

The new Flash identity is immediately apparent in its new default layout. The stage—Flash’s design surface—has been moved from the bottom to the top of the window, with the formerly dominant Timeline now dispatched to the bottom of the screen. The change is both functional and symbolic. Underlying the new look is a new logic and model for generating animation.

Intuitive animation tools

Central to the transformation of Flash is the emergence of object-based animation. This means that animation properties are now assigned to, and edited as graphic objects, rather than residing in the movie frame that hosts the object. The change is profound—since the emergence of Flash from the Shockwave evolutionary tree, generating and editing animation has been rooted in defining frames (and in particular, pivotal frames called keyframes) in the Timeline, and enhancing them with ActionScripts. Now, a designer can create a complex animation without even knowing what a frame or a keyframe is. Flash CS4 does not do away with the Timeline, frames, keyframes, and scripting. But these elements are now submerged beneath new intuitive and accessible tools.

An analogy to Dreamweaver is helpful here: You can create complex HTML Web pages, and use pre-built Spry tools to create interactive elements without writing or even needing to know HTML, JavaScript, or CSS coding.

The heart and soul of Flash—and this is more so in CS4—is moving animation (motion tweens). To create this kind of animation in Flash CS4, you no longer start by defining starting and ending frames, and inserting keyframes where the animation changes direction. Instead, you simply draw on the stage, as if you were designing an illustration on the Illustrator artboard. When you Control-click on any object, the contextual menu allows you to generate a motion, or a shape tween (animation). And Flash automatically converts your object to a ready-to-animate symbol. You then drag the object on the stage to generate an animation path. The resulting animation path can be edited on the stage like any vector path.

To return to the Dreamweaver analogy—the frames, keyframes, and ActionScript coding generated as you create an animation on the stage in Flash CS4 are all still editable the old-fashioned way, so users who are comfortable with these modes of defining and editing animation can still use them, with no loss of functionality, from previous versions of Flash.

Illustrator influence

The Flash interface now so resembles that of Illustrator that I find myself sometimes referring to the stage as the artboard—Illustrator's terminology for a drawing area. Like Illustrator or Photoshop, Flash CS4 allows you to isolate an object by showing and hiding layers. As was the case with Flash CS3, when you copy and paste Illustrator layer objects, the layers import along with the artwork. Similarly, Illustrator symbols import automatically as easily animated movie clips. And the Flash tool set now more closely matches the tools in Illustrator and Photoshop.

Newly designed, CS4-themed expandable panels, and the default vertical Property inspector make good use of the space on wider monitors in today’s work environments. Building on, and launching from this reconceptualization of animation, Flash CS4 provides a set of additional tools that have both immediate implications for animators, and give a hint of things to come. The feature with the greatest impact might be the 3D Rotation tool. The inner and outer rotation circles provide about as intuitive access to 3-D rotation as 3-D gets—no scripting or digital input required.

Flash CS4 provides access to complex, not particularly intuitive, but powerful motion controls with the new Motion Editor (appearing as a tab in the Timeline panel), which provides a control set and environment similar to After Effects. With Flash CS4, non-coders can not only generate complex animations, they access a set of motion presets that can be used to quickly apply common animation sequences (like a bouncing ball, a fly-in object, or pulsing) to objects. And custom motion presets can be defined and reused—again without any scripting.

Bone structure

Along with object-based animation and interactive 3-D transformations, the coolest new feature in Flash CS4 might be the Bone Tool, which uses Inverse-Kinematics (IK) to generate animation resembling a moving human body (with a bone structure). The Bone Tool is easier to use than to describe—you trace to define animation linkages within an object to create “flowing” transformations — again, the image of a human body in motion helps convey the concept.

IK animation, formerly the exclusive province of advanced ActionScript coders, is generated with the Bone Tool, but beyond that, the new Bind Tool provides even more detailed control—revealing and controlling “joints” within an IK object for fine tuning IK animations.

As implied earlier, professional Flash animators will not be tossing their volumes of ActionScript coding references into the recycling bin. The keyframe and ActionScript undergirdings of Flash remain, but they are generated by interactive on-stage object manipulation with tools and panels. Programmers more comfortable with a coding approach to animation can still write ActionScript, but the enhancements in Flash CS4 are in design, not scripting (Flash’s ActionScript was bulked up in CS3 with ActionScript 3).

I wasn’t knocked out by Flash’s new Deco Tool, but my standards are probably unfair. The closer Flash gets to implementing support for Illustrator drawing tools and effects, the more expectations I have. Flash is still not in Illustrator’s league as an illustration program, and doesn’t need to be. But that leads us to the edges of the frontier in the new Flash, and why illustrators won’t want to toss their copies of Adobe Illustrator just yet. The limits on Flash’s ability to apply vector effects are expressed in the new Deco Tool, which creates a very limited set of Illustrator-type fills for objects. The limited set of Flash effects is mainly due, at this stage, to the constraints imposed by Flash movies having to play on the Web (or in other digital environments) in the Flash Player.

The Flash Player is ubiquitous (with one major exception I’ll return to in a moment). But it also defines what effects can (and cannot) be applied in Flash. You can take any vector illustration from Illustrator and copy it into Flash with no loss in appearance. But the ability to apply complex sets of effects while retaining and not changing the foundational vector paths in an object is supported in only a limited way in Flash because even Flash Player 10 has very limited support for such effects. The dominance of Flash as a tool for designing animation and interactivity is, of course, integrally linked with the ubiquity of the Flash Player—nearly all modern computers support some version of it. YouTube, and other online video portals, rely on the FLV format—a packaging of Flash-produced video, for high-quality, small-file size, quick downloading streaming video.

The current hurdle for Flash developers (and the vast audience for online video) is that—at the moment —Apple’s iPhone ( ) and iPod Touch ( ) still do not support any version of the Flash Player (when you watch a YouTube video on your iPhone, YouTube identifies that your device does not support Flash and routes you to a restricted set of lower-quality videos in non-Flash formats). This means that for now, Flash animations must still be exported to non-vector formats before they can be viewed on iPhones. 

Beyond the big, strategic changes, Flash CS4 has other, less dramatic innovations. One is that all values in settings boxes are “hot text”—you can click and drag over a number to change a value, and even use those boxes as a calculator (for example, you can enter 800-365 in the X position box for an object to place it 365 pixels to the left of the 800 pixel position).

Workflow flexibility

Other innovations in Flash CS4 have intriguing workflow implications. You can use the new XFL format to import InDesign publications and After Effects ( ) video. Bringing an InDesign publication directly into Flash opens the door to the simultaneous generation of print and digital-interactive versions of publications. Flash CS4 ships with the Adobe Media Encoder, formerly known as the Flash Video Encoder, and it now supports the H.264 video codec. The Media Encoder has been completely redesigned and it supports a wide spectrum of popular video formats (including MPEG and QuickTime), reflecting and consolidating the dominance of the FLV format for online video (again, with the missing link of support on iPhones).

Macworld’s buying advice

Graphic designers and illustrators will find in Flash CS4 Professional the environment and interface they have longed for—one that provides access to complex animation generation without needing to define keyframes or write ActionScript. And even animators who have grown comfortable with ActionScripting will find new 3-D animation tools and other improvements impressive time-savers over writing all the required code by hand. Definitely worth the upgrade price for most Flash developers, Flash CS4 might well come at the right moment for folks who have been intimidated by Flash’s dependence on scripting to jump in the pool.

[David Karlins is the author of Enhancing a Dreamweaver CS3 Web Site with Flash Video: Visual QuickProject Guide [Peachpit, 2008], Dreamweaver CS4 How-Tos: 100 Essential Techniques (Adobe Press, 2008), and Illustrator CS4 How-Tos: 100 Essential Techniques (Adobe Press, 2008).]