The Wireframing Technique
Where the developers of Flash intended their product to be a Cel style animation system or not is of very little consequence. The fact of the matter is that it truly is one of the best traditional animation systems on the market albeit seriously bloated by “features” which ultimately suggest a lazier more amateurish approach to animation.
This tutorial demonstrates how to animate a good-old-honest-to-goodness three dimensional sequence the new fashion way. Note: It is important that you ignore all you have heard about bones systems and tweening and “cut out animation. The only way to truly animate in 3D is to just draw your characters head on. This tutorial demonstrates a technique I like to call “wireframing”. Essentially a way to rough our a complete animated sequence from point A to point Z across a series of frames. And then coming back to point A to continue building up the characters figure and movements over and over until the entire sequence is completed.
In short the technique itself is very similar to the process employed in traditional hand drawn animation whereby the animator will roughly sketch out the character’s form, through a series of frames and then go back and sketch out additional layers of roughly drawn forms until a fully animated figure emerges. At that point the animation would be cleaned up and made ready for color and other processing.
First off we set up the flash authoring environment to something comfortable or appropriate to work with, something like 400×300 pixels is more than adequate for this type of exercise. We then also prep our timeline for a hand drawn sequence. We do this simply by selecting the first keyframe (which should be blank) and pressing the F7 function key on our keyboard several times, each time we press F7 a new blank keyframe is added.
You may also wish to enable the onion skin tool so that we can view our work across several frames when we work.
Step 1: Wireframing is basically the animating of your object in a very rough manner s as to expedite the animation process. Neither file size nor draftsmanship is of any importance at this stage. Our only concern is to drawn and animate our basic forms across the entire frame span.
In this example I am starting out with a basic, yet exaggerated bouncing ball sequence. As you can see its very rough and not quite impressive.
Step 2: Once our basic form has been fully animated, we then go frame to the first frame and start adding a whole new layer of animation. You never really want to animate everything at once. It is often easier and more visually rewarding when you concentrate on one piece of the puzzle at a time. In this case I have gone back and animated the character arms on top of the previous sequence.
Step 3: Once the roughly sketched out arms have been fully animated, we then go back yet again and to our first frame and start working on another feature. In this instance I animated the characters facial features atop all the previous work.
As you can see the entire procedure is pretty much like washing your hair, you rinse and repeat, and so on. Every time you reach the end of your frame span you simply go back to the first frame and start working on another small feature until in the ends the sequence itself is fully animated.
When you are done, a good rule of thumb is to crate a new layer above the rough layer compose of the same number of blank key frames as there are in the layer containing your wireframe sequence. You then simply lock the layer(s) containing your rough drawings and change the layer behavior to “guide”. Locking the roughs layer will prevent you from accidentally drawing any clean lines onto this layer. And setting it to guide will prevent the contents of this frames from being exported during your previews or your final renders.
This is very important because, in many cases, the amount of rough line work created will often times push the limits of your computer’s processor. The more vector points in a drawing, the more strain is put on the cpu.
Step 4: Cleaning up your drawings basically involves rotoscoping your rough drawings using clean line work. You can use the pen tool to quickly lay down conforming lines against the rough images, or you can apply straight lines using the line tool, which you can then mold and contort to any shape you see fit. I recommend focusing on the principle shapes first, perhaps even animating one line at a time across the entire span of frames. You would then go back to frame 1, perhaps even create a whole new layer, where you would animate yet another clean line as it reconfigures itself throughout the sequence.
In some cases it’s also a good idea to just save yourself some time by making use of Flash’s ability to create a library of symbols, which are basically reusable elements.
In this case I didn’t want to have to have to draw the eyes on a frame by frame basis, so what I did is; I created a single eye “graphic symbol” and just duplicated it as needed in order to complete the sequence.
Step 5: Once the sequence has been completed, you may delete the layers containing the rough elements, and flatten down all layers containing clean line work. Flash doesn’t have a flatten layers function so you’ll have to do this manually and yet it can be a bit time consuming and tedious but the results are well worth it.
Lastly, once the sequence is complete, it is ready for color. You may also wish to adjust the timing, to slow it down you simply space out the frames by inserting empty frames in between the keys. To speed up the sequence you remove frames.