Join Dermot O' Connor for an in-depth discussion in this video Creating thumbnails, part of Flash: Hand-Drawn Animation.
In this chapter I'm going to show you how to apply traditional animation technique, to create a scene that would be I believe impossible using the usual flash symbol animation systems, because there's just too much going on. These kind of dramatic turn scenes from the normal flash rig systems really aren't possible. You just have to draw them. So you really want to have this stream in your ball, and let's start the process of figuring out just how you approach it. So this is my thumbnail from my trusty notebook, and I like my thumbnail on the notebook because the horizontal lines give me a ground plane for the feet.
So when I'll be sketching each pose, I can position the feet fairy accurately, relative to one another, and they don't drift up or down too badly. And the other great thing that it allows me to do is to keep the proportions of the body fairly consistent as I draw each subsequent frame. And you'll see here that the body is about two of these lines in height, and I try to maintain that wherever he's at that same position. Of course if he's stretching he'll be a little bit longer, and if he's squashing a little bit shorter, same with the head. The head tends to be one, two, three of these, two and a half to three of these lines from top to bottom, and he more or less follows that throughout the sequence.
It doesn't have to be 100% exact, but its certainly close enough. So once I have these thumbnails down, I was pretty happy with them, the next step was to take this image into Photoshop and just clean it up. Brighten it up a little bit and get rid of some of the background noise, and then to color code the figure so that the left side was colored blue and the right side was colored green, I mean his physical right and his physical left side. And that really helps to read the action, because as you can see going from frame 1 to frame 13, it's very easy to misread his right arm as moving into his left arm.
And what's happening between these two frames is a very dramatic body turn with his left arm coming in front of his body to lead the action. So, the next thing to watch for are these red lines, and these red lines represent the line of action. THe line of action is an imaginary line that shows the dynamic pose of the character going from usually the base of their feet of the tip of their head. And as you can see in the first pose, it more or less follows S curve. In the second pose, it reversed, and it's now a C curve facing this direction.
And this is a reversal, and reversals are one of the tricks that you can use to really make your character more flexible. And you don't want to over do it or they'll be too flexible and they'll feel like they're full of jello. So the trick is to use it only when you absolutely have to or when the scene justifies it, and in this case, we have quite a points in where our reversal really, really is necessary. By frame 21, he's moving from this foot stomp, about to stamp he is foot in the ground to this pose. It's absolutely perfect to have a reversal there. That's our second in the scene.
And then we maintain the same line of action across frame 23, frame 29. And we have our third reversal on frame 33. Very subtle, not too drastic, but still there it is. And you can see this line here is reversing into that. And then we're into the opposite at C curve on 37 through 41, with a final reversal settling into the whole pose at frame 51. Now, these numbers at the bottom, one, 13, 17, as you might expect, are frame numbers. The next question you might wonder, why are they all odd numbers? Why are there no even numbers? This is a part of my policy of getting back to basics.
When we were animating traditionally on paper and pencil, the majority of scenes were animated on odd numbers only. We call it animating on twos. And originally, animation was all done on 24 frames per second in the early era of sound, before somebody realized we don't need to do or to draw all 24. We can draw one frame, in this case imagine frame one, and hold it for two, so it appears on frame one and frame two. Drawing number three will appear on frame three and frame four, and so forth.
Let me show you what this looks like on a timeline. So here I've made a simple flash scene, and you can see on the middle level, we have a ball moving, it's 24 frames per second. And this is as you can see on ones. Image if you had to draw all of these, it would get pretty tedious. So obviously anything that you can do to reduce your drawing workload is a good thing. And here is the principle of animating on twos, where it's only every second frame that's actually drawn and these are left out. And you can get a pretty decent movement just on twos.
Effectively it's 12 seconds, but it's playing on 24 with each drawing however two frames. That's basically it. If there was a very fast action somewhere where you felt we need this frame, by means, we include it. We can draw a frame 12, and insert it in. Well, you don't draw drawings unless you absolutely have to, and this will become very important later on. The only other thing to really note here is the timing charts. The timing charts control the spacing between the key frames. And this is how we used to notate our slow-ins and slow-outs back in the day.
And because we're reverting back to hand drawing for this course, we have to bring timing charts out of the cupboard and here they are. Very simple really and quite elegant. For example, between 13 and 17, there is one drawing we'll call it 15. And it's half way between those two. You'll see it's slightly different variations along the way between frame one and frame 13, for example. We have frame seven is a one third favor to this one with a slow in and the slow out from there. So that's a nice smooth spacing with just enough of a favor of frame one for that poster read.
So you'll see more of these timing charts as you proceed through the course, with that, let's move on to the next video and we'll show you what this actually looks like when you put it on the timeline
- Creating thumbnails
- Building rough keys and pose tests
- Adding secondary keys
- Symbolizing body parts
- Creating loose breakdowns
- Drawing in-betweens
- Coloring the character
- Cleaning up the animation