box coverAdobe LiveMotion 1.0.2

"A Great Web Design Solution for
Creating Interactive Animation and Graphics"

Click on a thumbnail to enlarge it. Use your browser's "BACK" button to return to this review when done.
     
type of product

LiveMotion is a new Web graphic and animation design product from Adobe. It allows designers to work with vector and raster graphics in an easy-to-use environment. Its interface is extremely intuitive, familiar to those who have used related products such as Adobe Illustrator or Photoshop, and makes designing graphics and animations quicker and more fun than many of the other animation products on the market. LiveMotion allows users to create everything from a single graphic, a full Web page, a Flash animation, or a complete multimedia presentation. It offers a wide range of drawing tools, preset textures, styles, shapes, and helpful color management tools so elements can be created directly within LiveMotion or imported from other Adobe products. LiveMotion 1.0.2 is basically the first release with an additional upgrade that fixes some of the initial glitches and thus provides: faster performance; improved sound support; better import and export capabilities; more efficient SWF compression; tighter integration between Illustrator and Photoshop; and updates to the object-based Timeline. The product is available for the PC or the Macintosh and the price is $299. See Adobe's Web site for more information, tip, tricks, tutorials, and other goodies: http://www.adobe.com.

 
user level
Advanced Beginner, Intermediate, and Advanced computer users. The program is an excellent choice for both entry-level and more advanced designers. Neophytes can start with pre-fab sounds, shapes, textures, and styles that ship with LiveMotion until they become more familiar with the program. Also on the CD are exercises and templates to complement the User Guide, and there are more tutorials on Adobe's Web site. The included User Guide is pretty straightforward, and for users who like more step-by-step instruction, they can purchase Adobe's LiveMotion Classroom in a Book with numerous tutorials. LiveMotion, though, has enough bells and whistles and robust features to entice the professional designers who want to streamline their workflow and increase productivity.
 
features

Top LiveMotion features:

1. Intuitive User Interface--The interface is based on the standard interface with Adobe menus, palettes, commands; rulers, guides, and grids; and a movable anchor point for transformations.

2. Animating Masks--As part of Adobe LiveMotion's set of effects, you can use the shape of one object to mask other objects. Only the part of the objects within the mask are then visible. You can animate the mask as well as the objects being masked, to create special effects such as dissolves and cutouts.

3. Creative Effects--Use textures, special effects, and filters on graphics.

4. Integrated Content-Creation Tools--Create shapes with the Ellipse, Rectangle, and Polygon tools; and achieve exacting control when you draw Bezier paths and curves with the Pen tool.

5. Integration with Photoshop/Illustrator--Place layered Adobe Illustrator and Photoshop files directly in LiveMotion, then edit those images in their native application with the Edit Original command. The changes you make in Illustrator or Photoshop automatically update the images in your LiveMotion composition.

6. After Effects Timeline--Animate objects over time with the familiar After Effects styled Timeline; use auto keyframe generation and auto tweening; independently animate the attributes of an object, such as position, opacity, special effects, and text, at any point in time during the creation and editing process; and supports independent looping animations.

7. Animate Photoshop/Illustrator Content
--Place native, layered Illustrator or Photoshop files in LiveMotion, convert layers to individual objects, and animate.

8. Multi-Object Based Animation
--LiveMotion animates objects, which differs from other applications that animate layers. With the LiveMotion object model, you can select multiple objects, turn on an animation attribute, move the Playhead to a different point in time, and then change the selected attribute. When you play the composition, all the selected objects will be animated. You can also stagger the starting position of objects in the Timeline by pressing and dragging the middle of an object's duration bar.

9. Animation Productivity Features--Break a large text block into individual characters in preparation for animation; organize separate animation components for Timeline management; drag and drop animated objects into the Library palette to store as animations for use in multiple documents; and drag and drop objects into the Styles palette to store as common animation attributes for easy future access.

10. Rollovers
--Create remote rollovers, animated rollovers, and complex menus; save rollovers to the Styles palette for use in the future.

11. Sound
--Add sound to rollovers and Timeline; export sound to MP3; and use volume, pan, and trim controls.

12. Interactive Animation Authoring
--Create separate looping object; and use behaviors to add interactivity to your composition.

