Two years ago I was asked to write a document that could guide an overseas studio in their work on a show. Up to that point the series was developed by a very small team where I was informally the Production Designer and Director as well as formally Character Designer, Animator, Sound Designer and Editor.
The text below was an attempt to convey my thought process and methods in hope that the service studio would be able to match the quality and style of the first few episodes that I had already made.
Prior to writing this document, I hadn’t verbally formulated some of the approaches, mentioned in it.
Even though it was written for a specific project, I think it covers many topics that are of general interest and can be applied to any Flash animation.
This is why I decided to share it with the EDAP Tools users.
Edit: 19 Aug 2019. I just received permission from the producer of the show to publish a collection of favorite shots from the series, so I’m adding the video as an illustration to this post.
This is not supposed to be an extensive study on the specifics of digital vector cutouts and how they differ from hand-drawn animation in regards to the application of animation principles, but there are such differences and I try to mention some of my findings.
The text is written in first person as it literally shares a personal approach and experience – a variety of techniques and methods, refined over many years to get the best results.
How would you know that you have achieved your goal?
When you hand a SWF to advanced users of Flash who work with the program all the time. They realize very well it is a pure Flash file and they tell you they have no idea how it’s been made.
In hope that this will be a useful resource and will help colleagues create better, more convincing, cinematic and organic-looking animation.
How to get organic movement and cinematic look with digital vector cutouts in Flash
Table of Contents
- How to think about the characters and their world
- Pacing & interaction with the VO
- Progression, rhythm, jazz
- Gags, improvisation, age specifics
- Animals studies
- Flash & EDAP tools
- Character animation
- Camera & editing
- Further reading
1. How to think about the characters and their world
The most common problems with poorly done Flash animation are floaty timing (as if under water on the Moon) and body parts moving independently of each other, often to a point when the figure is decomposing on stage.
These problems come mostly from the lack of vision in the minds of the animators. They let the medium (Flash) guide them and dictate timing (long Tweens with 0 easing), flatness and break up.
Another common and very obvious ‘feature’ is vector squash & stretch, which looks terribly unnatural and plain bad.
To improve, the shift needs to happen in the head of the animator!
We need to start thinking of the characters as organic creatures, where the cutouts are only flat representations of voluminous body parts, all of them always interconnected by an internal skeleton and muscles.
This way of thinking should not be medium specific and restricted in the flat plane of the screen. It has to be spatial and 3‑dimensional, without an attempt to overdo it.
When we make this thought transition, cutouts and tweens start working for us, rather than us being passively led by tweens and cutouts.
Poses need to be defined by clear silhouettes, be specific for the given character and imply its perceived weight and interaction with its environment.
Transitions between poses should also be varied, never ‘melting’, never losing volume, never disassembling.
Movement has to be organic and total – based on shifting of body mass and flow of energy, line of action, etc. where no body part ever moves just by itself, i.e. a hand gesture requires a slight compensation and shift of the whole body mass.
I only break this rule if I see an opportunity for a little Chuck Jones moment – a visual gag where stillness and isolation of a gesture can be accentuated for comical effect.
Dosage, of course, is very important. Small actions require small counter balance. Subtlety comes from variation of amplitude and timing.
Nothing too extreme here. We’re not talking about real character development in the sense of feature film, but before starting to animate, I try to think of a word or two that would define the character.
For example: curious, cheeky, fast, dreamy, friendly, easily scared, pompous, hungry, a little stupid, etc.
Nothing concrete and it doesn’t need to be very prominent, but this way of thinking can add a little extra depth and subtlety to the behavior and make them appear internally motivated rather than puppets bouncing around.
It also has the potential to assist with the mood of the scene.
Thinking about the background as a part of a larger infinite ‘world’ allows to stage action better and move elements around to open up the space and produce compositions that look good through the ‘lens’, while maintaining a logical and consistent map in the mind of the viewer.
What I mean is that I often move little things around from shot to shot – shrubs, rocks, trees to frame a close up or a wide shot better and all this is completely unnoticeable to the viewer.
We need to have enough room for the action and sometimes I need to expand the space or develop a corner adding more detail than the original background had or needed, so that this corner can endure 20 seconds of screen time center stage and not just as it initially was meant to be in the far middle ground away from any points of interest.
The cinematic feel comes partly from the way camera tracking works, going in and out, reestablishing the environment and leaving the impression that we can indeed look around and explore.
Scaling of characters among themselves and in relation to the background does not need to be realistic, but has to be convincing.
It needs to accentuate the size differences between the animals and get context from the environment.
The lack of realism brings a nice fantasy touch, but a large animal should always be visibly larger than a small one.
Scale-references are used to get size across – i.e. leaves, flowers, trees and so on; also perspective diminution.
Compositionally very large animals can have proper extreme close ups, where we only see the head or part of it and they tend to appear quite big and heavy within the environment. (Weight can be additionally accentuated via camera shake and sound effects when the animal walks, etc.)
Very small animals rarely will have a close up of this kind – they will appear closer and bigger, but will always be in a shot that shows their full body and near a scale-reference, such as a flower, indicating that they are bigger, because they are closer.
Relative scaling of animals and in relation to their environment should always be consistent even when they don’t appear on screen together.
The viewers build and maintain a mind map and this should never be challenged or brought to confusion. (Of course, unless we want to do it for a good reason.)
2. Pacing & interaction with the VO
The general pacing of the video comes from the VO/narration and the interaction between the adult and the kid.
The VO leads the progression of the story and visualization has to be quite literal because large deviations will not be perceived as funny by the very young audience.
The VO leads us how to progress, but it should appear as if the animals are leading and the VO is only commenting, providing information or responding. (Unless sometimes for comical effect we don’t decide to break the fourth wall.)
Whenever I feel that the VO is pressing me to go too fast and I need more time to gracefully get out of a position, settle and anticipate the next movement, I cut the audio and insert enough silence to articulate the movements the way I want.
It can be done in a very non-destructive manner at the logical pauses between sentences and statements without breaking the narration and filling the silences naturally with actions or sound effects.
Final videos end up a little longer than initial animatics, but this is not a problem since the platform of distribution does not require complete uniformity.
Interaction with VO
The tone and intricacies in the VO delivery suggest various emotional states which can be used to enhance the impression that the animal and the actors are interacting.
In some cases the animal may do something ahead of a raise in tone and that will appear to have caused the excitement in the VO actors.
In others the animal may appear to be responding to a call, invitation to come closer, etc.
If timed well, these interactions appear to be very convincing.
3. Progression, rhythm, jazz
Swing bounces and rolls in the most natural way possible and it evokes natural rhythmic response from almost everyone. People start tapping their feet and kids want to dance.
Jazz works well with animation.
So as a musical foundation of the show I chose a jazzy tune.
In theory it should provide some kind of a rhythmic framework and we should always be able to fall onto the 12-beat and start a swing dance party.
The guy with the double bass is always present, silently plucking those strings outside of the frame.
In the whole history of animation there has never been a shorter, more efficient path to delivering happiness than a double-bounce walk cycle.
We should not overuse it as the show is not a musical, but it’s always fun to sneak in a double-bounce once in a while.
Of course, swing cannot cover all situations. Certain moments require a dreamy flute, a sunny reggae or a dramatic flamenco.
Rhythmic and tonal progression
It is quite appropriate to think (and talk) about animation using musical metaphors.
Crudely speaking all animation acting is choreography as we squash and stretch time to accentuate certain aspects of the movement and skip or muffle others; to favor certain poses and silhouettes while never fully staying still. (For a cartoon character, stillness equals death.)
It’s exactly like in music!
Even small three-step progressions are very well detected subconsciously by the viewer. Ding-dang-dong. If you can sing like this while the character reaches, picks an apple and brings it to his mouth, then you’re resonating with the visuals and you’re getting musical pleasure out of them, because you’ve not only noticed a pattern, but you are predicting the next step. The viewer is in sync and excited.
This works on biological level. It’s as primal as tribal music and heartbeats.
I tend to often build up in threes like this: one-two-three, ding-dang-dong, double antic, change of pose, overshoot, settle.
Timing of these progressions has to be varied so that they don’t become obvious patterns and appear monotonous and mechanical.
And just like in music you can build up more energy toward a crescendo and then dive bomb in the lake, crash in the tree-trunk and resolve with a micro climax in one way or another.
Audible music does not need to be present for animation to be musical.
4. Gags, improvisation, age specifics
Gags should be very simple, not overused and should surprise the kids. If there are gags everywhere all the time, they stop being funny.
Silly cartoon comedy works well for this age group. A cross-eyed face, a clumsy fall, a missed bite resulting in a small accident and silly smile.
Nothing too wild or violent, but slapstick cartoony in the Golden Age tradition and well-built so that it reads.
Kids would detect very obvious mistakes as well: Say, in the case of a very familiar animal such as dog, the narrator says ‘… with a tail’, but the animal points toward his nose. Kids will know the animal is stupid. The animal will then correct itself and wag the tail. This will produce a laugh.
I tend to let myself change my mind if I see a pose, which is opening the possibility for a little funny detour.
It could be an accidental mistake while posing or just a potential idea for an alternate take than the initially intended.
These are worth exploring as they can add spontaneity and freshness to character behavior and are engaging the audience on micro level.
Generally gags need to be very clear and very simple, but sometimes an opportunity appears for a two-layered gag which parents watching with the child might enjoy as a little wink to them. An example of such would be the ‘pool table’ apples gag in Albatross.
5. Animals studies
I have always been interested in animals and often watch wildlife documentaries for inspiration and pleasure.
I also have pretty good structural and dynamic knowledge of animal anatomy.
Usually I can draw any animal that I know without reference in cartoony or semi-realistic styles in any pose imaginable.
Still, apart from the most obvious ones, like cats and dogs, that I know really well, for all the rest I go to youtube and look at different videos to get a sense of the essence of some behavioral traits.
After a day or two what impressed me the most stays in my mind and if I see a chance I try to incorporate these mannerisms in the animals’ performance.
This makes them specific and also adds educational value as kids at this early age have excellent memory and are very observant of small details.
6. Flash & EDAP Tools
For most of the work I still use Flash CS6 (January 2019). I don’t like the UX changes Adobe made to CC/Animate, how shortcuts don’t work if a particular area is not focused, the performance drop and general unresponsiveness.
Electric Dog Flanimate Power Tools are crucial for being able to achieve this kind of complexity and fluidity of movement.
We have been developing the set for many years, tailoring all the tools to allow better, easier, logical handling of very complex rigs.
The main philosophy behind the tools is that they are there to assist and make the life of the animator easier, but never force him how to do things.
Smart Magnet Rigs are flexible, joints are not firmly pivoted, so one can really stay focused on the poses, silhouettes and movement. The joints are magnetic – always there for the animator whenever he needs them.
The set provides highly efficient, specialized tools for advanced Flash users, covering a broad range of problems in ways that ‘out of the box’ Flash/Animate does not address or has poor clunky solutions, based on ‘programmer’s logic’, not on good animation practices.
7. Character animation
All principles of 2D animation should be applied to vector cutouts.
I tend to nearly always do double antics – starting softly in the direction of main movement (basically anticipating the anticipation) then antic in the opposite direction and then do the main action (toward next pose, actually toward the overshoot).
Action itself is often shorter than the antics and the overshoot, but I rarely pop.
I nearly always overshoot and often settle with a double bounce.
In most cases tend to favor the ‘second’ key with an ease out (+100).
If the tween is longer than 4 frames it may require a custom ease, often with specific overlapping action. This can be done by splitting the graph for the tween properties – for example, delaying rotation while moving all parts together. In this way you achieve some drag and varied speed toward the destination.
Stretch OR Squash
This is specific to vector. Only squash (scale vertically), but do not stretch. If you do it fast, the loss of volume is not noticeable. Never (except super extreme situations) squash or stretch heads.
Suqash AND Stretch
This is achieved by building tension within the pose; potential energy is compressed and prepared for release by squashing and stretching the silhouette without actually distorting any body part, just like a spring.
Hesitation and mistakes
Hesitation and ‘mistakes’ add subtlety and complexity to character behavior. It appears that the character acts from within.
Direct pose-to-pose along a straight path always looks terrible. Not even robotic. A robot has to have robotic character. Direct animation is just bad.
Staggers are a very efficient way to convey strain, giggle or any other progression that requires a zig-zag graph. Stagger Tool in EDAP Tools makes staggers easy to produce.
Directing or detracting attention
The animator is an illusionist.
He must get viewers to look where he wants them to. On one hand, by starting with a blink, you use this to attract attention toward an important action which viewers should not miss – “Look at me!” – then move it flowing through the pose to follow the action.
On the other hand you often want the viewer to be distracted and look somewhere else while you do a trick. So you do just this – you start with moving an unimportant body part more actively than the one you actually need to move and that movement gets lost to the viewer, because of the successful distraction.
Also you can direct attention with the eyes of the character. Looking in a specific direction makes the viewer think that the character has intentions or something may come from there.
Mass and speed
Along with the little intricacies specific to the particular animal, the implied body mass and temperament should be fairly consistent throughout the performance.
With body mass in mind, speed of actions should be varied to avoid mechanical movement and aim for the musical timing described earlier.
Environment and interaction
Movement in air, in water, on the ground, in mud, on the Moon, etc. is different for obvious reasons.
Without the background and effects, it should be crystal clear if there is wind, if the character walks on sand, swims or slides on ice.
Interaction with the terrain is very welcome.
Interaction with the letters in the animal names should not be overused.
It has to stay and work as a gag and surprise the kids rather than become the norm.
It is technically more difficult and is only funny if they don’t always expect it.
8. Camera & editing
Camera work and editing hugely contribute to the cinematic look of the show.
The establishing shots and atmospheric effects alongside with a more relaxed introductory pacing, the perceived vastness of the environment and parallax effects create the impression of much higher production value.
The camera establishes the space and then follows the character. Character should always lead and camera should always follow so that it appears natural.
I tend to do all kinds of animation tricks to the camera, such as antic and overshoot for pan, crash zooms, stagger zooms, slow-in jump slow-out (skipping the middle); long moves with ease in and out, etc.
Close-ups often have blurred background with fake bokeh to simulate shallow DOF, long focal length and wide aperture. This also brings better clarity.
Editing should serve storytelling.
I’m trying to cut and change framing in the most invisible and unobtrusive manner. (Except when I want it to be visible for dramatic reasons, but it should not be overdone.)
Working with only one angle is a little tricky, but after a while it proved to be very viable and if done well, the audience doesn’t even realize the angles don’t change.
There usually is only one frame where a cut ‘disappears’. It is the frame where the cut naturally falls into the action and becomes a part of the storytelling process.
A frame earlier or a frame later and the screen ‘blinks’.
Cutting or recomposing during action is encouraged, but it has to be done well.
Sometimes I use fade to black; sometimes I use white ‘blinding’ to soften a transition and sometimes at the end I might use an iris fade.
I tend to reuse splashes, ripples, sparkles and so on as much as I can, but often tweak them to match perspective or timing.
Often there are also light beams and particle effects which give nice atmospheric depth and life to the scene.
Lens flares and fake bokeh or a little stain on the camera lens add richness to the visual experience and texture, light and color variation to the world.
Wherever suitable I also add some fake parallactic displacement.
Audio effects are mostly stock clips which I tend to add after finishing a section of animation, but sometimes I choose the sound first and time the action to it.
Such case can be an actual ding-dang-dong progression with audio or a ‘Sque-e-eak!’ made by a bird.
It’s important that sound effects don’t clash with or overpower the VO. They should support the action and only be prominent during VO silence and when the action is tightly synced to audio.
Some ambience such as wind, shore sounds or frogs at a distance always enrich the soundscape and are very welcome as long as they stay secondary.
11. Further reading
All good books on the principles of traditional animation such as:
Preston Blair’s Advanced Animation, first edition. link
Eric Goldberg’s Character Animation Crash Course, esp. the chapter on breakdowns.
Even Richard Williams’ Survival Kit, which in my humble opinion tries to prescribe too many concrete solutions to non-existent problems.
A few years ago I tried to outline the technical side of a good Flash animation workflow in a way that does not repeat what was in the How to use Flash books. It is available here
Well… Thanks for reading!
In hope that there was some new and useful information in this text; hoping that it will help you make better, more organic and cinematic Flash animation.∎
thanks! very important information , thanks!