[3D Rendering Tutorial]
The secrets behind Flash animation
Tom Arah looks at Flash's approach to animation and some exciting alternatives.
The first time I came across the program that was turn into the Internet-conquering Flash, it was as a budget, almost jokey, drawing utility. SmartSketch 95 from Future Wave looked like Windows Paintbrush and acted in much the same way to produce simple cartoon-like images. The only thing that made the program stand out was that its images weren't built up as bitmaps but rather as vectors.
This was interesting but of little benefit and SmartSketch 95 soon disappeared to be reborn as FutureSplash. What made FutureSplash so different was its move to animation as suddenly its cartoon images came alive. Immediately that underlying vector efficiency became crucial as it meant that impressive animations could be delivered over even the slowest modem connection. Macromedia saw the potential, bought up FutureSplash, renamed it Flash, and brought the Web to life.
Flash enables its drawings to be brought to life with a system of layers, motion guides and tweens.
The trick that made this transformation possible is one that every schoolchild knows. Draw a sequence of pictures at the corner of a pad of paper and then quickly flick through the pages and the phenomenon of "persistence of vision" means that the eye is fooled into seeing a smooth animation. Flash works on the same flick-book principle. Draw your first image, insert a blank keyframe (F7) later on the Timeline and draw a slightly different variation, and repeat as desired. Now when you hit Play, the frames flick by to produce your animation effect.
Redrawing is necessary for completely freeform animations where each frame is different from the one before, such as a bird flapping its wings, but it's hardly efficient. If you're creating an animation of a rocket taking off for example, the actual rocket is the same on each frame. Rather than having to redraw the rocket, Flash lets you convert it to a symbol (F8) which appears in the Library (Ctrl+L). From there you can drag "instances" onto your drawing and reposition them on each keyframe to create the basic illusion of movement. It doesn't only make drawing easier. Rather than having to store all vector drawing information on every frame, Flash only needs to record the vector information that makes up the symbol once - and your final SWF filesize crashes accordingly.
Theoretically you could create any Flash movie using just these two tools, adding keyframes and manually controlling symbol instances, but of course the editability would be horrendous. If you wanted to give the impression of the rocket accelerating, for example, you would have to laboriously reposition each and every instance. Decide to make it more realistic by having the rocket shrink as it gets farther away and again you'd have to go back to manually resize each and every frame.
Clearly this isn't practical and Flash offers its solution in the form of "tweening", named after the common animation practice of "in-betweening" where the best animator draws the important defining images and apprentices fill-in the frames between. To achieve the same in Flash you must first set up the symbol instance you want to animate on one keyframe and then add another - by default Insert>Keyframe (F6) copies the previous one. Then you must click anywhere between the two keyframes and hit the Insert>Create Motion Tween command. You can then go back to either keyframe and reposition your symbol and when you hit Play you'll see your object move smoothly across the screen.
The process is called "motion tweening" because this is what it's most commonly used for, but it actually offers a lot more. You can also scale the symbol instance, for example, to make it seem to move to the foreground or recede, or resize it to make it stretch or shrink, or rotate it around its centre. You can also use the Effect panel to change the instance's alpha and colour channels to add fade and recolouring effects, while using the Frame panel's Easing option you can make the tween speed up or slow down. The beauty is that the tween is live so you can change either keyframe at any time and Flash will automatically update all intermediate frames.
So far we've been talking about simple, single symbol animations, but of course any real Flash project is likely to involve a combination of multiple different tweens, frame-by-frame animations and static elements which raises the question of organisation. The solution that Flash offers is layers. Every independent element of an animation needs to be added to its own layer with the Insert>Layer command which then appears as a new row on the Timeline.
Layers play another role with their ability to control motion tweens. If you first set up a tween on its own layer and then use the Insert>Motion Guide command you'll create a new grouped layer on which you can add any path. You can then snap the symbol instance on the first and last keyframes to the path and, when you hit Play, you'll see your tweened object move smoothly along the path - ideal for example for creating a skywriting plane effect.
But how can you produce the same irregular path for a flapping bird without being forced back to manually drawing each frame? Again Flash has a solution in the form of "movie clips". Essentially these are symbols but with their own timeline independent of the main timeline - effectively a frame-by-frame or tweened movie within the movie. Using the Insert New Symbol> Movie Clip option you can create a frame-by-frame version of the bird flapping its wings once. You can then replace the skywriting plane with instances of the movie clip and, because movie clips loop by default, when you hit Play you'll see the bird flap its way along whatever path you draw for it.
Repeat the process a few times and you can produce a whole flock of independent flapping birds - and still keep an amazingly efficient end movie size. With multiple tweens, layers, motion guides and movie clip instances we've come a long way from those first manual frame-by-frame animations. But have we come far enough? Using these basic tools designers have produced the vast majority of the amazing Flash animations that you can see out on the Web - but few of them would say the job was easy.
To begin with, Flash's whole approach to animation is amazingly awkward. It's difficult to know where to start. The method of setting up a tween has been changed repeatedly but beginners still struggle to get the hang of it, let alone realise its full potential. The layering system is even worse - even if you remember to name each layer as you create it, it's easy to select the wrong one with disastrous consequences. Motion guides meanwhile are so non-interactive and non-intuitive that only a fraction of users will have investigated them. Finally there are movie clips. These are essential to advanced work, but their drill-down nature means that they are so hidden away that most users simply don't know that they exist. Even worse, when you put each flawed feature together and try to read what is happening in an animation from the central Timeline, you've got almost no chance.
It's almost as if the interface has been designed to hide Flash's animation power. More importantly, much power is missing. It's impossible, for example, to manage the different elements of a tween - motion, size, rotation, transparency, colour and so on - independently of each other. Even worse is the limitation on what effects the tween can produce. While you can get a line of text to follow a motion guide, for example, you can't automatically produce true text on path effects where all words and letters are correctly angled to the path. Most limiting of all is the lack of any 3D effects. There's no way to automatically create a simple revolving logo effect, for example, instead you have to laboriously create it frame-by-frame.
Suddenly the hi-tech Flash on which the design-conscious Web is built is looking decidedly old-fashioned and under-powered. These concerns become even stronger when you take a look at the actual SWF files that Flash produces and that the end user downloads. Use Flash's File>Import command to load the simple motion tween of our rocket, for example, and you'll find that the tween information just isn't there any longer. Load the flock of birds' SWF and you'll find that not only are the tweens missing, but so are the layers, motion guides and everything apart from the first frame of our movie clips!
All information apart from symbol information is discarded in the final SWF.
So what are we actually left with? The symbols have come through, but otherwise all we have is a series of consecutive, single-layered keyframes. In other words it's not just theoretically possible to produce any animation by placing and transforming symbol instances on a frame-by-frame basis - that's exactly what Flash does! It's certainly a shock that such an apparently advanced technology is built on such a crude system but, with a little more thought, it becomes clear that this simplicity is actually the secret of Flash's success.
To begin with this simple format is inherently efficient. It's not as elegant as just storing the start and end tween properties - and it destroys all editability when working with imported SWFs - but all that needs to be stored on each frame is each symbol instance's location, size, alpha and so on. By removing everything apart from these absolute basics, the file size is small and so too is the player needed to view it. Just as important, the SWF's strictly serial, frame-by-frame nature enables "streaming" which allows the file to begin playing before it has finished downloading.
Building on these core strengths Macromedia has grafted on a level of programmability that has taken Flash into completely new areas of interface design and even application development but, underlying it all, SWF remains a simple, frame-by-frame, vector video format - that's why Flash files are called "movies". Many would argue that the more modern, integrated, object-oriented SVG would make a better backbone for the design-intensive Web, but historical accident and Macromedia's vision has meant that Flash's cartoon-inspired movie format has got there already and is letting users achieve what they want today.
Macromedia has successfully repositioned Flash as an all-encompassing Web platform, but its animation capabilities remain central to the mission. Having explored the pared-down SWF format though, it's now clear that Flash's system of tweens, layers and motion guides are only used in the ongoing FLA files and are discarded when it comes to final output. With its tweens, for example, Flash has start and end keyframe properties and can simply use the number of intervening frames to work out the co-ordinates, alpha setting and so on that need to be recorded for each symbol instance on each frame. In the same way motion guides simply help control final placement, while layers control stacking.
But if tweens, layers and motion guides are actually just workarounds for working out the necessary frame-by-frame symbol information to store in the final SWF, this opens up the field for others to come up with their own schemes. The simplest solution is that offered by the major drawing packages such as Illustrator, FreeHand and Canvas which simply map pages or layers to output frames. With no timeline these are necessarily crude and certainly aren't a serious alternative to Flash - but they do offer strengths for certain animation effects. By creating a blend, for example, and then releasing this to layers you can automatically create shape-shifting effects. Corel RAVE goes slightly further and offers multiple live blend-based effects while the latest Freehand and Illustrator provide the all-important symbol support.
For these traditional drawing packages, animation is clearly a grafted on afterthought, but there are also dedicated alternatives. The first serious competitor to Flash was LiveMotion which takes a completely different approach to animation based on Adobe's professional compositing software, AfterEffects. To begin with all objects are automatically listed in the Timeline so there's none of the confusion (though still some of the complexity) caused by layers. There's no need for motion guides either - just drag on an object to automatically create a path. More importantly LiveMotion offers an object and property-based approach so that it's possible to precisely and independently control all features such as size, rotation and opacity along with any applied formatting such as bevelling and fills. With AfterEffects 5 itself it's even possible to control Z-position to create true 3D animation effects for SWF output.
LiveMotion produces its animations by controlling properties over time.
Generally the level of animation power and control offered by LiveMotion leaves Flash standing - but there's a serious drawback. Many of the effects, such as animating a changing bevel over time, simply don't translate to the SWF's underlying symbol-based system. The only way the effect can be produced is as frame-by-frame bitmaps which has disastrous effects on file size and playback. Adobe certainly isn't highlighting the fact, but ultimately it's likely that LiveMotion isn't really intended as a Flash authoring package at all, but rather as an SVG editor where the program's property-based approach will suit its intended output format.
Another alternative approach to Flash animation is provided by SWiSH 2 (www.swishzone.com). Again SWiSH scores over Flash in that every object or group is automatically placed on its own row in the Timeline and, as with LiveMotion, you can also now create motion effects by simple, interactive dragging. What really makes the difference though is SWiSH's effects-based approach to animation. Where Flash offers its basic motion tween, SWiSH offers a range of over 150 effects grouped into 18 main categories. Some are worthy if unexciting, such as fade-ins and outs, but others, such as the ability to apply 3D spins or to explode compound objects, can really bring your work to life.
SWiSH produces its animations by applying customisable effects.
Along with the impact of the end results, the real strength of SWiSH is that the effects are designed to work with the SWF format not against it. If you bring the exported SWF into Flash, for example, you'll see that the exploded text effect has been built up by converting every letter into a symbol and then positioning, rotating and scaling it while applying appropriate colour and alpha changes. Theoretically you could do the same with layers, motion guides and tweens, but it would take hours - and if you had to change the text it would mean starting again from scratch.
SWiSH's effects show just how weak Flash's motion tweens are, but its automated approach makes it unsuitable for creating freeform animations. Another package though manages to outdo Flash for frame-by-frame animation by going back to the drawing board. Toon Boom Studio (www.toonboomstudio.com might sound like a joke, but it's a very serious piece of software based on the same animation system the professionals use.
Toon Boom Studio goes back to the drawing board for both frame-by-frame and tweening-based animation.
As such its approach is built upon the "cel", named after the sheets of transparent celluloid on which animators produce their drawings. The difference is that in Toon Boom Studio every cel or drawing is automatically stored as a separate file. Using the tabular Exposure Sheet you can then set up which cels are onscreen at any time, efficiently re-using existing cels for example to create the effect of a flapping wing or the different mouth shapes involved in lip synch.
That's only the beginning. Toon Boom Studio has also completely rethought automatic tweening-style animation with its separate Scene Planning Mode. Here it uses the metaphor of the "peg" which again derives from the traditional animator's technique of pegging multiple elements together, so that a flapping bird is actually made up of separate body, wings, head and beak cel sequences. Once the multiple elements have been clipped to a peg you can use the Motion Path, Scale and Rotate tools to interactively drag the peg to set up tweened animation effects. You can also independently control the progress of each tween effect with the advanced, graph-based Function Editor.
By combining motion and scale effects you can simulate an object moving realistically through 3D space - but again Toon Boom Studio goes further. Using the Top and Side Windows you can position objects in 3D space and their size will change accordingly. More importantly you can create a true 3D Motion Path for your peg and suddenly your bird will be flapping realistically through a realistic scene. Most impressive of all, you can also treat the current point of view as a camera peg that can also be moved through the scene! The creative possibilities are amazing. Now you can set up a lip-synched character and move her realistically through the scene while you pan and then zoom in on her face as she's talking!
It's amazing animation power and using Toon Boom Studio you certainly feel more like a Disney director than a child with a flipbook - though ultimately both are built on the same simple illusion. More to the point, if you open up the Toon Boom extravaganza you'll find that it too is built on exactly the same simple, frame-by-frame/symbol-instance SWF format as our first rocket test. The only difference is that, as every cel has automatically been transformed into a Flash symbol, Toon Boom's maximum impact is produced with maximum efficiency. Toon Boom Studio proves that Flash's animation capability is underpowered not because of its simple, cartoon-inspired roots but rather because it didn't fully follow the logic through.
Of course Macromedia has had other things on its mind in its drive to make SWF an all-encompassing Web platform and part of this push has involved deliberately downplaying the format's humble, cartoon-based, vector video roots. Hopefully though the developers will still make the time to tackle Flash's animation failings. After all, Flash's initial success came from its unbeatable ability to bring the Web to life - and much of it still does today.Tom Arah
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]