Adobe LiveMotion 1

Adobe LiveMotion 1

Got something to say?

Share your comments on this topic with other web professionals

In: Reviews > Product Reviews

By Jesse Nieminen

Published on April /files/includes/10.css, 2000

Adobe LiveMotion 1 Adobe has introduced LiveMotion 1, a web animation tool that produces SWF format (Flash) movies and offers an authoring environment similar to After Effects. LiveMotion offers plenty of good features and the familiar Adobe interface, but there are some limitations that are important to consider if you’re a newcomer to web animation.


LiveMotion’s interface is probably its strongest point. The toolbars and tabbed palettes are staples of the Adobe “experience,” and put the most important functions in easily-accessible places. One thing that makes me scratch my head a bit, though, is the handling of colors. Rather than the standard palette of color swatches, there is a somewhat-confusing “color schemes” palette that’s supposed to “help you create attractive color combinations.” This is the kind of “for dummies” feature that I would like to turn off. Just give me the same palettes I use in Photoshop and Illustrator, please (I wouldn’t want that color theory course I took in college, to go to waste). Unfortunately there’s no interface for providing hexidecimal values for colors, so it’s up to you to keep track of RGB values if you’re doing image editing outside the program (not to mention setting up the html stage for your movie).

Timelines and objects

Borrowing heavily from the After Effects model, the timeline is smart and intuitive, and the main reason one would be likely to choose LiveMotion over Flash. Instead of the Flash authoring tool’s model-employing layers with frames-LiveMotion uses an object-based timeline. This means that any part of the animation can be changed easily and in a non-destructive manner, as many times as you want.

Click to see more detail

Since the timeline works like a video-editing environment, it is easy to create and experiment without getting bogged down frame counts and other trivia. Clickable arrows on the timeline next to the objects reveal object attributes that can be modified, which is convenient. It also makes it easy to figure out what an object is doing, at any point on the timeline. If you’re as absent-minded as I am, this is a wonderful feature.

Since the animation is object-based, LiveMotion automatically generates keyframes in your composition and “tweens” the changes from one to the next. All you have to do is establish the first keypoint, and any changes made to an object attribute over the timeline will cause new keypoints to be generated. Modifying keypoints is as simple as selecting them and dragging them. Because each object attribute has a separate line in the timeline window, it is easy to keep track of what’s going on.

Creating, importing, and manipulating images

Image creation in LiveMotion makes use of familiar vector pen and shape tools; it’s relatively easy to draw and apply transformations to what you’ve drawn. Pathfinder functions let you perform complex additive/subtractive functions on vector shapes, in a manner similar to Illustrator. Point editing is a smooth affair, and the transform tool gets high marks for saving time. It doesn’t make sense, though, that some functions aren’t more similar to Illustrator or ImageReady. For example, it doesn’t appear that you can select both a fill and stroke for a shape. Further, it would be easier to edit type without the annoying dialog box that appears. Neither Flash nor LiveMotion is up to acceptable speed in terms of creating imagery, so we can expect to import image files from other apps for some time yet.

Once you’re actually ready to import your images into your animation, LiveMotion offers some nice features. The nicest is that transformations applied to an image won’t alter the original, so you don’t have to worry about backing up your image files or reverting to the most recent save.

Object layersAs I mentioned before, most of the useful tools are available as tabbed palettes, and this includes several image transformation tools. The “Object layers” palette allows the user to add layers to an object and apply different effects to each layer to build up for cumulative effects. The “distort” controls offer some interesting bitmap distortions like “Twirl” and “Quantize,” but these tend to inflate file size and reduce playing efficiency. Opacity and gradient palettes are also at hand, and easy to use. One interesting palette is “Layer,” which makes available minor adjustments like x-offset, width, and softness. Overall, it’s easy to experiment with transformations and effects. The “Textures” and “Styles” palettes do offer some interesting features, but will produce mediocre results if a user limits themselves to the garish presets. Several Photoshop filters are also available for use on bitmap images, but I haven’t found much use for these within LiveMotion.


