I may as well start with the most important things to know.

• The purpose in any kind of animation or movie (not just Flash) is to tell a story. Art, sounds, cool effects, animation, etc. are all just there to tell the story more effectively. A crappy looking animation with a good story will be far better than a great animation where the story was an afterthought.
• For games, the point is to be fun. Design a game which would still be fun if the graphics looked like "pong". For games, graphics are a little more important than animations, but only because it creates a more immersive world for the user. For example, controlling a "character" which appears to be running and animated properly seems to the user to be much fancier than controlling a big red dot, even if the actual game play is exactly the same.

These principles were created by the Walt Disney studios in the 1930s, and they apply to all animation types. Don't look to my own movies to see examples, as I haven't really applied these yet, at the time of my writing this (except in Cheney Power, to some extent). These principles, when followed, make a huge difference in the perceived realism of the animation.

1) Squash and Stretch

This is most useful in "cartoony" animations, but it applies to all types, to various extents. Objects "squash" or "stretch" depending on how they're moving - everything from facial animations to characters. Imagine a fast-moving "stretched" rubber ball which "squashes" when it hits a wall, or other objects changing speed, while keeping a constant volume. (The flattened object isn't any larger than the stretched one.. total volume must be maintained, or it looks weird.)

2) Anticipation

All action requires a reverse action. Someone throwing a punch first moves their arm in the opposite direction. Someone jumping first compresses themselves down before leaping up. Anticipation shows what's about to happen. There's is also normally a reaction, IE: anticipation -> action -> reaction. It sounds obvious, but it helps to actually know about it.

3) Staging

Staging is the overall composition of a scene, as it relates to telling the story or action currently happening. The location of characters, the background, etc should all help to show the attitude or idea of the scene. Too many things happening at the same time, or backgrounds which are more interesting than the characters you're supposed to be looking at can detract from the scene. Every scene has a point, which is to communicate something; something has happened, is about to happen, or an idea is being expressed. What's the best way to show it? What's the best "camera angle"? (Okay, there's no literal camera in Flash, but you can decide from what perspective to draw a scene)

4) "Straight Ahead" and "Pose to Pose" Animation

Straight ahead animation is animated in order, as you go along. This is fastest, and good for "action" scenes where a lot of stuff is happening.

Pose to pose is more planned, with key drawings or rough outlines throughout the scene. This can help to keep everything timed, orderly and choreographed. In traditional animation you'd draw the "key" poses of a character first, at their most exaggerated points, and then draw in the in between's. Of course in Flash you're not drawing every single frame, you're (hopefully) moving character parts around like a puppet. I found this method useful but somewhat time consuming in Cheney Power; I created a "temp" layer which just had rough outlines at certain times, so I could figure out what goes where, and when. Both methods have their uses.

5) Follow Through and Overlapping Action

If a car slams into a wall, does it just stop there in an instant, with all it's pieces, or does it bounce slightly, with the pieces continuing to move? Follow through is the idea that objects don't just stop completely. If person A head butts person B (why are my examples so violent?) than person A doesn't just stop as he hits person B, he continues past the point of impact.

Overlapping actions are those small actions which don't move at the exact same time as the main action. For example, the antenna of a radio controlled car flailing around. It doesn't move at the exact same time as the car. When lots of separate objects move at the exact same time, it looks bad.

6) Slow-in and Slow-out

When you throw a ball in the air, it slows down, stops, and speeds up on return. When a truck comes to a red light, it gradually slows to stop. Even when people move, we don't just throw our limbs around like pneumatically powered robots, we speed up and slow down, although not as dramatically. In Flash, we use easing, as was mentioned in the guide.

Also notice that the ball doesn't "squash and stretch" here, like in the previous example, so it looks less realistic. (even though in reality, you wouldn't see any compression)

7) Arcs

Nothing moves in a straight line; most notably, human limbs. This is probably less important to know for Flash animation, as you'll mostly be tweening movement around an axis of rotation, but it's useful to know that pretty much everything in reality moves in an arc.

8) Secondary Actions

Secondary actions are the icing on the cake of a regular action, which makes the whole thing seem more alive and real. For example; someone running with a basket of eggs, which bounce up as the person moves down, and vice versa. Or, a dog running, with it's tail and ears flopping around as if they had a will of their own. Without secondary actions, objects can seem stale and overly solid.

9) Timing

Having action occur too slowly is boring, but too fast, and it's hard to register what just happened. Faster is almost always better, and also, new animators will seem to animate everything slooowly.. so if in doubt, go faster. (There are of course times when slow animation is appropriate)

