For better or worse, the Web has become an animated place. From buttons that mutate when you point at them to elaborate Macromedia Flash-based interfaces with pulsating soundtracks, motion and eye candy are all the rage.
LiveMotion 1.0 is Adobe’s newest eye-candy factory, and it’s a great place to make motion. The program has received a great deal of attention because it’s the first non-Macromedia animation product to support the Flash (SWF) file format, letting you create Flash projects without having to buy (and learn) Flash 4 (see Reviews, October 1999). Some people have even dubbed LiveMotion a “Flash killer,” but Flash need not seek police protection just yet. LiveMotion can’t match Flash 4’s advanced authoring features, and it lacks Flash’s vast constellation of third-party developer resources.
But what LiveMotion lacks in Flashiness, it makes up for in versatility and ease of use. You can create simple rollovers, GIF animations, and interactive Flash projects, all within an efficient interface that’s easier to learn than Flash 4’s.
LiveMotion will feel familiar to users of Photoshop, Illustrator, the now-defunct ImageStyler, or After Effects. It often feels like a hybrid of these programs, and it’s this happy amalgam that makes LiveMotion so versatile–and, for some projects, preferable to Flash 4.
In the bitmap realm, LiveMotion supports Photoshop filters and lets you apply them nondestructively– that is, you can remove a filter’s effect and apply a different one without reimporting the original image. You can also crop and skew imported images and tweak their brightness, contrast, and saturation–conveniences Flash 4 doesn’t offer. And you can import Photoshop documents into LiveMotion and retain their layers; should you need to edit the original image, LiveMotion’s Edit Original command launches Photoshop and opens the document. Save your changes, and they’re updated in the LiveMotion project.
As for vectors, Illustrator users will be right at home with LiveMotion’s pen tool. LiveMotion also imports Illustrator documents, and its Edit Original command works with Illustrator as well as Photoshop.
But LiveMotion’s text features fall short of Flash 4’s. Unlike Flash, LiveMotion can’t create forms with text fields, nor does it support multiple-line text blocks. And like Photoshop 5.5, LiveMotion makes you type and edit text in a separate dialog box rather than directly on your layout–so very 1990s.
A strong resemblance to After Effects makes LiveMotion a great choice for video motion-graphics designers who are moving onto the Web. More important, LiveMotion’s approach to animation is often more flexible than Flash’s. In Flash, you create and position keyframes at specific frames in the timeline window. This scheme works well–until you decide to change the frame rate at which your project plays back. If you do, you’ll need to manually readjust keyframes to match the new frame rate.
In LiveMotion, keyframes are assigned not to specific frames but to points in time. In a 12-frame-per-second animation, for example, instead of creating a keyframe at frame number 24 (as you would in Flash), you create it at the 2-second point. This makes animation easier, and you don’t have to reposition keyframes if you change a project’s frame rate. Indeed, you can export the same project with several different frame rates to assess the smoothness of animation at each rate or to create low- and high-bandwidth versions. You can also loop animations and nest them so that one animation plays within another. Alas, a bug prevents sounds from looping seamlessly.
As with After Effects, you design projects in the Composition window with rulers and snap-to guides. You can zoom in for detail work, but unlike After Effects (and Flash 4), LiveMotion doesn’t let you zoom out to magnification scales smaller than actual size. This can make it cumbersome to position elements outside of the composition’s area.
LiveMotion lets you save an element’s attributes as a style that you can apply to other elements–handy for creating the most common Web interface glitz, the rollover. You can create mouse-over, mouse-down, and other rollover states with just a few clicks, and you can use styles to apply your designs to other buttons.
For more-advanced interactivity, LiveMotion provides behaviors–instructions that execute when a user clicks on an element or when an animation reaches a certain point in the timeline. By assigning behaviors to elements, you can specify various forms of interactivity: going to a Web page when a button is clicked on, stopping or starting Flash movie playback, and more.
Time for LiveMotion
LiveMotion’s After Effects-like timeline window (bottom of screen) makes creating animations easy.
Behaviors in LiveMotion are simi-lar to actions in Flash 4. But LiveMotion lacks a scripting language, and this makes the program inferior to Flash 4 for creating advanced Flash projects.
Exporting and Making HTML
LiveMotion does a fine job of creating basic HTML for rollovers, image maps, and embedded Flash projects. It also has a slick batch-replace feature that makes it easy to add LiveMotion-generated elements to existing HTML pages. Similar to its counterpart in ImageStyler, the Batch Replace HTML command searches for HTML elements and then replaces them with LiveMotion-generated elements.
LiveMotion also lacks Flash 4’s advanced performance-tuning options. LiveMotion’s export reports provide some information on download times, but LiveMotion has no equivalent to Flash’s Bandwidth Profiler, which gives detailed information on how well a project will download at various connection speeds.
September 2000 www.macworld.com