LiveMotion can handle several different sound formats, including WAV, AIFF and MP3. Sounds can be used as background soundtracks and event signifiers (both movie- and user-generated). Clips are nicely organized in the sound palette, and things like volume changes and stereo panning are controlled in the timeline just like image attributes, which creates the potential for some cool time-based sound effects. However, one thing that evaded me was how to loop a backing soundtrack, which should be pretty easy but isn’t. The best I could figure out was how to make it loop with a gap of silence at the end of every run through the clip. In future versions I hope to see enhanced stereo channel controls, more sound attributes to control/transform, and maybe even some simple filters. I think they could introduce enough sound-handling features to make most web-developers happy, without bloating the application too much.

Production features

Another great time-saving feature is “Live Preview.” Using the simple VCR-like controls on the timeline window to preview the animation within LiveMotion helps you quickly make adjustments without constantly having to travel outside the program to a player or browser to see what happens every time. Previewing in a web browser is easy when testing-time comes, accessible through a menu or keyboard shortcut. Choosing the browser preview also generates an easy-to-follow export report to help you streamline the file. In this report you’ll notice that LiveMotion does actually generate frames, but only on the back-end where you don’t have to worry about them.

LiveMotion exports in a variety of static and animated formats, and can even generate an HTML table where each cell contains different formats. While the flexibility is nice, it’s quite obvious that the SWF files will be the most important; I personally found my test animations nice and quick, playing very efficiently.

While SWF files from either Flash or LiveMotion can be called up by movies created in either program, you cannot edit a LiveMotion source file in Flash, or vice-versa. File sizes in some cases are smaller than similar Flash ouput. I did notice some bugs: bitmap images sometimes display jagged output, and there’s a color problem that causes rectangles to appear around some objects that should have transparent backgrounds. There is also an issue with some colors that fail to display properly, which can be a problem when you assume that web-safe really means web-safe.

Despite the minor glitches, I’m pleased with the files LiveMotion generates and had an easy time working with them.

Interactivity and behaviors

There is a price to pay (at least with this early version) for the ease of use, and this will also be a deciding factor for a lot of web designers when choosing between LiveMotion and Flash. While LiveMotion does have a behaviors dialog that introduces simple actions like loading/unloading movies, stop/play, and calling JavaScript, there is no way to create the complex interactive functions that can be created with Flash and ActionScript. This means you won’t be able to pull off Praystation-caliber tricks with LiveMotion just yet. I imagine that the engineers at Adobe are trying to beef up the behavior functions, but it’s got to be tough. For this reason, designers that need the complex programming abilities of Flash will have to stick with Flash.

This is not to say that LiveMotion is not a tool worthy of consideration. Those designers who want powerful SWF format animation and don’t need scripting may want to consider LiveMotion over Flash, because of its inherently easy interface and animation method. I found it very easy to learn myself, and was able to produce an impressive animation within five minutes. I also taught a friend how to use it very quickly over the phone, which would be impossible for me to do with Flash. Video designers looking to jump into web animation will find the transition to LiveMotion very smooth, if they’ve ever used After Effects. The authoring envirnonment of the two is nearly identical.

While it’s hard to predict the impact that LiveMotion will have on sales of the Flash authoring tool, the entry of LiveMotion is sure to foster the competition and innovation that has turned ImageReady and Fireworks into such outstanding products.

Personally, I use both LiveMotion and Flash. For quick animations I prefer LiveMotion because it’s the friendlier environment for that type of work. It’s not clear if Adobe plans to fully develop the application to compete with Flash on the programming end of things, but it’s definitely something I would like to see. I think LiveMotion 1 is a great start, and with the current $99 special they have running for owners of other Adobe or Macromedia programs, it’s an inexpensive way to get introduced to vector-based web animation, if you haven’t tried it before.

Adobe® LiveMotion™ 1
Full version $299
special offer $99

Related Topics: Motion Graphics