Timing is about more than just animation speed - the time between key actions or poses changes the feeling. How long someone pauses before throwing a punch (again with the violence) or reacting to a sudden sound can change the feel of the animation.

10) Exaggeration

To shamelessly quote director Mark Dindal, in the commentary for The Emperor's New Groove, as quoted in The Art of Cartooning with Flash, when talking about this very topic: "I like to take the approach of making some bold choices because things fail more often from not going far enough than from going too far." Remember that.

Look at that bouncing ball again.

If you were animating that, you'd think that the "squashed" frames, which you only see for half a second, are far too exaggerated. The ball almost doubles in width! But in animated form, it looks fine. You can't hint at things in animation. This isn't a black and white movie we're talking about. It's a cartoon. Of course, this kind of "cartoony" animation is probably less desired for a a serious animation, but the same idea is true. Is there a bad guy? Is he evil enough? Are you suuuuure he's evil enough? Is that speeding car driving fast enough? Exaggeration is good! Just don't get... nah, never mind. Get carried away.*

*within reason.

11) Solid Drawing

Just like movies and plays, cartoons require the viewer to suspend their disbelief. They know it's not real, but they decide to pretend that it is real. But there's a limit to how much disbelief can be suspended.

A solid drawing looks real, in so much as it's properly formed and proportioned, and there aren't any weird holes or strangely placed limbs. Solid drawing is more important for traditional animation, as the character has to be redrawn every frame, and still look like the same character, but it still applies to Flash.

12) Appeal

Every character should have appeal. If you just plain don't like a character, and can't stand looking at it, redesign it. Even the bad guys should have some sort of appeal.. whether it's their downright evilness or something more clever, there shouldn't be a character you just don't care for. It's about good character design. It's fine if you or your viewer "hates" a character - not all characters have to be likeable, but they should at least be interesting to look at.

I already mentioned this in the guide, but it really belongs here. Although originality is key, there's nothing wrong with learning from the greats, or getting inspiration from the works of others.. in fact it's highly recommended. Everything except for other Flash should inspire you. When Flash tries to use the look of other Flash it creates that stereotypical, uncreative "Flash look". An endless cycle of copies. Instead, try to look at things like live action movies, 3D animation, and real life as inspiration. Remember that really, what you're mimicking is reality. The principles of animation are the culmination of people looking at reality and finding a way to find principles or rules to exaggerate things for animation. No one told them the "rules". Use the information gathered by animators past, but also remember the goal. Look at a street light at night with snow falling through the beam and wonder "how would I do that in Flash". Look at the passing reflections of car lights in a bus window and wonder "how would I get this feeling in Flash".

Graphics are great. Graphics are fun. But just like story is more important than graphics, so is sound. It's odd that a graphical medium is so dependant on sound, but that's how it works. Imagine watching a good story, with good animation, but the voices are computer generated or absent. Or maybe there's really annoying or scratchy music, or some other audio bug. Where as bad animation can be forgiven with a good story, lousy audio can make you cringe.

That's not to say graphics aren't important.. far from it. This is a graphical medium, after all. You saw the difference between the un-eased bouncing ball, and the eased one with squashing.. and it didn't even look anything like a ball.

Sound is like the engine in a car. Without it, the car is frustrating to drive, and by drive I mean push around. You might not notice the sound, but when it's absent or bad, you will notice, and so will your viewers. Graphics are the outer shell of the car. As long as you have an engine, the outer shell can make the difference between a rusted station wagon and a BMW. The story.. well.. that's the concept of the car itself. With no story, you have nothing. Just a bunch of parts sitting in a pile. The sound drives the car. The graphics make it look nice. The story is the car.

Since the story or idea behind any movie or game is far more important than oodles of technical know-how, these books assume you already know "how to do stuff", and are more about theory and/or style. There are only 2 books instead of a giant list because I'm not a huge fan of spending hours reading instead of doing.

For animation: The Art of Cartooning With Flash
Although I'm not a fan of the "Looney Tunes" style animation and humour, this book does a great job of explaining both what makes a good Flash, and some handy animation principles. I read this before making "Cheney Power". The principles of animation are also covered in this book.

For game design: Chris Crawford on Game Design
A useful guide to the psychology of games and what exactly "makes a game fun", Chris Crawford on Game Design is also an interesting read for anyone in the field. Lots of opinions and nonsensical boasting (why was his self-described "well designed game" a total flop?), but still a must-read for the actual insight. He also analyzes problems with the games industry, such as how new multi-million dollar behemoths built by a small army over a period of years (such as "Doom III") can still end up being not actually fun, compared to "old-school" games which were often built by half a dozen people with no money.

Back to the Menu, @ the Top