The basics of cartoon animation in Flash

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.

The secret of tweening: When and when not to

One of the biggest problems with animation in Flash is that it’s so easy to cheat. You’ve got motion tweens and shape tweens and timeline effects and the Spaghetti Monster knows what else that all books on Flash demonstrates as “how you animate in Flash”. But these things are just tools; little helpers to speed up work, the bulk of animation (and especially character animation) has to happen with your hands, drawing till you bleed (well, almost). Today we are nevertheless going to cheat, we are going to look at how you use tweening in a smart way.

Motion tweening

Motion tweens are for moving objects such as movie clips and groups across the screen, or rotating them or similar. They are not appropriate for moving linked parts of a character (like you often see when people use ‘cut outs’ to animate characters) because real arms and legs change shape when they move and so does almost every other part of a living thing.

A birds wing can't be tweened because it changes shape

However, motion tweens can be quiet useful for moving dead things around, especially if used with a motion guide or with easing. If you decide to move parts of a character with the help of motion tweens, remember that living things seldom move in straight lines. This arch shows a characters head moving:

Heads and other parts of living thing moves in a non-linear way.

Use a motion guide to replicate this if you are using a motion tween to move the head.

Motion tweens can also be used to move characters around the screen if they are simultaneously being animated. A walking cycle:

Walking cycle in a movie clip

…(for example) does not in fact move the character anywhere, it just animates the legs, so using a motion tween on the movie clip containing the walking character or (more commonly) tweening the background might work.

Animated clip beeing moved using a tween

But it’s generally easier to move the movie clip key frame by key frame to get the motion in sync with the steps.

Shape tweening
Shape tweens are used on shapes (oh really?). They work best on simple shapes with few anchor points, try to use them to animate complicated shapes and you will be wasting time. The time it takes you to place and adjust all those shape hints will be triple the time it would take you to just draw the thing.

In this animation the simple appendages (tentacle thingies) where made from two motion tweens with shape hints. The trick is to use as few shape hints as you can, the more you have, the more there is for Flash to misinterpret.

Shape hints placed on a simple shape

The arms could be made with shape tweens because both the shapes and the animation applied to it were simple. Had any of those two been complex the thing would have been a lot easier to draw by hand. For example, watch the little spaghetti straw on his head. It bends in to it self, so even if the thing itself I simple the animation is a bit to complex to use a tween.

The animated pice on the FSM's head

Shape tweening is pretty heavy on performance and file size, especially if used on gradients and transparent objects. Use it as a timesaver, but think before you do!

It’s almost always a good idea to use a bit on easing in tweens, it makes them look less even and more life like (that is of course unless it’s an absolutely even motion you are trying to achieve). Another approach is to split the motion up in to several tweens that are a little differently paced, but then you are getting closer to just doing it key frame by key frame.

Blend mode should be set to distributive if the shape is organic-like (smooth and rounded) and angular if it’s a shape with many sharp corners. Don’t sweat about this, Flash will automatically select the more appropriate choice should you happen to select one that is incompatible with the shape you are tweening.

Ok that’s all for today. Next time we will start animating by hand and go thru some of the principles of animation. Thanks to Serietecknarskolan for letting me use their old logo “Fågelmannen” in this tutorial.

Drawing for animation: five useful tips

 Merged sketch of a cartoon

There are obviously a lot more to drawing cartoons than what I wrote in my last tutorial, 9 tips for drawing in flash, but it was a good place to start. Today I thought we might go deeper in and even approach animation a little.

Before we even consider starting to animate I would like to give you a few tips. Most of the animation made in Flash is incredibly bad, and this is not only due to lazy animators. The knowledge of how to draw characters specifically designed for animation is no longer widespread amongst animators and this often results in characters that look flat or move very strangely. So this is a small guide to get you started on drawing characters that can be animated.

1. Use layers (really, this time)
Animated full-length movies would never have been possible were it not for cell based animation. To fool the brain in to thinking what it’s seeing is live motion we need to show it at least twenty four frames every second. That means actually drawing 1440 pictures, possibly in color, for every minute of animation.