13. Export Features--Export to multiple Web formats; use per-object compression which gives you control over the image quality and file size of individual objects; and Active Preview provides a live preview of the optimization results.

 
review
Note: Flash .swf files convert non-vector or multilayer objects to bitmaps, which can increase file size. Also, if there are a lot of gradient or opacity animations, multi-layered objects, and bitmap images within a file, the SWF file may be very large and take longer to load, plus the SWF format will delay the playing of an animation until all the files have downloaded. Therefore, some of the examples below are provided in two formats: (1) a flatten GIF or JPEG image for older machines with slower modems; and (2) a LiveMotion composition exported as a Flash or GIF animation. Click on the small images which are linked to the larger versions. The links to the animated examples are placed on the right, and these animations can take one to three minutes to load with slower modems. If you have a DSL line, they load in a matter in seconds. I have included the larger SWF files because they do provide an excellent demonstration of the complex elements that can be created and included in your LiveMotion compositions.
 

Intuitive User Interface

Adobe LiveMotion shares a common user interface with Adobe Photoshop, Adobe Illustrator, and Adobe After Effects, which means a short learning curve for individuals familiar with other Adobe products. The main Menu bar runs along the top of the work area, plus there is a Standard toolbar for Window users. There is a Status bar along the bottom that provides notes and additionalinterfaceinformation about various selection and task options. On the screen, you can show just the composition or expand the window to see the entire work area--including the "off screen" gray area where you can move objects off screen in an animation. The toolbox contains tools for selecting, drawing, and editing your composition. There are floating palettes that contain additional controls and options for modifying and exporting compositions. A sliding color palette displays the color values for the current foreground and background colors and allows you to edit colors according to several different color models. See image to the right for a view of the interface.
 
Animating Masks
When multiple objects are grouped, the top object in the group can be turned into a mask that masksmasks the other objects in the group. The mask object is still independent of all the other objects in the group, and as such, it can be animated as well. You can create simple animated masks that change size over time; create type masks that have an animated object moving under it; or create an animated mask that shows a different version of the same object under the mask. For instance, using a flash animated maskLiveMotion Classroom in a Book tutorial, I created an animation that consisted of three sequences. See the image to the left for a flatten version of the animation or if you have the Flash viewer, you can click on the image to the right for an exported Flash animated version. For the first segment, I created a simple animated mask that consists of a circle that slowly closes over the opening title, "Cafe Noir." I shrank the circle over time, and then changed the circle into a mask for the sign under it. For the second segment, the mask consists of text that slowly moves across the composition. Rather than have a static object under the mask, as in the previous segment, you'll see an animation of a road rushing past. For the third animated segment, I created a mask that uses a set of headlights moving across an exit sign. Where the light hits the sign, the sign looks lighter. This effect is created by making two versions of the exit sign, one dark and the other light. The headlights are a mask that displays the lighter sign within the shape of the headlights.
 
Creative Effects
You can apply a variety of effects to objects or images without leaving the LiveMotion application. textures, gradients, embossIt's possible to alter creations using Pathfinder operations (unite, intersect, exclude); 3D effects (bevel, emboss, shadows, cutouts); Opacity; Textures; distortion Photoshop Filter Effects; Gradients; Image Adjustments (brightness, contrast, tints); and Distortions (displace, twirl, spherize, magnify, pixelate), all of which are object oriented, non-destructive and editable at any time. The graphic to the left shows three different effects (texture, gradient, and emboss) applied to images and text. See image to the right for view of various distortion effects.
 
Integrated Content-Creation Tools
LiveMotion provides you with numerous tools and features that allow you to be creative with shapes. The drawing tools in LiveMotion let you create geometric objects, and draw the following shapes: (1) Rectangle Tool--draws rectangles and squares; (2) Rounded Rectangle Tool--draws shapes and textrectangles and squares with rounded corners; (3) Polygon Tool--draws objects with from three to ten straight sides, each side being the same distance from the center of the object; (4) Ellipse Tool: draws ellipses and circles. Once you've created a shapes and text  flash basic shape using these tools, you can further modify it by using the Properties palette. There is also a Pen tool to draw a freeform path. It allows you to create straight lines and smooth, flowing curves with precision. The shape of a path can be changed by adding, deleting, or moving the path's control points. Using a tutorial from LiveMotion Classroom in a Book, I created the PC Cafe image. The graphic on the left shows the sequencing in a flat image, and if you click on the graphic to the right, you will see the finished exported Flash animation. The animation starts with a blue background with a blue stripe and a blue circle. Over time, a meteor, text, and a yellow band appear. The ellipse tool was used to create the yellow band, and the composition elements have shadowing and 3D effects that change as the meteor passes through the scene.
 
