«
»

Flash Animation

The basics of cartoon animation in Flash

09.18.07 | 4,143 Comments

Flash cartoon having crached from the top of this page

There are more than a few tricks to animating in Flash, and a lot of them has to do with character design and how to make Flash do the animating for you. But some have to do with the way you handle frames.

The traditional approach when animating is to draw the most important keyframes first. These would be the start of the animation, important turning points and of course how it all ends. When this is done one of your low paid apprentices (you’ve got one, right?) do the “in-betweening”, drawing the frames that go in between the actions.

Important frames are drawn first, then the others ar filled in

Even if you don’t have a bunch of people working for you can still benefit from this practice by drawing out the important bit and then filling out what goes in between them. Because Flash is so flexible you can draw around your keyframes and decide how many frames should go between each one. This is the most common way of determining how fast something goes, by letting something move a lot in the distance between two frames makes it looks like its moving very fast.

Squashing and Stretching
It’s about time we started talking about actually animating things.

Sketch beeing pushed off a cliff.

I feel i need to tell you this; I refuse to do the thing with the bouncing ball. Every Flash tutorial about animation uses the dead boring example of a ball changing shape as it bounces across the screen. There has got to be another way to describe how cartoon physics work. I’ll try another variation.

Man falling. Remember to imagen you character as a 3-dimentional object so you can change his mass.

Most cartoon characters and objects are made of rubber. Well, ok, they are made of ink, paint or pixels, but they act like they are made from rubber. They will change shape when force is applied but they will not change mass. This means that if we push a character of a cliff (let’s!) and the impact flattens his body out, then he will have to become much wider as not to loose volume.

Look at this animation:

The ball falls on the cylinder, compressing it and itself and making them both wider and shorter. The cylinder then springs back and the ball is thrown of. Notice that the cylinder does not stop moving when it is back to its original shape; it keeps on going upwards, getting thinner as it goes. This is called “follow thru” (we will talk more about that in the article following this one), moving the character or the object all the way thru a motion as far as it goes. This bouncing would stop eventually, of course, but here the cylinder puts in a little more power than what goes in to compressing it so it keeps on going.

A cylinder and a sphere chrshing in to each other. Notice the shange of chape and the preservation off mass.

Now, I’m not saying that you should be sitting around counting the volume of the cylinders, spheres and boxes that make up you characters and calculate the change, I’m just saying that your character will look a lot more real if it can be animated without loosing it’s size. This will also make your job of drawing much easier as you character springs back in to its original shape without looking like its “morphing”.

Flash cartoon having crached from the top of this page

Not everything is made of rubber. Some things – like very heavy things – will not bounce and will not change their shape very much. Just use your brains. A huge weight will crash and possibly make a hole in the ground, and will not compress when hitting something because it is much more solid than for example a character. Fragile things will brake when force is applied, not bounce or bend. Well, you get it.

Heavy, had things dont squach and stretch much.

As soon as the appliance of force stops your character or object will start to get back to its original form. There are a number of ways this can happen (picking itself up, shaking itself etcetera) but in general it happens very quickly and by itself.

Ok, so maybe I couldn’t avoid the ball example. Sorry about that. Next time we will look at some of the other principles of animation. See you soon.

4,143 Comments