[3D Rendering Tutorial]
Tom Arah adjudicates as Flash 4 and LiveMotion 1 go head to head.
In case you hadnt 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.
Whats needed for any program to truly threaten Flashs dominance is a dedicated approach - and thats 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 Adobes 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, its Adobe.
So take your seats for the most keenly awaited head-to-head in the world of graphics this year and lets see how each contender fares in the crucial areas of drawing, formatting, interactivity, animation and output.
In terms of basic drawing, to call Flashs 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, Flashs 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 theres 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 theres no point storing information that isnt visible. On the other hand while that might be true for the SWF, its certainly not the case when creating the animation and often makes basic work in Flash a nightmare (I strongly advise immediately grouping any object youre happy with to keep it safe).
Flashs 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 arent in for any nasty surprises. In terms of controlling the building blocks of your project its a clear case of round one to LiveMotion.
Once youve 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 arent 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 SWFs point of view - with its only interest in whats visible - this makes sense but from the users point of view its another serious headache. In particular it means that its easy to select and move an object only to find that youve left its outline behind!
LiveMotions fill-based formatting is more conventionally applied by selecting an object and then double-clicking on one of the many floating palettes fill options. The system might be more traditional but its 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 doesnt 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 theres 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 its 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 theres 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 Flashs 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.
Flashs advanced interactivity is a strength but its complex to control.
OK. Its 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 its 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 isnt 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 symbols opacity, colour or brightness.
Flashs 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 isnt only easier to handle its also more powerful. For example you can animate the individual properties of each object layer. Most powerful of all is the way that LiveMotions 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 Flashs flat cartoon-style animations to shame. Round four to LiveMotion.
LiveMotions autotweening and autokeyframing approach is simpler while its end results are richer.
All thats left is to output the file to SWF and to incorporate the results into your Web page. Flashs 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 dont have the Flash player installed. In comparison, LiveMotion produces HTML but with no customisation options and doesnt offer any way of automatically outputting and incorporating bitmapped alternatives.
You cant 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 isnt quite up to Fireworks standard, but its 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 cant be split up into an HTML table. Otherwise LiveMotions 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. Its certainly true that LiveMotions combined ease of use and power provides a comprehensively better experience for author and end user alike, but thats not quite the end of the matter. Flash movies arent 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 LiveMotions 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 its 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 its 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 LiveMotions 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 theres another factor that Adobe has chosen to completely ignore in this first release SVG (scalable vector graphics). Unlike the recent Illustrator 9, LiveMotion 1 doesnt offer SVG export but its certainly in the pipeline in fact supporting the Adobe-backed SVG format is likely to be LiveMotions main long-term function.
As always its 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.
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:
|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]