Flash v LiveMotion - Flash Attack

Trial downloads/special offers from Macromedia

In case you hadn’t noticed, the flavour of the month in the world of Web graphics is the vector-based and animatable Flash. Two years ago Macromedia opened up the Flash SWF specification enabling other developers to produce its files and each of the major drawing packages has risen to the challenge. Unfortunately in each case the system is awkward, working by mapping drawing layers onto SWF frames, which makes it difficult to co-ordinate multiple animated objects and makes future editing near impossible. Taken together with the lack of control over sound or interactivity, the major drawing applications’ moonlighting SWF support is little more than a taster for the real thing.

What’s needed for any program to truly threaten Flash’s dominance is a dedicated approach - and that’s exactly what Adobe offers with the recent launch of LiveMotion. At first the two might seem hopelessly mismatched. After all Macromedia not only owns and develops the underlying SWF format, but has had no less than four releases to get things right. In comparison Adobe’s track record in this field is non-existent - so much so that the internal codename for LiveMotion was "Ground Zero". On the other hand a fresh start allows for new thinking and if anyone has the graphical clout to take on Macromedia, it’s Adobe.

So take your seats for the most keenly awaited head-to-head in the world of graphics this year and let’s see how each contender fares in the crucial areas of drawing, formatting, interactivity, animation and output.

In terms of basic drawing, to call Flash’s approach idiosyncratic is kind. The program developed out of work on the long-gone and largely unlamented SmartSketch application which majored on producing cartoon-style drawings. As such there are very few shape tools and, in place of the traditional pen, Flash’s main creative tool is a brush that lays down pressure-sensitive closed paths rather than strokes. The results can be nicely naturalistic but without node editing there’s far less control.

Trying to reinvent the wheel is bad enough but what really makes drawing in Flash so different and so difficult is its bizarre system of connection and segmentation. Draw a brush stroke over an object of the same colour and the two objects merge; draw a brush stroke over an object of a different colour and the object is split into two! When you think about it there is a good reason for this – final file size. The SWF format is all about efficiency and there’s no point storing information that isn’t visible. On the other hand while that might be true for the SWF, it’s certainly not the case when creating the animation and often makes basic work in Flash a nightmare (I strongly advise immediately grouping any object you’re happy with to keep it safe).

Flash’s system of connection and segmentation makes basic drawing a potential minefield.

In comparison LiveMotion is a much more traditional drawing environment. By default the pen tool also creates closed shapes rather than open paths like Flash but these are fully editable with the pen select tool. The range of tools is also far better with dedicated polygon and rounded rectangles while the Library palette provides access to over fifty other primitives such as hearts and stars. Significantly the Library also offers access to bitmapped shapes which Flash tends to avoid. The biggest difference though is the simple fact that, without connection and segmentation, objects remain independent so you aren’t in for any nasty surprises. In terms of controlling the building blocks of your project it’s a clear case of round one to LiveMotion.

Once you’ve added your objects the next step is to make them look good. Flash offers a reasonable array of formatting options with solid and gradient fills complete with transparency control and a surprisingly wide range of line types. Again though the implementation is bizarre. Fills and strokes aren’t seen as customisable properties of the object but rather both are handled as shaped objects in their own right and controlled with the Paint Bucket and Ink Bottle tools. Again from the final SWF’s point of view - with its only interest in what’s visible - this makes sense but from the user’s point of view it’s another serious headache. In particular it means that it’s easy to select and move an object only to find that you’ve left its outline behind!

LiveMotion’s fill-based formatting is more conventionally applied by selecting an object and then double-clicking on one of the many floating palette’s fill options. The system might be more traditional but it’s also more powerful. Fill options include flat colours, schemed colours, advanced gradients, bitmapped textures and even graduated transparencies. Even more impressive are the different formatting effects that can be applied to each object. The Adjust palette offers colour correction, the 3D palette creates photorealistic raised buttons and the Distort palette offers various advanced transformations. These fill effects can even be set to act on underlying objects like lenses.

In terms of line formatting, LiveMotion has come up with a workaround to the fact that the flat SWF format doesn’t distinguish between strokes and fills. The simple solution to enable an object to be given an outline is to create a slightly larger object underneath the current object by adding a new layer and increasing its width. Alternatively by offsetting the layer you can produce a drop shadow. The beauty is that all layers move with their object so there’s no danger of selecting a fill and not its outline or shadow.

Even better, thanks to the ability to add multiple layers and to independently format each with all of the formatting power that LiveMotion provides, you can create some uniquely advanced creative effects. While you can forget about trying to create a photo-realistic textured 3D button with surrounding glow in Flash, in LiveMotion it’s simple. Best of all you can save any combination of layers as a style that can be instantly reapplied. While Flash is generally limited to flat cartoon-style formatting, LiveMotion moves into a different league. Round two to LiveMotion.