Integration with Photoshop/Illustrator
Graphics created in Adobe Photoshop or Adobe Illustrator, can be easily imported into Adobe edit originalLiveMotion. Once placed in a composition, you can modify imported work just as you would objects created in LiveMotion. You can also scan images directly into update filesthe program. The drag-and-drop feature lets you drag images from your desktop or other open applications into LiveMotion--even files that have layers. Once a Photoshop or Illustrator file is placed in the LiveMotion composition, the Edit Original command lets you edit the native file in their native application. Any changes that are made to the Photoshop or Illustrator file are automatically updated in the LiveMotion composition. There is no need to re-import the file. See image to the left for view of Edit Original command option. See image to the right for a demonstration of updating files. I opened the beginning image in LiveMotion; placed the glasses image into the file; applied the Mercury style to the glasses image; used Edit Original to go to Photoshop and remove the blue background by using a path to create an alpha channel. LiveMotion read the alpha channel I created as a transparency in Photoshop, allowing the Mercury style to apply on the edges of the glasses after the background was removed.
 
After Effects Timeline
LiveMotion has an object-based Timeline, which is modeled after the Timeline in Adobe After Effects. The key advantage of an object-based Timeline is that you can animate each attribute of an object independently. You can change the position, opacity, rotation, scale, and skew over time; rocket animation flashcreate unique special effects by altering object attributes with distortions, filters, and styles; and even reposition rocket timelineindividual attribute keyframes in the Timeline to fine-tune your composition. You animate objects using the Timeline window, which displays Timeline tracks for all objects in the composition and their properties, such as the size, position, or color. By changing the values of these properties over time, you create animation. rocket animation flatLiveMotion supports auto keyframing and auto tweening. You simply insert a start keyframe for the specific attribute you want to animate, specify the amount of time for the animated effect, then change the object, and LiveMotion will automatically insert the end keyframe and tween the effect between the start and end keyframes. Any subsequent edits to the object at different points in time will automatically insert new keyframes at those points in time. Then these keyframes can be changed, repositioned or deleted at any time with ease. See top image to the left for view of the rocket Timeline. She bottom image to left for flatten view of animation, and see the image to the right for an exported Flash version.
 
Animate Photoshop/Illustrator Content
Because of LiveMotion's excellent integration with Photoshop and Illustrator, it is easy to incorporate animate layersnative layered .psd and .ai files to add motion, interactivity and sound. You do not need to flatten your files or convert them into nonnative file formats. LiveMotion lets you keep the layers you want to animate and get rid of those you don't want with simple point and delete. Once the layers are converting layers converted into objects or sequences, multiple attributes can be applied and independently animated. Plus, you can even change the stacking order of multi-layered Photoshop or Illustrator objects in the Timeline. LiveMotion gives you several options when converting layers. You can convert the layers into individual objects, into a group of individual objects, into a keyframe sequence or into a keyframe sequence where the bottom layer is distributed across the entire sequence. For the Flash animated image to the right, I placed a layered Illustrator file of a cube into LiveMotion. The file contains nine layers, each showing a different angle of the cube. I animated this composition in LiveMotion by converting the Illustrator layers into nine frames in an object's time sequence. Click on the cube to see it move. See image to the left for a flattened view of the original Illustrator cube file and the final Web page.
 
Multi-Object Based Animation
Grouped objects can be animated in the Timeline in much the same way that individual objects can be. With a group, you are limited to animating only properties that can logically be applied to the grouped objects timelineentire group, such as position and rotation. You can still animate the individual objects that make up the group normally. Groups can be animated regardless of whether or not the objects that make up the group are themselves animated. If the objects in the group are animated, their individual animations will run along with the group animations. For example, letters in a title could rotate individually while the whole title moves around the screen. Even if you do not want to animate the group, grouping objects is an excellent way to organize individually as part of the composition. For ease of identification, individual objects within a group are listed as "subheadings" under the grouped object. Clicking the group's triangle displays the individual objects that make up the group, as well as the properties of the grouped object. See image to the left for view of a Timeline showing groups.
 
Animation Productivity Features
LiveMotion provides an efficient work environment that minimizes repetition and maximizes productivity. Some of the LiveMotion key productivity features that streamline workflow and create library paletteefficiency include: (1) Break Apart Text; (2) Grouping separate animation components for Timeline Management; (3) a Library Palette; and (4) an Animation Styles. With the Type tool, you can create horizontal and vertical type, and it is automatically anti-aliased. You can edit the text at any time using the Type tool dialog box or Properties palette. You can also specify the font, size, leading, tracking, and alignment of the type and edit its masks-filters-textcharacters. With the Break Aprt Text command, LiveMotion lets you create text objects and separate the individual characters into distinct text objects in the Timeline. You can then work with them like any other object, animate them individually, and open them in the Type Tool dialog box to edit them as text. For the image to the right, I style palettecreated a mask by grouping the text and the top image and the Top Object Is Mask command. The text became the shape that you see the top image through, and the bottom image in the file is the background. Then I created a style for the smaller text and saved it to the Styles palette. Both horizontal and vertical text alignment was used in the image. Also I combined the circle and letter w to create a logo and changed opacity. With the Break Apart Text command, I separated the letters in the word "friday" and placed them in the circles. To enhance the smaller warehouse picture, I applied the Palette Knife filter. Lastly, I adjusted the look of the picture with the Adjust palette. See top image to left for view of Library palette and bottom left image for view of Styles palette showing the Type style I created for the warehouse image.
 
