Flash Frame-By-Frame Animation: Detailed Animation Part I

of 10

Creating a Character and Scene for Reference

Since we've covered basic keyframing and in-betweening and done our first walk-cycle, it's time to get started building a full-color animation in stages across various lessons. Above you'll see the basic concept for my animation; that surly-looking fellow is Shinji, a character I've worked with off and on for years now. I want to animate Shinji turning his head to the side and rising up slightly, and so to start with I set the scene with an imported bitmap background and then spent an hour drawing and coloring Shinji in Flash in his starting position.

We're not going to work with him like this, though. We're going to build our animation from the ground up; this is just a starting reference to keep the key idea in mind and to be sure we have a reference for what the final character should look like. I've made my character rather complicated and detailed, but for your first one you may want to simplify a bit.

This is going to be a difficult and time-consuming series of lessons--possibly the most difficult and time-consuming that we've yet covered, but you'll learn to apply the basic techniques that we've learned to creating an actual detailed colored, shaded traditional animation in the streamlined convenience of Flash.

of 10

Tracing your Character's Basic Shapes

For this lesson, we're just going to break the character down into rough-sketched basic shapes and then animate that sketch following the motions that we want. This will make things a great deal easier in the long run; if we tried to animate the full details from the beginning, we'd spend a lot of time wrestling with trying to duplicate the details as well as create smooth, accurate motion. So we get the motion down first, and then worry about adding details on top of that.

I hid my background layer, then made a new layer on top of the layers containing Shinji's details to rough-sketch the basic shapes that comprise his head, neck, and shoulders. I included the guidelines that I generally use when sketching basic shapes, as those guidelines are good reference points when drawing successive frames.

Just a little quirk here, I prefer to do these sort of rough animations in a light, bright blue--force of habit from working with pencil-and-paper animations, as it's almost tradition to work with non-photo-blue pencils before retracing in 2B pencil, because the shade of blue of the pencils is just the right color that it doesn't show up on copies.

of 10

Basic Shapes II

With the details hidden, all that's left of Shinji is this: crude shapes that block out the space that he takes up and the basic idea of the lines outlining him. The hair and clothing we'll save for another time, as that will have motion all its own. I've also added in a little detail of his nose--hard to pick out with the guideline bisecting it--as it's another good reference point.
of 10


Turn on Onion-Skinning, and then go to the last frame of your animation; you can just estimate how long your animation will be (I originally estimated 17 frames for mine, then pared it down to 9; 17 might have worked at 15 frames per second (television animation) or 30 frames per second (film animation), but at 12 fps for web 17 was too slow) and then adjust it later by just shifting your frames around, a luxury that wouldn't be so easy if you were drawing this by hand.

Rough-sketch your last position based on the shapes that you used to capture your starting position; these are your primary keyframes, as your starting and ending points. Now we have to worry about getting from point A to point B, and all the baby steps in between.

of 10

In-Betweening I

Remember the little trick about finding midpoints that I showed you in the lesson on in-betweening? You'll be glad of that trick now as you try to sort out just how to plot your character movement on your timeline. Since we've got point A and point B, the most logical step is to create another point halfway in between it on the keyframe that marks the midpoint of the timeline.

The important thing is to choose simple key points and then estimate where they should be halfway between point A and point B. I chose points like the top and bottom of the circle I drew for the upper skull, the center point of the guideline for the eyes, the center point of the guideline for the lips, the lower curve of the nose, the peak of the chin. This is why it's important to break it down to simple shapes; this is far more complex than a plain bouncing ball, and even with such simple shapes there's still over a half-dozen key points to work with in just this simplified version.

of 10

In-Betweening II

With those points in place, you can use them as a reference to rough-sketch the positioning of the head, neck, and shoulders--but don't rely solely on those. Picture the motion in your mind, think of where it should be at that point--estimate and use your own judgment while sketching. Another purpose of this rough-sketched stage is to let you work out any problems in the motion before you get to the detailed stage, so don't worry too much about making it perfect; you can always scribble over it later.
of 10

In-Betweening III

So you've got your starting, ending, and midpoints--now fill in the spaces in between. Point C was the midpoint between A and B; now point D needs to be the midpoint between A and C. Find the frame that marks the halfway point, and then repeat the last step again to draw the roughs for the in-between frames.
of 10

In-Betweening IV

And then again, bringing it down to another level of detail: find the frame at the midpoint between A and D, and sketch in the details based on interpolation of the halfway points.
of 10

In-Betweening V

For mine, all that's left to halfway complete the motion is to find the point between D and C and fill it in; since I only have nine frames, that completes the first half of my rough animation. You may have more frames depending on the motion that you're animating, so you may need to keep sketching on further levels of detail.
of 10

Completing the Animation and Conclusion

The second half can be completed in the same process as the first half, so I shouldn't need to detail it to you; when you're done, scrub your timeline or export a preview so you can watch your motion and keep an eye out for anything that seems amiss. You should have something like this when you're done; it's not fine art, it's hardly detailed animation, but it's a simple motion sequence that captures--in scribbly, fluctuating lines--the gist of the action that you want to animate. This will act as your guide to draw over in the next lesson when we start adding actual detailed shapes on top of this.
mla apa chicago
Your Citation
Sanders, Adrien-Luc. "Flash Frame-By-Frame Animation: Detailed Animation Part I." ThoughtCo, Oct. 14, 2015, thoughtco.com/flash-detailed-animation-lesson-140630. Sanders, Adrien-Luc. (2015, October 14). Flash Frame-By-Frame Animation: Detailed Animation Part I. Retrieved from https://www.thoughtco.com/flash-detailed-animation-lesson-140630 Sanders, Adrien-Luc. "Flash Frame-By-Frame Animation: Detailed Animation Part I." ThoughtCo. https://www.thoughtco.com/flash-detailed-animation-lesson-140630 (accessed November 18, 2017).