Adobe
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.
|
|
|
|
 |
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.
|
|
 |
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. |
|
 |
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.
|
|
 |
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 additional information
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 masks
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 LiveMotion
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. It's
possible to alter creations using Pathfinder operations (unite, intersect,
exclude); 3D effects (bevel, emboss, shadows, cutouts); Opacity; Textures;
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 rectangles
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
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 LiveMotion.
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 the
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; create
unique special effects by altering object attributes with distortions,
filters, and styles; and even reposition individual
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. LiveMotion
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 native
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
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 entire
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 efficiency
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
characters.
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 created
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, or
sound, that occurs when the mouse moves over an object. The term is also
used
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 you
add to a composition Timeline to perform an action such as stopping an
animation
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 choose
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. |
|
 |
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. |
|
 |
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
|
|
|