Rollovers
Rollovers are easy to create in LiveMotion. A rollover is any effect, such as a glow, color change, rolloveersor sound, that occurs when the mouse moves over an object. The term is also remote rolloversused to describe an effect that is triggered by other mouse actions, or a button or other object that has such an effect applied to it. You can attach sounds to object states, and once you have created a rollover effect you can save it for future use in the Library. Remote rollovers are effects that are triggered by one object, but affect a target object. The trigger object is the object that the user interacts with usually by pointing to it or clicking it. The target object is the object that is actually changed. See image to the left for an example of a regular rollover exported in a GIF format, and see the image to the right for an example of remote rollovers exported in a Flash version. Click on the buttons to see the changes in the glasses.
 
Sound
To provide auditory as well as visual feedback, you can attach sounds to compositions and rollovers. Sounds are played when a state is activated (for example, a sound that plays when a button is clicked). You can apply a sound from the Sounds palette, or you can attach an external sound file. LiveMotion lets you import WAV, SND, AIFF, AU, and MP3 sound files. Then you can create background soundtracks, link sounds to specific animation events, or incorporate them into interactivity. Audio controls include panning, volume (fade-/fade-out), trimming, and more. LiveMotion exports to the MP3 file format. See image in section below for a composition with sound.
 
Interactive Animation Authoring
You can make your LiveMotion animations interactive by using behaviors. Behaviors are commands counter flatyou add to a composition Timeline to perform an action such as stopping an counter flashanimation or jumping to a specific place in an animation. Behaviors can be added to rollovers. And by adding a behavior to a rollover's object state, you can create buttons that control the animation. See image to the right for a view of a counter, and image to the right for an animation exported as a Flash version. Click on the triangle to start the counter, and click on the rectangle to stop it. Sound also has been added.
 
Export Features
The final step in creating an Adobe LiveMotion composition is saving and exporting it for use on the Web. You can choose from an array of exporting options, which let you export to all common Web formats, including the Flash (SWF) file format. If you export in the SWF format, you can also flat bicycles imagechoose optimization settings for any bitmap images that are in your composition. In addition, LiveMotion export features let you export an entire composition or just selected objects; create an HTML page that references your image files; or slice a composition and have LiveMotion generate an HTML table that reassembles the parts. As you work, you can see how your composition will look with the current export settings by using the Active Export Preview. When you are working in Active Export Preview, selected objects have a red border. To optimize a graphic, you change your export settings (reducing colors, or quality) in the Export palette while keeping an eye on how the image actually looks on screen. The Status bar at the bottom of the LiveMotion window shows you the export file size for your composition and for any selected objects. You can also preview your images in a Web browser. See image to the right for a flattened view of a Web page, and see the image to the right for an exported Flash version saved with the AutoLayout option.
 
personal comments
LiveMotion will appeal to designers who are familiar with other Adobe's products, plus those who want to quickly add Flash animations without having to learn advanced scripting or complex interactivity. It might not have all the scripting features of Macromedia's Flash, but only the most advanced designers need that level of robustness. LiveMotion streamlines many of the common animation tasks. The automatic keyframes and automatic tweeing are a great timesaver and are perfect for beginners. The interface is clean, and the Timeline is easy to understand. LiveMotion fills a nice niche in the Adobe product line. It's an imaginative first version for a product that should have a great future.
 
system requirements

Windows

Windows 98/Windows NT 4.0
Pentium II CPU and higher
Windows 98, 2000, NT 4.0 SP4
64 MB RAM
100MB Disk space
CD-ROM drive

Macintosh

Power PC CPU and higher
Mac OS version 8.5, 8.5.1, 8.6, 9.0
48 MB RAM
100 MB disk space
CD-ROM drive

 
Graphics: Adobe LiveMotion & Adobe Photoshop 6.0
Web Page Editor: Dreamweaver 4.0
Scanner: Hewlett Packard ScanJet 6250C Professional Series

back