Layers, effects and styles puts LiveMotion in a different league when it comes to creative formatting.

Of course there’s more to Flash movies than just the objects and formatting that make them up. To begin with Flash brings graphics to life by making them interactive. At its simplest this involves the creation of rollover buttons. Actually "simple" is never the right word to use about Flash. To create a rollover you first need to create a button symbol, then set up an independent timeline with frames for the Up, Over, Down and Hit states of the graphic each of which you must format with the awkward Paint Bucket and Ink Bottle tools. Even so, creating rollovers is certainly easy compared to trying to force Flash into more advanced interaction. While this is one of Flash’s major strengths, with variable and property handling and even conditional processing, trying to manage this through the Actions tab of the Instance Properties dialog is seriously hard work.

Flash’s advanced interactivity is a strength but it’s complex to control.

By comparison setting up basic interaction within LiveMotion is truly simple. To create a rollover all you have to do is click on the New button at the bottom of the rollover palette to create over and down states and then format these as you want. In most cases all you need to do is choose one of the pre-supplied styles to produce eye-catching buttons that depress, glow, invert and so on as the end user interacts with them. You can then quickly add an action to control the movie or load a new URL. Compared to Flash there’s no advanced control, apart from through the catch-all Run Javascript command, but for most users this will be more than made up for by the system’s simplicity. If you really need more control than this you should probably be looking at the more programmatic Director/Shockwave option. Round three is much closer but LiveMotion just shaves it.

OK. It’s time to take the gloves off. Of course what Flash is really all about is its animation control. As we saw with the drawing packages’ grafted on support, the animation in the final SWF file is based upon frames and Flash has always let you create animations in this flick-book style way by adding keyframes and altering objects as necessary. This frame-by-frame approach is the only way of creating completely freeform animations, but it’s horribly inefficient and difficult to re-edit. What really sets Flash apart is its ability to automate the production of animations using the Timeline.

As always with Flash this involves some serious set-up work, isolating each object that you want to animate onto its own layer and converting it into a symbol. You then add keyframes at the beginning and end of the desired sequence and apply the Create Motion Tween command. Now if you move or scale the object in either keyframe, all the intermediate frames are automatically interpolated or "tweened" accordingly. This isn’t just easier to set up and edit than frame-by-frames, the results are also more efficient as the symbol only needs to be stored once in the final SWF along with its position and scaling information for each subsequent frame. Even better, by digging down into the Color Effects tab of the Instance Properties dialog you can also set up tweens that change the symbol’s opacity, colour or brightness.

Flash’s tweening sets it apart from the frame-based competition, but LiveMotion takes the same idea and runs with it. Rather than relying on user-defined layers, every object in the LiveMotion composition is automatically added to the Timeline. Moreover, double-clicking on the object name expands it to show its various properties such as position, scale, opacity, colour, rotation, skew and so on. To bring any of these properties to life all you need to do is click on the stopwatch icon next to the object name and then any time you change the property in the composition window a new keyframe is automatically added. This system of tweening on steroids is not only simpler in the first place but is much easier to understand and edit in future.

The LiveMotion system isn’t only easier to handle it’s also more powerful. For example you can animate the individual properties of each object layer. Most powerful of all is the way that LiveMotion’s advanced formatting effects can each be animated. For example you can create effects where saturation, contrast and posterization and even the depth of a bevel effect changes over time or where a magnifying or distorting glass moves over the elements of the movie. Such advanced photo-realistic effects put Flash’s flat cartoon-style animations to shame. Round four to LiveMotion.

LiveMotion’s autotweening and autokeyframing approach is simpler while its end results are richer.

All that’s left is to output the file to SWF and to incorporate the results into your Web page. Flash’s experience shows here with its use of HTML templates to control all aspects of the necessary code and the ability to automatically produce GIF-based alternatives for those browsers who don’t have the Flash player installed. In comparison, LiveMotion produces HTML but with no customisation options and doesn’t offer any way of automatically outputting and incorporating bitmapped alternatives.

You can’t automatically generate alternative bitmaps but you can do so manually and this is an area where LiveMotion leaves Flash for dead. Where Flash is only intended for producing mainly vector SWF files, LiveMotion is just as capable of producing GIF and JPEG bitmaps. With the Export palette offering control over features such as GIF palette generation and JPEG quality, LiveMotion isn’t quite up to Fireworks standard, but it’s pretty close. Most importantly it also offers Fireworks’ ability to split up entire compositions into separate images that are reconstituted as HTML tables which means that LiveMotion can be used to design the overall graphical framework for your Web page.

LiveMotion can output Fireworks-style bitmaps as well as Flash SWF.