The idea is, there are only a limited number of expressions, motions and angles to a character, so why redraw them every time? So what the animators did was to keep the background on a separate piece of paper (sense it did not change a whole lot) and paint all the characters and objects on transparent plastic sheets and put them in front of it. Rings a bell?

A character distributed to layers in a folder

A normal characters mouth may have a few different ‘cells’ like sad, angry, happy, horny or what ever. Once you have drawn them, there is no need to draw them again, just because the body of the character looks different or the eyes look in another direction. Keep parts of the face and body on different layers.

It might be a good idea to keep every character and object in its own Movie Clip with the layers inside it. On the other hand, it might not. If you are animating for television / rendered formats and plan on exporting to QuickTime then you can’t use nested clips (movie clips) because anything off the main timeline won’t play. In this case I recommend using folders for your layers instead.

2. Keep it simple
Drawing a complicated character one time is relatively easy. Drawing it a hundred or five hundred times is not. Simplify your characters as much as you can and make sure it has distinguishable building blocks.

Simple rough of a character

This is even more crucial if you are designing a character that more than one person will be working on. If there are simple steps to drawing the character it will not only save time but ensure consistency. But on the other hand, don’t oversimplify. Your character is only appealing if it’s interesting, so allow yourself to keep complicated elements if they are important to the make up of the character.

3. Use eye lines
It’s easy to draw characters from the side of the front, all you have to think about is keeping things aligned and not mess up proportions. But as soon as we start animating we have to consider the tilt of the head and the turn of the body.

Now, remember: the easiest way to make up a character is by drawing it in circles and adding on the outlines. If you want to you can use a stick figure as a “skeleton” to draw on. Here is the head from the character above.

head seen from front and slightly above

Notice the dashed line in the center of the characters head? This is the eye line, and it’s just below where the characters eyes will be drawn on. This is the head seen slightly from above.

4. Use tilt lines
This is really the same thing as above. We need a second line, going from the top of the head to the bottom thru the nose of the character to be able to see which way the head is turned. Using both lines we can describe any possible angle and always know where to draw on the face, ears and other details.

Head seen from the side and above

The thing we have now is not technically a wire frame, because it precedes it with about eighty years, but it’s pretty close to the thing used in 3d-programs to keep track of shape and position.

We can use these lines when we draw sketches (called Roughs’) of key frames (we’ll come to that in a later article) to keep track of the angel of the character thru a motion. It’s often good enough to draw just the head with a tilt- and eye line and a stick figure when you sketch.

5. Set the Line of Action
A characters stance and action should be described by a single line For example, a man waving his arms back and forth might have a line thru his boots up to his fingers. This helps us keep track of the direction of the animation when we draw up the key frames. Following a straight line of action makes cartoons motions look cleaner and make them easier to draw. The line of action is a major principle of animation and I will return to it when we get to the articles about animating.

Line of action thru a character

The important thing about all of these tips is that they enable you to see your character as a 3-d object, witch have size and depth. It’s important to be able to imagine your character this way because it means you can draw your character from any angle doing many different things.

A sketch and a colored example of a character for animation

And as always, I appreciate your comments!

Nine tips for drawing in Flash

 Cat gone bad. This is what we are drawing 

Drawing has always been a well hidden non-talent of mine but every now and then comes a project that requires me to face my demons. Using a mouse to draw is a new experience and if you are not familiar with programs like Illustrator and don’t own a Wacom board Flash is a very easy place to start learning. I will use a popular cat gone bad to demonstrate some of the tricks I use to get around my lack of skill.

1. Make a sketch
Stick figures are not that attractive, but they do help you determine the set up of your drawing. They don’t have to look anything like the characters or objects you are about to draw but try to make your stick figures reflect the general stance of the characters they portray.

This little sketch gives us an idea about what size and placement to give each object. If nothing else sketching will provide you with a better idea of what to draw. Flash is remarkably flexible here, being vector based, so you don’t have to give up if you’ve drawn an object in the wrong size.

