Adobe LiveMotion 1

[DTP Reviews]
[Vector Reviews]
[Bitmap Reviews]
[Web Reviews]
[3D Reviews]

[3ds max 6]
[3DSOM Pro ]
[Acrobat 7]
[Acrobat 6]
[Acrobat 5]
[Acrobat 4]
[Acrobat 3]
[Acrobat Capture 2]
[Advanced Render 2.5]
[Articulate Presenter 5]
[AutoEye 2]
[AutoEye 1]
[Avenue.Quark]
[Bryce 5.5]
[Camtasia Studio]
[Canvas X]
[Canvas 9]
[Canvas 8]
[Canvas 7]
[Canvas 6]
[Canvas 5]
[Captivate 1]
[Carrara 5 / Pro]
[Carrara 4 / Pro]
[Carrara Studio 3]
[Cinema 4D 9.5]
[Cinema 4D 9]
[Cinema 4D 8.5]
[ColorDrive 1.5]
[CompuPic Pro 6]
[CompuPic Pro 5]
[Contribute 2]
[Contribute]
[Corel Designer 12]
[Corel Designer 10]
[Designer 9]
[Designer 1/8]
[CorelDraw X3]
[CorelDraw 12]
[CorelDraw 11]
[CorelDraw 10]
[CorelDraw 9]
[CorelDraw 8]
[CorelDraw Office 9]
[CorelDraw Premium 9]
[Creative Suite 2]
[Creative Suite 1]
[Deep Exploration 3]
[Deep Paint 2]
[Deep Paint 3D 2]
[Digital Image Suite 9]
[Director MX]
[Director 8.5]
[Director 8]
[DreamSuite 1]
[Dreamweaver 8]
[Dreamweaver MX 2004]
[Dreamweaver MX]
[DrawPlus 8]
[Expression 3]
[Expression 2]
[Eye Candy 4000]
[Fireworks 8 ]
[Fireworks MX 2004]
[Fireworks MX]
[Fireworks 4]
[Fireworks 3]
[Fireworks 2]
[Fireworks 1]
[Flash Professional 8]
[Flash MX Pro 2004]
[Flash MX 2004]
[Flash MX]
[Flash 5]
[Flash 4]
[Flash 3]
[FlashCom MX]
[Flightcheck 3]
[Flix Pro]
[Fontographer 4.1]
[FrameMaker 6]
[FrameMaker 5.5]
[FreeHand MX]
[FreeHand 10]
[FreeHand 9]
[FreeHand  8]
[FrontPage 2003]
[FrontPage 2002]
[FotoFusion 3]
[Generator 1]
[Genetica 2]
[Genuine Fractals 3.5]
[Genuine Fractals]
[GoLive CS2]
[GoLive CS]
[GoLive 6]
[GoLive 5]
[GraphicXtras]
[Headline Studio 1]
[Hexagon]
[Illustrator CS2]
[Illustrator CS]
[Illustrator 10]
[Illustrator 9]
[Illustrator 8]
[Illustrator 7]
[Image Doctor]
[InDesign CS2]
[InDesign CS]
[InDesign 2]
[InDesign 1]
[ImageReady 1]
[ImageStyler 1]
[Intellihance Pro 4]
[Intellihance 3]
[KnockOut 2]
[KnockOut 1.5]
[KPT 7]
[KPT 6]
[KPT 5]
[KPT 3]
[LiveMotion 2]
[LiveMotion 1]
[Mystical Lighting ]
[Mystical Tint]
[Namo WebEditor 5.5]
[NetObjects Fusion 7.5]
[OnOne Photoshop Suite]
[PageMaker 7]
[PageMaker 6.5+]
[PageMaker 6.5]
[PagePlus 6]
[PagePlus 5]
[PagePlus 4]
[Paint Shop Pro X ]
[Paint Shop Pro 9]
[Paint Shop Pro 8]
[Paint Shop Pro 7]
[Paint Shop Pro 6]
[Paint Shop Pro 5]
[Paint Shop Pro 4]
[PSP Album 5]
[PSP Studio]
[Painter IX]
[Painter 8]
[Painter 7]
[Painter 6]
[Painter 5.5]
[Painter 5]
[Painter 4]
[Painter Essentials 3]
[Photo Album 6]
[PhotoArtMaster]
[Photo-Brush]
[PhotoDeluxe BE]
[PhotoDraw 2000 2]
[PhotoDraw 2000 1]
[PhotoFrame 1]
[PhotoGraphics 1]
[PhotoImpact 11]
[PhotoImpact 10]
[PhotoImpact XL]
[PhotoImpact 8]
[PhotoImpact 6]
[PhotoImpact 5]
[PhotoImpact 4]
[PhotoImpact 3]
[Photo-Objects 2]
[PhotoPaint 8]
[PhotoSEAM]
[Photoshop CS2]
[Photoshop CS]
[Photoshop 7]
[Photoshop 6]
[Photoshop 5.5]
[Photoshop 5]
[Photoshop 4]
[Photoshop Album 2]
[Photoshop Album]
[Ph/shop Elements 4]
[Ph/shop Elements 3]
[Ph/shop Elements 2]
[Photoshop Elements]
[PhotoSuite 7 ]
[PhotoSuite 5]
[PhotoSuite 4]
[PhotoSuite III]
[PhotoSuite II]
[PhotoTools 2]
[Picture Publisher 8]
[Piranesi 4 ]
[Piranesi 3]
[Portfolio 3]
[Poser 6]
[Poser 5]
[Poser Pro Pack]
[PrintOffice 2000]
[PrintOffice 1]
[PressReady 1]
[Publisher 2003]
[Publisher 2002]
[Publisher 2000]
[Publisher 98]
[Pxl SmartScale]
[QuarkXPress 6.5]
[QuarkXPress 6]
[QuarkXPress 5]
[QuarkXPress 4]
[Real-Draw Pro 3]
[Real Draw Pro 2]
[Sapphire Plug-ins]
[Satori 3]
[Satori 2.5]
[Sketch and Toon]
[SketchUp 5]
[SketchUp 4]
[SketchUp 3]
[SketchUp 2.1]
[SnagIt 6.2]
[Streamline 4]
[Studio 8]
[Studio MX 2004]
[Studio MX]
[Studio Pro 2 ]
[Swift 3D 4 ]
[Swift 3D 3]
[Swish 1]
[Swish 2]
[Test Strip 3]
[Texture Maker 2]
[Toon Boom Studio 3]
[Toon Boom Studio 1]
[Type Manager Deluxe]
[Vector Studio 2]
[Vector Studio 1]
[Ventura 10]
[Ventura 8]
[Ventura 7]
[Virtual Painter]
[Vue 5 Esprit]
[Vue 4 d'Esprit]
[Vue 5 Infinite]
[Vue 4 Professional]
[Web3D 2]
[Web3D 1]
[WebEasy Pro 5]
[WebPlus 8]
[WildFX]
[WildPresenter]
[Windows Draw 6]
[Windows Draw 5]
[Wright Design 1]
[Xara Xtreme]
[Xara X1]
[Xara X]
[Xara 2]
[Xara 1]
[Xara3D 6]
[Xara3D 5]
[Xenofex 2]
[Xfrog 3.5 / 4.x]
[XPress 6.5]
[XPress 6]
[XPress 5]
[XPress 4]
[xRes 2]


[Home / What's New]
[DTP / Publishing]
[Vector Drawing]
[Bitmap / Photo Editing]
[Web Design]
[3D Software]
[All Reviews]
[All Articles / Tutorials]
[Book Search / Shop]
[Site Map / Search]
[Contact]
 

you can help support the site with a direct donation or by shopping via the following links:

[Amazon.com]
[Amazon.co.uk]
[Amazon.ca]

Thank you!

 

 

A simple yet powerful Web imaging environment ideal for the creation of static and animated Web bitmaps and vectors - but currently let down by its final output.

With its Photoshop and Illustrator applications Adobe defines the standard for both bitmap and vector-based graphics, but there is one area of imaging software in which it has been caught napping: the Web. In particular it has let Macromedia steal not just the initiative but the entire show with Fireworks and Flash out on their own when it comes to producing static GIF and JPEG bitmaps and animated vector SWF files. LiveMotion is Adobe’s attempt to recover the ground it has lost by taking the challenge to both programs simultaneously.

When LiveMotion first loads, users of any other Adobe program will immediately feel at home with the standard Adobe UI of a central composition window surrounded by a toolbox on the left and floating palettes absolutely everywhere. LiveMotion might be a first release but Adobe has outdone itself here with no less than 22 palettes to come to terms with! Thankfully multiple palettes can be tabbed together which leaves some space for your work though it also makes it easier to lose the particular palette you are looking for. As a last resort the Restore to Defaults command at least re-establishes some control over your working environment.

The LiveMotion interface is typical of Adobe with over 20 palettes to get to grips with.

To add objects to your image the first port of call is the toolbox. This offers a reasonable selection of shape options including rectangle, rounded rectangle, oval and polygon tools. It also provides a basic Type tool that relies on entering text into a dialog box which offers limited control over size, leading, tracking and alignment but no advanced features such as automatic bulleting or even justification. Finally LiveMotion provides a Pen tool for creating your own shapes and paths and a Pen Selection tool for editing them. These are both fairly rudimentary, with no option for freehand sketching for example, but are a huge advance on Adobe’s previous attempt at a Web solution, ImageStyler, which had no options for creating customised objects.

In addition to these basic tools LiveMotion offers a number of more advanced controls to help build up your image. You can create new objects by combining existing objects, for example, and use the Transform palette to position, scale, rotate and skew them. You can also import external vector and bitmap images and, using the Properties palette, you can then apply a matte or generate an alpha channel to control their apparent shape. Alternatively, using the Library palette, you can take advantage of a number of pre-supplied vector and bitmap objects ranging from hearts and arrows to paint splashes. The Library is also useful for storing your own objects for future projects while the ability to create aliases that remain linked to their original means that you can instantly update multiple instances of an object within the current project.

Once your objects have been added, LiveMotion offers a huge number of ways of formatting them. Most importantly it allows them to be given a colour fill. The Colour palette offers various ways of defining colours such as RGB and HSV and also provides a Web Safe button which limits your choice to those colours that won’t dither on 256-colour displays. An excellent new addition is the Colour Scheme palette that automatically provides a choice of complementary and contrasting colours to whichever master colour you choose. If uniform colour fills seem a bit tame you can turn to the Gradient palette to set up linear, radial, burst and double burst gradients and to the Textures palette to apply one of a range of provided bitmap fills or to load your own.

Once your fill has been applied you can refine it in a number of ways. The Adjust palette lets you control the brightness, contrast, saturation, tint and posterizing of the colours in your object. The Opacity palette is even more fundamental letting you change the overall transparency of your object. You can also automatically apply gradient transparencies again with linear, radial, burst and double burst options. Surprisingly there’s no option to control blend mode as there is with Illustrator 9.

As well as these core formatting options, LiveMotion offers a number of special formatting effects. The 3D palette is particularly useful in a Web context as it enables you to immediately turn simple rectangles into realistic buttons. In fact the 3D palette offers four very different 3D effects - cutout, bevel, emboss and ripple - all of which share the same customisable controls over depth, softness and lighting. The beauty of the effects is that they combine the quality of bitmaps and the editability of vectors being both photorealistic and non-destructive.

The non-destructive 3D effects are ideal for creating buttons

By default 3D effects are applied to the current object’s own fill but LiveMotion also enables effects to be applied to the background making the current object act like a lens on any objects below. This ability is great for creating buttons that seem an organic part of an image and is even more important with the effects available from the Distort palette. There are six of these – displace, lens, twirl, spherize, quantize and radial quantize – which all create eye-catching effects by non-destructively distorting underlying objects so that the spherize option, for example, acts like a fisheye lens placed over the current image.

LiveMotion’s various Adjust, 3D and Distort effects all work as pixel-based filters so it’s no surprise to find that Adobe has taken things to their logical conclusion and also offers the set of artistic, distortion and special effect filters found in Photoshop. These are initially applied to an object via the Filters command but then appear in the dedicated Photoshop Filters palette. Unlike Photoshop, LiveMotion applies the effects non-destructively which allows multiple effects to be combined and reordered, fine-tuned or removed at any point. The one disappointment is that in LiveMotion the effects can only be applied to bitmap images whereas in the recent Illustrator 9 they can also be applied to vector objects with bitmap fills.

By now it’s becoming apparent that LiveMotion’s creative power is pretty extraordinary especially compared to the almost exclusively vector Flash. But this is only the beginning. LiveMotion has another trick up its sleeve with its Object Layer palette. Using this, you can add up to 99 layers to each object. By then using the Opacity palette to change the opacity of layers and the Colour, Texture and Gradient palettes to apply fills and the Adjust, 3D and Distort palettes to apply effects, it’s simple to create unique creative formatting effects.

In fact LiveMotion’s use of layers is even more fundamental than this. You might have noticed that so far I’ve only been talking about fills. That’s because LiveMotion doesn’t distinguish between fills and strokes as traditional programs like Illustrator do. The advantage this offers is that you can apply any of the effects we’ve been looking at to a Pen tool path just as you can to a rectangle. But in that case how can you give an object an outline? The solution is to add a layer and use the Layer palette to increase the width of the bottom layer so that it appears to surround the object like an outline. Another important variation on the same system is to use the Layer palette to offset the underlying layer to create a shadow effect.

Layers are used for advanced formatting effects and also for basic outlining and shadows

The potential for creativity opened up by combining LiveMotion’s use of object layers with its various formatting effects is huge but so is the potential for confusion. Thankfully LiveMotion has the answer. To ensure consistency you can copy an object’s fill, current layer, effects or transformations onto any another object. A more permanent solution is to drag your formatted object onto the Styles palette and give it a name. You can then simply select an object and double click on your style to apply all layers and formatting effects. The one disappointment is that there’s no way to edit and update styles already in use in a project.

So far the creativity on offer is impressive for building static images and pages, but for Web work it’s important to bring your images and pages to life. In particular it makes a huge psychological difference if the ubiquitous Web button is made to respond to the user. This is easy in LiveMotion. All you need to do is select your button object and then hit the New State icon at the bottom of the Rollover palette. By default this adds Over, Down and then Out states each of which you can reformat using all the stylising power at your disposal. You can then preview your rollover either in situ by selecting the Preview tool or in any browser that you have installed. When you export your composition, LiveMotion will automatically generate the different images, HTML and Javascript necessary to create the rollover effect.

Rollovers are simple to create by adding and formatting object states.

Of course the basic rollover is only the beginning. You also want your button to do something. You can add basic sound handling by dragging clips from the Sound palette onto the desired image state which will automatically play when that state is activated. LiveMotion also offers a number of basic behaviours that can be linked to the image state. The majority of these are used for controlling animations, but three are particularly relevant to rollover buttons. The first, Go To URL, enables the button to load a new page. The second, Change State, in conjunction with the ability to create custom image states and target named objects, enables remote rollover effects, where for example a product shot changes as you move the mouse over a list. The third, Run Javascript, is a catch-all behaviour that can be turned to any use but this rather optimistically depends on users being able to write their own code.

With its impressive button, Web page and rollover production, LiveMotion certainly rivals market leader Macromedia Fireworks, but unlike Fireworks it also takes the challenge to Macromedia Flash. This involves moving from static images and interactivity into full-blown animation. Unlike Fireworks which is limited to frame-based flick-book animations, LiveMotion provides a Flash-style Timeline palette. As with Flash this is used for setting up keyframes between which the object properties in the animation are automatically interpolated or "tweened" so that smooth movements can be animated, for example, by just setting start and end positions.

The underlying tweening principle is the same but otherwise the Flash and LiveMotion approaches could hardly be more different. To animate an object in Flash you first isolate it on its own layer, then set up keyframes, edit the object and then call up a dialog to set the desired tweening. In LiveMotion the timeline is object-based with every object in the drawing automatically assigned its own row. Next to each object name is a triangular twistdown which can be used to expand or collapse a list of object properties such as position, size, colour and so on. To create an animation you first indicate those properties you intend to animate by clicking on the stopwatch symbol next to the property name. You can then move to any position in the timeline and editing these object properties will automatically create keyframes between which the property will be tweened.

The property-based Timeline can be intimidating but is easier to use than a layer-based animation system.

The process isn’t exactly intuitive and the sheer number of objects and properties can be seriously intimidating and difficult to navigate. Adobe has done something to reduce the problem including giving objects meaningful names based on their colour and shape, but this is still an area that needs to be rationalized with much better outlining control. Even so there’s no doubt that LiveMotion object-based animation is a lot easier than Flash’s layer-based system especially when it comes to understanding what is happening in an animation and retrospectively fine-tuning it.

Apart from its usability, the other good news is that LiveMotion’s animation capabilities are surprisingly advanced especially for a first release. Basic sounds and behaviours can be added directly to the timeline and five different transitions can be applied to keyframes to control tweening to produce realistic effects such as acceleration and bouncing. Other advanced features include masking and the crucial ability to nest time independent animations. Best of all is the way that LiveMotion’s animation system leverages its existing capabilities with the ability to animate different layer properties, for example, and even to store animations as styles to be applied to other objects.

Of course for anyone to actually see your composition, you first have to output it. For static and rollover images the most likely route is to output to GIF or JPEG. LiveMotion lets you optimise both selected objects and the entire image in the main composition window by first turning on the Active Export Preview. In this mode any changes you make to GIF and JPEG settings in the Export palette are automatically previewed onscreen while the file size of the overall image and currently selected object are shown at the bottom of the screen. Settings include options to manage JPEG quality complete with the ability to reduce chroma and to choose between six ways of generating GIF palettes.

As well as producing the bitmaps themselves, LiveMotion also lets you generate the HTML and Javascript necessary to display them in a Web page. The Autoslice option creates separate files for every non-overlapping object while the Autolayout option creates the separate files complete with an HTML-based table to recreate the overall composition. Using the Web palette you can also give any object a URL and LiveMotion will generate the necessary image map. The Web palette can also be used to associate a text object or group with an HTML heading tag. Using the Batch Replace HTML command you can then have LiveMotion replace the heading text in any selected HTML files with automatically generated title images.

LiveMotion is able to produce HTML table-based output and preview GIF quality onscreen.

Batch replacement is an effective feature that Fireworks would do well to copy, but otherwise LiveMotion’s GIF and JPEG control is disappointing. To begin with although the program provides a Gamma Preview to show how images will appear on the Mac platform there’s no Browser Preview to show how they will appear on limited 256 colour displays. The optimisation settings are also surprisingly weak with the lack of any control over the individual colours in the GIF palette almost unforgivable in a dedicated Web application. Just as strange is the lack of any automation features to enable multiple images to be resized or converted – another crucial and commonplace Web task.

Compared to Fireworks, LiveMotion’s bitmap optimisation is poor but it is compensated for by its ability to output to a Web vector format. Based on Adobe’s championing of the forthcoming W3C open standard you might expect LiveMotion to major on SVG support. No doubt that will come but for this initial release Adobe has instead chosen to concentrate on the current success story, Macromedia’s Flash SWF format. The process for producing Flash files is exactly the same as for bitmaps with SWF available as an option from the Export palette. All you need to do is set the frame rate, an MP3 audio data rate and how you want embedded bitmaps to be handled. Once you’ve done that, you’re ready to preview the SWF or to export it for final use.

The system certainly works and thanks to LiveMotion’s advanced animation power you can quickly be producing eye-catching SWFs that would put a Flash expert to shame. In a way it all seems too easy. And sadly it is. To begin with LiveMotion doesn’t offer any control over the HTML that is output with your SWF and which is necessary to control features such as looping and movie size. More importantly you can’t automatically generate a GIF or JPEG complete with the necessary HTML code to ensure that those browsers who haven’t installed the Flash player will at least get to see something.

There’s an even more fundamental problem. Your Flash movie will undoubtedly look great and play back perfectly on your own system, but the same is not necessarily going to be the case when it’s posted to your site. The problem is one of file size. LiveMotion SWFs tend to be large with some apparently simple animations often measured in hundreds of K. Open up the report that LiveMotion generates when you export and you’ll see why - most of the objects in the SWF are actually handled as bitmaps. Whenever you apply a 3D or distortion to an object, for example, the effect can only be represented through pixels. That’s disappointing but understandable. Bizarrely though, even the simple act of adding a layer to an object turns it from a SWF vector shape to a bitmap object - and layers are absolutely central to LiveMotion’s working method.

Saving to Flash works beautifully but the results can be too large to be usable.

LiveMotion’s lack of advanced optimisation for its GIFs is disappointing, but the size of many LiveMotion bitmap-based SWFs simply make them unusable - at least until broadband access becomes common. So does this extravagance mean that LiveMotion throws away all its good work in terms of ease of use and power? Thankfully not. If you understand the danger areas you can work around them and still produce excellent streamlined results. Even so it’s undoubtedly a core weakness and deprives the program of what would otherwise have been a well-deserved recommended award. And it means that Fireworks and Flash remain as the Web graphic tools of choice for a while longer.

It can only be a while however, before Adobe sorts out LiveMotion’s outputting limitations, most probably by leveraging the new SVG standard. When it does LiveMotion’s combination of ease of use and power across static, dynamic, vector and bitmap Web imaging will be a very hard act to beat.

Ease of Use
4
Features
5
Value for Money
5
Overall
5

LiveMotion
Software / Upgrade
Save $$!   Save ££!
Books / Reference
Save $$!   Save ££!

System Requirements: Pentium II or higher, 64MB of RAM, 80MB of disk space, Windows 98, 2000, NT 4.0 SP4, CD-ROM, SVGA

Tom Arah

June 2000


Hopefully you've found the information you were looking for. For further information please click here.

For free trials and special offers please click the following recommended links:

For further information on the following design applications and subjects please click on the links below:

[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]

To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:

Google
Web designer-info.com

       
designer-info.com: independent, informed, intelligent, incisive, in-depth...
 


All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.

You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.

Thanks very much, Tom Arah


 
[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Articles/Tutorials]
[Reviews/Archive] [Shop]  [Home/What's New]

Copyright 1995-2005, Tom Arah, Designer-Info.com. Please get in contact to let me know what you think about a particular piece or the site in general.