How to Make a Cartoon Movie on the Computer

The digital millennium has brought many empowering changes to the way we live our lives, and how we experience creativity as well. With the advent of computers, and software for them to replace bulky equipment as well as teams of specialists, people are able to embark upon creative projects previously out of reach.

Among the many creative things individuals are now free to explore, animation ranks at the top. Animation is a popular form of art, which has been both embraced and admired by the masses since the turn of the century. In previous times, it took teams of people specializing in complex tasks and operation of intricate equipment to produce even the lower qualities of animation that could be achieved.

The process of making hundreds or thousands of frames, to be sketched, painted and positioned was a laborious task, and an expensive one. But, with today’s technology, there are alternative methods that can allow you to create cartoons as a one man … or lady … army!

There are many choices for technique, software and methodology when it comes to making your animations. It really depends on how patient you are, what kind of artist you might happen to be, and how you want the animation to look.

Even with the streamlined nature of modern animation technology, it’s still possible to do a frame-by-frame animation process for a smooth, organic animation. But, this is time consuming and laborious. There’s also the option of designing vector objects, and rigging them to a skeleton. This is called inverse kinematics, and its downside is it can look a bit “puppety”.

But, there is an animation technique that blends these, and if done properly, it can look fantastic. First, you need a scanner capable of high definition scans. Also, you need Adobe Flash CS4 or higher, though CS5 is far less bloated and bulky than CS4.

First, storyboard your character’s animation, making key frames of each majorly different pose, not worrying about the frames between these. Scan your key frames at the same DPI across the board. Be sure to label your files with sequential numbers.

Now, load Flash CS5, and go to the file menu, and import the first image in the sequence. It will prompt you that it seems to be part of a series, and wishes to know if you would like to import them all. Tell it yes. This will make a timeline, where each frame is an individual image from your storyboard.

For each of the frames, take the following steps. Make a layer of 60% transparent white over the image, and then lock both it and the image frame below it. Make a third layer, unlocked, above it. Now, begin to rotoscope your image with either the line tool, or the pen tool. The pen tool may seem ungainly at first, but it’s actually easy to use. A future post may give advanced tips on the pen tool, so if it’s a bit too unruly at the moment, no worries.

Once you’ve inked and colored your image, look at the different parts of the character, and begin breaking it apart by moving components, converting each into a movie clip symbol. Now, this is where this is different from plain inverse kinematic animation.

First, lay out your skeleton, by selecting the bone tool, and dragging bones from point to point across moving parts of the model. You may notice that the movie clips try to change order of overlap when you do this, so it’s best to have each moving construct be its own layer at this point.

Now, begin moving the arms and legs or other moving parts of the model around. Notice how the joints break up the ink lines, and how the whole thing seems stiff? We’re going to solve this problem now.

In each movie clip, add key frames that copy the original frame, and begin modifying the inks at the points where the parts form joints, so that they align no matter what movement they are under. This can be a bit tedious, and require a lot of popping between the objects, to see if the alignment is successful. On each of these frames within the movie clip, place a line of code in the actions of the frame:

stop();

This will prevent them from playing in a vicious loop whenever on screen. Now, in the main timeline, remove the transparency layers, and the images from the project. Space out your frames by how many frames you want the animations between them to take. Make a copy of each key frame, and place it right next to the change frame that follows it. Now, move the moving components of the model in this frame to just one frame’s change less than the one it is next to. Select the gap between the original and this one, and create either a classic or motion tween – the choice is yours.

This will create frames of solid movement, but the broken up nature of the joints is still obvious. Now, create a fourth layer and label it “actions”. Fill it with blank key frames spanning the tween you just created. In each one, notice the movement that has been created in the tween. In the actions layer’s frame for that point, under actions, put a line of code like the following:

MovieClipName.gotoAndStop(FrameNumber);

Where “MovieClipName” is the name of the segment of a moving part as a movie clip, and “FrameNumber” is the number of the frame within it, where the inks correct to preserve alignment. Again, this will take trial and error and leaping about until you have the right alignment values, and it will take several lines of such code to account for something with more than one joint.

Do this for your entire storyboard, and you’ve managed to duplicate the organic feel of traditional animation techniques, in a fraction of the time by adding the power of inverse kinematics and a little bit of Actionscript code!

This is more tedious than just designing a model to not show breaks in joints, for straight up inverse kinematics animation. It’s tedious, and requires a lot of trial and error to make the alignment correction parts work right. But, it’s worth it for the beauty it can create.

One thought on “How to Make a Cartoon Movie on the Computer

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>