Unfortunately SWF is a self-contained format designed for producing standalone movies rather than to work as the separate elements of a Web design and so if you select SWF in the Export palette your composition can’t be split up into an HTML table. Otherwise LiveMotion’s export system works just as it does for GIFs and JPEGs. Simply choose how you want any bitmaps to be embedded, the MP3 data rate and the frame rate and then hit the Export or Preview command and your SWF and HTML code are generated ready for viewing in any browser with the Flash player installed. Thanks to its bitmap control, round five goes to LiveMotion too.

With LiveMotion outscoring Flash in each of the crucial areas of drawing, formatting, interactivity, animation and output it looks like a clear win. It’s certainly true that LiveMotion’s combined ease of use and power provides a comprehensively better experience for author and end user alike, but that’s not quite the end of the matter. Flash movies aren’t viewed on your own system but are streamed over the Web which means that one factor is important above all others – file size. And LiveMotion SWFs can be enormous. A five-second simple moving lens animation, for example, ends up at over 400k. That would take minutes to download and you can be pretty certain that your site visitors will have departed before the first frame is ready to play. And a stunning animation that no-one sees is absolutely useless.

The problem with LiveMotion’s bitmap-heavy SWF support is the final size – something SVG should address.

The cause of the problem becomes clear if you look at the report file that LiveMotion generates listing each of the elements in the SWF movie together with its size. The problem is that all the advanced photo-realistic elements that make the LiveMotion animation so eye-catching can only be rendered as bitmaps. In fact it’s worse than this. Even the basic act of adding a layer automatically turns any object from efficient vectors into inefficient pixels. More to the point a different bitmap has to be rendered for every single frame if any of its properties, apart from position, are being animated. No wonder the LiveMotion SWF is so enormous – effectively it’s acting as a wrapper for a frame-based animated GIF!

This is pretty bizarre and changes the reckoning completely. The flat cartoon-style restrictions of Flash are now completely understandable – they are necessary to keep the efficiency of the SWF file which ultimately is its whole point. LiveMotion is revealed to have won by shameless bitmap-based cheating and is in danger of being disqualified. It certainly means that, unless you know exactly what you are doing and restrict LiveMotion’s advanced formatting power for occasional effects, you are still better off producing SWF files within the dedicated and SWF-optimized Flash.

The obvious question this leads to is: why? Why has Adobe chosen a system reliant on advanced bitmapped effects that is totally unsuitable for the production of SWFs? Partly this is because the creation of GIFs and JPEGs is just as important for LiveMotion as the production of SWFs. But there’s another factor that Adobe has chosen to completely ignore in this first release – SVG (scalable vector graphics). Unlike the recent Illustrator 9, LiveMotion 1 doesn’t offer SVG export but it’s certainly in the pipeline – in fact supporting the Adobe-backed SVG format is likely to be LiveMotion’s main long-term function.

SVG as its name suggests is primarily built on vectors like the Flash SWF, but otherwise it is completely different. Over the years Flash has developed from its cartoon-based background to offer the richest user experience currently available on the Web, but at heart it is still based on SWF’s flat, frame-by-frame format optimised for streaming delivery of standalone flickbook-style movie animations. By comparison SVG (as we saw in detail back in issue 61) is an object-based format designed from the ground up to integrate with HTML, to integrate with stylesheets and to integrate with Javascript.

The potential benefits are enormous. The integration with HTML will allow you to use LiveMotion to design your entire page and then output it as an HTML table with all graphical elements treated efficiently as independent but connected SVG objects (effectively providing the best of both Fireworks’ GIF rollovers and Flash’s SWF efficiency). The integration with CSS will allow advanced formatting to be defined once and applied efficiently and consistently to all graphical elements not only within the page but across a whole site. The integration with Javascript means that SVG graphics will be able to interact with each other and any property will be controllable through scripting.

This scriptability is particularly exciting as it means that animations will be simple to set up simply by defining the start and end properties and duration. Effectively the tweening necessary to produce the desired effect can be left to the SVG plug-in (or eventually the browser itself as SVG is now a W3C recommendation). This should lead to an improvement in file efficiency compared to the frame-based SWF while the use of Javascript will open up the whole Web page to interactive control. Perhaps best of all is the fact that support for client-side raster filters is built into the recommendation. This means that all those eye-catching LiveMotion bitmap animations that prove so costly in SWF files should become as file efficient as tweening position or scale!

As always it’s important to stress that all this is theoretical until SVG proves itself in practice but, while Flash remains the flavour of the month for a while yet, in the longer term it will certainly have a real fight on its hands with SVG.

Tom Arah

August 2000

Postscript: Since this article was written Flash 5 has been released. With its advanced ActionScript there's no question that Flash 5 beats LiveMotion hands-down for interactivity, but usability is still poor. In fact it looks like Macromedia is repositioning Flash as a high-end developer-only solution for producing total Web sites - perhaps on the basis that the less demanding field of embedded Web vector graphics and animations will be better catered for by SVG.

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:

Web designer-info.com

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

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.