2. Use layers
You might change your mind and decide to remove an object from your drawing, or you might want to move it or rescale it without affecting other objects. The best way to prepare for this is to give each character and object its own layer.

When animating you sometimes place parts of a character on their own layers inside a movie clip to be able to animate hierarchically. Right now we are just drawing a still-image so we don’t need that type of flexibility.

3. Draw lots of circles
There is just no way to draw a character out of the blue and hope to get the proportions right on the first try. What you need to focus on is finding the circles that make up the shape of the (cartoon) character. Then you can use lines to connect the dots and make up the general shape of the character.

Shows how charaters are drawn with the help of circles

This is not exactly original advice, cartoonists around the world have been using this technique for almost a hundred years but that is because it works. Animating in Flash is very similar to how cell based animation used to work back before they replaced everything with 3d-animation. Both use layers to create motion and preserve parts of a scene as separate objects, and both combine the concept of static backgrounds and animated parts (be it cells or movie clips) Remember that, old books on animation are pure gold.

4. Mould shapes
Lines can be dragged, reshaped and deleted just by clicking on them. Make use of this by reshaping your circles-and-lines sketches to line drawings. Move the joins around; add a few extra lines and bend them in to shape. Remove anything you no longer need.

Shows how to mould a shape out of the drawn lines ansd circles

The Pen tool can be a great help here. You can use it to add and remove anchor points (joins between lines) and to adjust the Bezier curves (the bend on each line) in a more precise manner. If you are familiar with Illustrator then the Pen tool might make you feel more at home than the line and pen tools.

5. Use the Pencil tool
It’s time to draw on the details, like eyes and whiskers and a huge pink bonnet for some reason. Try using the Pencil tool to freehand small objects. Adjust the drawing mode – straight, smooth or ink – to get the style you are looking for (or to compensate for shaky hands like mine).

Shows details beeing added to the image

6. Draw Outlines
To help characters or objects pop out of the background, make their outer lines a little bit thicker than the others. This is even more important if your drawing is in black and white because the viewer won’t have the help of color to separate objects.

Figure with outlines beeing added

The easiest way to fix the outlines is just to select them and choose a higher line thickness when you feel you’re done drawing.

7. Mess with the lines
Having used lines to draw a character or object on the stage, we might want to make it look a bit more organic. The lines have an even thickness that makes them look very stale, so let’s convert them to fills.

This is something you might want to do as a last touch, after you have decided where all the lines should go, but before you scale the object. Scaling an object with the lines preserved will mess with image proportions (because even thou the size of the colorized fields change, the thickness of the lines separating them wont).

Shows a drawing with and witout modified lines

Having converted your lines to fills you can manipulate the thickness of outlines to accentuate different thing about the object you have drawn. For example, try making the lines a bit thinner where there is a point (watch the cats ears). Just having the lines be a bit uneven gives the character more life.

8. Paint inside
When you colorize a picture you might want to do more than to just fill in fields and shapes, most people get sick of those books around the age of five. Use the brush tool to Paint inside a field (select the field and use Paint selection if it’s really small) and you won’t have to worry about paint bleeding over in to other parts of your drawing.

While you are at it, add the last details. I’ll make the pattern on the cat’s dress skulls. Chicks dig skulls.

Shows a figure with shadows painted in with the brush

9. Use gradients
Shape in two dimensional pictures is pretty much a matter of color. Don’t believe me? Take a head, for example. The outline is close to I circle, but the actual shape? Is it a sphere of a cylinder? Thanks to the way human memory works this is not a mayor problem in this case, most people will simply assume that a head will be much closer in shape to a ball than a barrel. But in case you have an object which the viewer is not so familiar with color can be a great help in accentuating shape.

Shows 3d-effect achived by using gradients

Think of gradients as a way of showing where the light comes from. Darker parts are in shadow while lighter parts are directly in the light. Be consistent with how you place gradients in your picture so that the light source is always in the same place.

Finished drawing of the cat.

Well done! I hope this has made you feel a bit more at home in Flash. Feel free to coment if you have suggestions for improvments or have something else on your mind.