2D Animation in Flash – Part 4: Animation Preplanning and Animation

[Part four in multi-part series about "Link's Prize," a 2D animation done in Flash. See the bottom of the post for the rest of the series.]

Previous: Drawing the Backgrounds

Now the fun [hard] part: Doing the animation.

Materials used:

pencil, paper, Flash MX+, wacom tablet

Outline:

-Getting Organized
-Preplanning
-Getting into Flash
-Animation!
-The Rough Version
-The Nicer Version
-Secondary Action

Getting Organized

With the animatic complete and the backgrounds in, the next big chunk was the animation. By far, this process takes longer than any of the others, as you can imagine. So let's get started.

The very first thing I did was to make a list of the shots and decide which shots are the most important. You want to animate those first.

What makes a scene important? It could be that the shot is the climax of an emotional sequence, or a money shot, some shot whose raison d'etre is to impress your audience with your animation skillz. It could be those shots that made you want to make this animation in the first place. Basically it's any scene that needs to look GOOD.

Now this is an important point. Not every scene needs 100% of your efforts. Before I did this project, I would usually approach each project by doing scene 1 (make background, color it, animate) and then scene 2, scene 3 ... etc. I did this with the Majora's Mask animation, and I lost steam around shot 6 or so. By animating the most important scenes first, you can put all your fire and energy into them, and leave those less important shots for when you're racing to finish.

For this animation, I decided that the most important shots were Four: "Link turns over and opens eyes," Five: "Link gets up and puts on his shoes," and Seven: "Link washes face." Those were the most important because the purpose of making this short was to show Link being cute, and those were the cutest shots. :) So, for this tutorial, I'll be talking about the first shot I animated, scene Four. Here we go.

Preplanning

Here's what happens in the shot: Link rolls over lazily and then opens his eyes.

I started by roughing out the shot on paper. I knew that he would somehow push up on the blanket, and turn at the same time. I tried to imagine how one does that, and did a very simple six-pose drawing of the action:



I was having a hard time with it. I didn't quite get what was happening with the arms while one is turning in bed. So, the next thing of course is to try it out. I went to my bed, covered myself with a blanket and tossed and turned like someone dreaming about Freddy Cougar. It was fun. I tried to pay attention to what my hands were doing. How my body was responding. How can one turn using the least amount of energy possible. Having a sense of it in my mind, I went back and redrew the thumbnails.



I picked up on several things by doing this. (long description)--> First, imagine you're on your side, lying in bed, facing left. You start to turn onto your back, and swing your left leg in an arc to the right that places it past your butt. You start to roll onto your back, planting your feet and having the knees turn upward. You lift the blanket with your right arm to prevent the blanket from constricting your rising knees. Having turned onto your back, you put the weight on your shoulders and feet, and lift your butt up and over to the left (rolling has somewhat put you way over to the right). Then you release your feet and continue rolling until you are on the other side. To finish the roll completely, you lift your upper-body up with your hands and butt planted and plop down such that you're face is facing the sheets (not straight out).

That's a very complicated description. But these are the kind of details that you need to think about when animating. What are the forces acting on the character? Where is the weight distributed? You don't need to describe it in words (like butchered attempt above) but have a sense in your mind and somehow translate that into thumbnail drawings.

Remember, the more thumbnails you make, and the more effort you put into them, the better your animation will be. You want to have a clear idea of what the actions are before you go into Flash, otherwise you'll spend a lot of frustrating hours fixing and reworking instead of animating. Not fun. (Not that it's totally avoidable, by the way. Sometimes hours of reworking aren't all bad.)

Still, it wasn't working quite right, so I went back to bed and tried again. Here was the final round of thumbnails.



One of the new points I learned was that, as your rolling, you're not rolling in place, rotisserie-style, but actually displacing. You're head mostly stays in the same place, while you're legs and butt are rolling away in an arc, like moving a compass. That's why you occasionally stop, pick yourself up, and adjust your position before continue rolling.

With all these details in mind, I finally decided I was ready to start animating.

Sidenote: To video or not to video?

In preparing to do a shot, I recommend video taping yourself with your digital camera or something and then watching it for insights. However, I find sometimes that doing that can be very distracting. You shouldn't be rotoscoping, or trying to get the animation to be exactly like a video. You want it to be a caricature of real life, something believable, without dipping into the uncanny valley.

So, I generally, I don't video unless the action is really complicated, or an animation is not going well and I need a boost in a different direction. That's my preference. If I was working for a studio, then I'd probably make a video for each shot I was working on, since each shot you make has to be top-notch. But if I'm making my own thing, and just trying to make something feel cohesive, I don't think I have the patience for recording and analyzing video of myself for every shot. That's just my preference.

Getting into Flash

Ultimately, you want to be able to take your thumbnails and put them directly, as is, into Flash. Then fill in the gaps. Simple as that (but never really).

So this is how I do it. I work in Flash MX. I have Flash 8, but for some reason, I think that the stylus works better in Flash MX (Is it just me? Does anyone else have this problem?!?). So I animate in Flash MX and compile the whole thing in Flash 8. It's kind of annoying, but that's what I do.

So, I have the scene open in Flash MX. The size of the movie is set to 720x480 pixels, and the frame rate to 24 fps. Below is the general look of my workspace:



Some notes about my workspace: In order to see the character clearly, I turn the background into a movieclip and set it to a low alpha (using the properties bar). Also, you may notice the obscenely unorganized mess of scenes I have on the right. That exists because every time I think I'm going to make a major change to my animation, I duplicate the scene and work on the duplicate.

Animation!

When I animate, I generally animate two times. The first time is a very rough version, where the character is represented by basic shapes, and the second time is the final look, a clean drawing of the character. Here's an example of the rough and final version of one frame:



In the first round, you are focused on making the animation smooth, and getting the timely just right. In the second round, you're making the character look good.

The rough version

I draw with the Brush tool. Flash users know that the size of the brush tool, unlike the pen tool, varies according to the amount you are zoomed in. This is very important. So, for the rough version, I work at 100%. For the nicer version, I zoom in. Sometimes I'll work at 150%, or sometimes 400%. It depends on the size of the character in the shot.

So, with the stage set to 100%, I make a blank keyframe at frame one. In frame one, I draw my first thumbnail sketch. And then in frame 3, I draw my second. And frame 5, my third. I copy directly from the pencil sketches into Flash, skipping each frame. (You don't have to skip a frame, I just do it because I know most frames, in the end, will be at least one frame apart.) The timeline looks something like this:



Onion-skinning is the feature that allows you to see frames before and after the one you're working on. Have it on as your working. Being able to see the previous shots is the bread and butter of doing animation. However, especially in this stage, where you're putting in the really important poses, don't feel like you have to copy the last drawing really closely. You're keyframing, so the poses are going to look dramatically different from each other, as they should.

Once you have copied all your drawings into Flash, play the animation. When you first play it, it's going to look very rough, and too fast. Remember, the more keyframes you put in, the better it will look. Picking the right points to make a keyframe is difficult to judge - a tutorial on that to come - but in general, if you have a 200 frame animation, with a lot of action, and you only put 5 keyframes, it's not going to look right.

So, the next thing is to adjust the timing and pacing of the action. Basically, that means spread the frames out, spacing out the frames so that the action doesn't feel too slow or too fast. It's hard to tell whether the timing is right until you put in the inbetweens, but for the time being try to space them out as best you can.

Here's an example of what I mean. See how the frames are all spaced out? How much you space them out will depend on the relationship between the drawings in those frames.


Ok, you have an animation, in essence. Now, the best thing you can do is make this part look and feel as best as you can. This can save lots of work later. If you notice the head is getting increasingly bigger throughout the shot, then fix it NOW. Those kinds of things will be a real pain in the butt later, believe you me. If you're not sure if it feels right just because there are too few keyframes, then do some inbetweening. It's only recently that I've been trying not to do the entire animation twice, only the keyframes; however, before that I would make the complete animation, inbetweens and all in rough first before going to the nicer version. There's nothing wrong with that, it just takes longer.

The Nicer Version

Ok, say that's done. Then, make a separate layer. This is going to be your "nice" layer. Lock and put the "rough" layer in outline mode. Now zoom in. How much you zoom in depends on how big the character is in your shot. You want to zoom in at least 150%, if not more if possible. The reason for this is that zooming in forces the brush to be smaller, and small, fine lines (even if they're messy) look better at 100% than big, chunky ones. Also, remember to write down somewhere off stage what zoom in percentage you used, so you can maintain a consistent line thickness.

So this is what it will look like. (Sorry this is not Scene Four ... I actually deleted the exact rough version I copied the nicer version onto. Whoops!) I was zoomed in at 249%. The current, in-progress nice drawing is in black. The rough version I'm tracing over is in red outline. You can see the previous keyframe in faded black.


So zoom in, and on the "nice" layer, draw a nice version of the character using the rough version as a guide. Do this for all your keyframes. As you work, it's a good idea to use the [,] and [.] keys to quickly "flip" through your frames and see if the animation is flowing or not. I constantly have my fingers on those frames as I'm drawing. I sometimes get in the bad habit of just wanting to race through the drawings and not watch it until I'm done. Don't do that. Before you know it, the character's head has tripled in size from how it started. That's really annoying. It's easier to catch it and correct it as you're working, not at the end.

Once you've finished all the keys, now you're ready to inbetween. So, as I mentioned before, you basically want to have the animation "on twos" which just means that every second frame is unique.

So, say you have a keyframe on frame 1, and another on frame seven., like this:


That means you're going to have two inbetweens. So you can go ahead and make those both blank keyframes.


You'll only want to work on "ones" (where every frame is unique) if A. the motion is too fast to be read on twos or B. you're masochistic. This is what each frame being unique would look like:


So, make blank keyframes in between the keyframes and start filling in the gaps. Where do you draw the inbetween? That's a good question, and one a bit beyond the scope of this article. I'll be sure to talk lots more about inbetweening and things like that in future posts, but in this series, I'm just going to talk about the general process of putting an animation together.

So, let's say you went ahead and filled in those inbetweens and have a long sequence of frames. Of course, it never ends with the last inbetween done. I do a lot of editing after that, especially with those darn reshaping heads.

Secondary Action

You might notice in the picture way back up that I only have drawn Link's body. His character is the most important, so that's the action I focus all my attention on. But after that, there's still more things going on, like his blanket and his pillow. Because the movements depend heavily on the movement of the main character, I don't draw them until after I've animated the main character. Such actions are called Secondary Actions. Examples include animal tails and long hair.

I actually didn't animate these secondary actions until I had finished the character animation for all the other important scenes. I really really wanted to make sure those were done before spending time fiddling with unimportant details like pillows. So it wasn't until all those other scenes were done that I came back and added the blanket and pillow animations.

Put these secondary items on separate layers. But, you don't want to get carried away by separating everything. I once did an animation where I drew the arms of the character on a separate layer. I think it somehow took away from interaction of the arm's weight on the body and the arms ended up looking like they were just tacked on spagetti strings, flopping this way and that.

Generally, I do Link's hair on a separate layer. In the case of shot four, the head movement was so subtle that I didn't think I needed to. You can always start drawing the hair with the rest of the body and switch to a different layer if it's getting too much to keep track of.

In general, that's it, but ...

That's a bit of a whirlwind tour of the process I use to animate. As for technique, spacing, timing and other things like that, I can recommend many books on the subject, and I'll be talking plenty on the subject here in the near future, but for this series, I'm focusing on the practical matter of making the animation.

Animation is a complex art and every time I attempt any project, big or small, I learn a ton. So please stayed tuned for more!

Absolutely, positively, send me questions if you have any. I really have no idea what people are interested in, so if you want me to go into detail about some topic, please comment, or shoot me an email, or anything! I'd like to make posts that people will be interested in. Thank you!

Next: Painting the Backgrounds

Part 1: Idea and Storyboards
Part 2: Making an Animatic
Part 3: Drawing the Backgrounds
Part 4: Animation Preplanning and Animating
Part 5: Painting the Backgrounds
Part 6: Coloring the Animations

2D Animation in Flash – Part 3: Drawing the Backgrounds

[Part Three in a multi-part series about "Link's Prize," a 2D flash animation. See the bottom of the post for the rest of the series.]

Previous: Making an Animatic

Materials used:

0.3 and 0.5 mechanical pencils, paper, scanner, Photoshop, Flash

Outline:

-Sketching the Backgrounds
-Setting up the Frame
-Drawing the Backgrounds

With the animatic finished, I next moved onto the backgrounds. You want to have a background before animating so you know exactly where to put the character and how it will interact with its environment. On the other hand, I didn't want to color the backgrounds just yet. Just in case while animating I wanted to change the background, it's easier if you haven't labored over painting the background yet. Draw now, paint later.

Sketching the Backgrounds

To get a finished drawing of a shot, the jump off point is the storyboard thumbnail. Here's the storyboard sketch from scene 3, the pan down from the window to Link:



From that, I make a bigger, more detailed version. Then, I'll usually make a few more, changing small details here and there. For this scene especially, I generally knew I wanted a pan, but getting the best setup of the shot was tricky. I made several versions before feeling satisfied. Here are all the different versions I made, the last one being the best:

Setting up the Frame

The whole movie is in the format of 720x480pixels. So, I need to make sure the backgrounds I drawn in those dimensions. To do that, first I made a sheet with rectangles in those dimensions in Photoshop.

To do this, first make a new white photoshop document using the preset, "Letter" or "A4" or whatever paper size you are going to print this out on. It doesn't matter what paper size it is since the proportions will remain the same. Then, on a new layer, take the rectangular selection tool, and set it to "Fixed Size" at width: 720px by height: 480px. Make the selection somewhere on the page. Then, use the Fill tool to fill the selection with white. So now you'll have a white rectangle on a white background. No problem. Then, double-click the layer to bring up the layer options. The last option should be Stroke. Check and click that option. I usually make the stroke black and not too thin or thick. Then, presto, you have your model box to be printed and traced.

I also like to make the box a little bigger than exactly 720x480, or have different sizes on the same page by duplicating and rotating the layer. Below are two pages I made this way. You can make your own, or even use these if you like:



a second version. I think the last one is generally the most useful:



The rectangles are either exactly or proportional to 720x480 pixels. The bigger ones are useful if you are going to be zooming in (making the background bigger) and you want to have lots of detail. So, I printed these puppies out and put them under blank pieces of paper. I roughly trace over the black lines, giving me a space to draw the background in that will fit perfectly into the movie.

This is really, really helpful. I used to just willy nilly draw backgrounds, and then have to do some reshaping in photoshop that wasn't fun.

Generally, it's a good idea to draw some bit outside those black lines just in case you want to zoom out or shake the camera later.

Drawing the Backgrounds

For the drawings I used a 0.3 mechanical pencil and a very handy-dandy eraser pen. I first sketched out the major items with a regular 0.5 mechanical pencil, then erased it and went over the whole thing with the thinner pencil. I also added small details, little nicks here and there, with the 0.3 pencil to make things look like wood. I think it worked out well.

Finishing up the drawing, I tried to make it as clean as possible. Make sure to get rid of those lines you traced to make the 720x480 rectangle. Get rid of blatant sketch lines. Some sketchiness is nice in the final product, but leaving too many sketch lines can ruin the overall effect. Also, It's harder to take them out with Photoshop than with an eraser.

Next, I scanned the drawings into Photoshop. I kept them at the size I scanned them, at around 300 dpi. Some basic Levels adjustments (Ctrl+L) makes those pencil lines a little darker (not too much) and whiten the rest. Here is the result for scene 3:



I saved this file as my working file, to be painted later. Before closing, I crop the shot to be exactly 720x480pixels, and save a copy as a jpeg. Thus, I have my large working version for coloring, and my black and white version to be immediately put into the animatic.

As I sketch, draw and scan each shot, I put them into my animatic. I make sure I've drawn all the backgrounds before starting the animation. Once again, seeing the backgrounds all together in the animatic really gives you a sense if the animation is working as a unit or not.

Overall, I'm still experimenting with drawing and painting backgrounds, but as I make progress, I'll be happy to let you know! :D

Next: Animation Preplanning and Animating

Part 1: Idea and Storyboards
Part 2: Making an Animatic
Part 3: Drawing the Backgrounds
Part 4: Animation Preplanning and Animating
Part 5: Painting the Backgrounds
Part 6: Coloring the Animations

2D Animation in Flash – Part 2: Making an Animatic

Once again, this is part of a multi-part series about the making of, “Link’s Prize,” a short 2D animation done in Flash. This is part two, 'Making an Animatic'.

Previous: Part 1: Idea and Storyboards

Materials used:

Flash, wacom tablet

Outline

-What is an animatic?
-Making the animatic

What is an animatic?

So, those of you who are animation fans know that before starting any serious animation for a film, animators first make an animatic. An animatic is basically a rough version of the entire film. The purpose of the animatic is to get a sense of the timing and pace of the film before starting the hard work of making it.

Here's the animatic for "Link's Prize":
[kml_flashembed movie="http://www.larkinheather.com/Images/artwork/animation/LinksPrizeAnimatic.swf" /]

[/kml_flashembed]

The whole animation is there, in essence. The length of each shot, camera motions, music and sounds are all set up. Even most of the keyframes of the animation are exactly as I made them in final version. Basically, you want as much of a picture of what the final product will be like before putting in the heavy work. It's easier to work on comic timing and mood and things like that BEFORE you start animating.

Making the Animatic

The animatic took only one afternoon to make. First, I copied the scenes into Flash exactly as I had them in my storyboards. After quickly throwing them into Flash, I went back and adjusted the timing of the shots. For example, I made the opening shot longer to fit better with the music. Overall, there weren't so many big changes, this being such a short animation.

This is also the time when I added the music and the sounds. The sound effects came from "Help the Wretched" at http://noproblo.dayjo.org/ZeldaSounds/. There, you can find tons of sounds effects from the Zelda series, like 'Link drowning' or 'Link falling off a cliff'. Good stuff. It's an incredible resource for any Zelda-related multimedia endeavor.

Obviously I couldn't get the animation timing down exactly to what it would be in the final product, but I got it somewhere close. If I was an animator at a studio, the timing of the animatic would then determine how many seconds I would have to work with within a given shot. For example, you might get assigned to a shot where a character has to walk across a room within approximately 200 frames.

As you make progress with individual shots, it's good to them stick them in your animatic. Replace the rough shots in the animatic with the nice, polished shots and watch the whole thing together. With each new addition, you can see how new things fit into the general flow of the film.

If you're not used to making animatics for your long projects, I highly recommend it. It's an easy way to check that your story makes sense as a whole and also keep track of your progress.

Next: Drawing the Backgrounds!

Part 1: Idea and Storyboards
Part 2: Making an Animatic
Part 3: Drawing the Backgrounds
Part 4: Animation Preplanning and Animating
Part 5: Painting the Backgrounds
Part 6: Coloring the Animations

2D Animation in Flash – Part 1: Idea and Storyboards

This is the first part in a multi-part series about the process involved in making, “Link’s Prize,” a short 2D animation done in Flash. This is by no means the best flash animation ever, but I wanted to write about the process in making it because I found it a was a highly educational experience. I hope in writing about it, you can learn something too! Ok, here we go!

Materials used:

Pencil, paper, ~~brain~~

Outline

-The Idea
-Storyboards

The Idea

So, I know I wanted to do some short animation featuring Young Link, from The Legend of Zelda, Ocarina of Time. I draw him all the time (he's so cute!) and so I've been longing to do an animation of his character for ages. However, the last time I tried to animate something with Link, it was disaster namely because 1. I had designed it to be a HUGE project and 2. my time management skills at the time were somewhat ... weak (in the sense that one week I would work my ass off, and the next do nothing but play Grand Theft Auto and drink diet coke.)

I must admit that this short, humble project was a huge first for me. It was the first time I ever have taken a personal animation project from start to finish, all without overeating, losing sleep, ingesting illegal quantities of caffeine, or generally going insane. Yay! But more on that later.

So the idea goes like this: Link wakes up, starts to get ready to start the day when he is suddenly and rudely is reminded that he has a cow in his bedroom. The whole idea fits in one sentence. Now, it's not Oscar material, but it is short and I was excited to get started.

Storyboards

I took the idea and started drawing very rough sketches of how I would layout the shots. Here's all the storyboard-related pages I drew (5 total):



(You can also see on the last page, my ideas for what I was going to do next, including writing about this whole thing here later ... ^_^)

So, about storyboarding: In the past, I used to labor over each shot of a sequence until it was "perfect" before moving on to the next one. This was a huge creative buzzkill and I would get frustrated and quit quickly.

So, this time, I first drew those main ideas, whether they were quick thumbnails of a shot, or a few keyframes of animation, those main-POW!-ideas that were the inspiration for doing the sequence in the first place.

With those down, I went back and started to fill in the rest of the sequence. For each shot, I started by drawing the very first idea that popped into my head. In the "each-shot-must-be-perfect" method, I wouldn't dare even draw my first idea, I'd just ignore it, pass it off as cliche. By drawing even that first weak idea, then I could build on it, change it to make it a better, stronger shot. For each shot, I drew several versions before moving on to the next one.

After reaching the last shot, I went back and tried to strengthen any shots that I still thought were weak. When I felt satisfied with the shots as a whole, I put numbers next to them to put them in order. If this had been a longer animation, I would have redrawn the shots so they could be easily read in sequence. However, the whole thing was only 8 shots long, so I felt I could imagine the events without redrawing it.

This way of doing things felt very organic, and less stressful than the way I used to do it. Time and time again, a theme that I've been learning is this: That you can't start off and suddenly make something perfect. But, if you make something crappy, then at least that's one step closer to making something more perfect than crappy.

That's the end of Part 1. I'll be writing the rest of the series very soon, and I hope you come back for a look!

Next: Making the Animatic

Part 1: Idea and Storyboards
Part 2: Making an Animatic
Part 3: Drawing the Backgrounds
Part 4: Animation Preplanning and Animating
Part 5: Painting the Backgrounds
Part 6: Coloring the Animations

“Link’s Prize” – Legend of Zelda animated short

Here it is:

[kml_flashembed movie="http://www.larkinheather.com/Images/artwork/animation/LinksPrize.swf" width="500" height="333" /]

[/kml_flashembed]


Finally, after two months, it's finished! Yay!

If you're curious how I made this animation, please check out the following series:
Part 1: Idea and Storyboards
Part 2: Making an Animatic
Part 3: Drawing the Backgrounds
Part 4: Animation Preplanning and Animating
Part 5: Painting the Backgrounds
Part 6: Coloring the Animations

Drawings from 300 – Hot Abs!

Here they are!

Source:

300 is a spectacular movie. Mostly naked, ripped male figures doing intense stunts in slow motion?!? What more could an artist ask for? These were drawn while watching the DVD.

Lessons Learned:

I used to not like drawing abs because they always seemed to come out flat and cartoonish. But, drawing from the movie, you really get a sense of the shape of the muscle. I really need to get myself together and do a proper study of human anatomy, but in the mean time, this was a fun exercise. I hope you enjoy looking at them as much as I do :)

Drawing Jaguars

Source:

Google search for "Jaguars." The last page only has original drawings.

Lessons Learned:

-It's really good to pay attention to what kind of spots go where. On the head, there are small spots general, with some big ones on the cheeks. Around the chest and inside front legs, there are spots big and small, as well as stripes. Starting around the shoulder are the small rosettes, continuing into the BIG rosettes around the stomach. Around the lower hind legs are the stomata shaped rosettes. And the tail descends back into small groups of dots. There's so many varieties! I especially like the shape of the BIG rosettes.

- Those spots can really define give shape to a surface if manipulated to fit the perspective properly. If most of the spots are round, then bunching them and turning them more oval in one direction can give the impression of a curved surface.

-Putting the hind legs of cats is a bit tricky, I find. I think I have a tendency to flatten them, but really, they are very muscular and should bulge appropriately.

-The flabby bits around the belly and elbows of the front legs are interesting. There are no real harsh endings and beginnings where the limbs meet the body. There are always fleshy bits that scrunch up and form folds.

-Finally, I don't know if anyone else does this, but when drawing a carnivore yawning/roaring, I sometimes don't draw the far cheek because I imagine you wouldn't be able to see it (see third page down). But really, it should be there. Unless the animal is really profile, like the one on the 4th page down. It just looks so much better when I added that. I'll have to remember that.

Majora’s Mask Animated Short – Incomplete

So, here it is, as far as a got before I stopped:

[kml_flashembed movie="http://www.larkinheather.com/Images/artwork/animation/Deku_Movie.swf" height="333" width="499" /]

[/kml_flashembed]

Animating a hornbill

Source:

Video I took of a Great Hornbill in the Bronx Zoo.

Lessons Learned:

-Flash artists know, if you're drawing with the pen tool in Flash, then the pen thickness will change depending on what zoom you're at. This has it's pluses and minuses, but generally I like it and use it to my advantage. Today, when I made the perches that the bird is sitting on, I zoomed in and drew the fine, lighter brown lines to give some texture to the shapes. I think it worked well.

-When the bird pushes off, it doesn't immediately pull up it's feet, nor is there some strong gravity effect on the legs ... they just remain limp and then are quickly pulled up.

-When the bird is landing, it sort of slows down and then suddenly drops in place. There is a distinct pause and jump during the landing. It's as if it stops flying, gives in to gravity, and just drops in place.

-And, I learned my lesson from the Tiger animation. Detailed frame-by-frame analysis of the reference and detailed notes are key. What was tricky in this case was that I had all the poses right, it was the spacing and positions of the keys that was the problem. I had the bird flying in a strange arch. I had it basically shooting itself at the next perch then suddenly slowing down at a random place and landing quickly. It was weird. Finally I worked it out so it had a nice arch. I eventually moved the perch to accommodate where the bird was landing rather than the other way around. That's not an ideal strategy, but ::shrugg:: you gotta do what you gotta do.

Katsuhiro Otomo’s Akira – Faces

Katsuhiro Otomo is an amazing artist. He is most famous for his epic manga and later animated film, Akira. Maybe you've seen the movie? Maybe it's grossed you out or traumatized you for life? If not, then you may want to check out the 6-volume comic book. It's a real treasure. The richly detailed background drawings just blow me away. More than the backgrounds, I am captured by the characters - with minimal linework, Otomo suggests great detail, and achieves are wonderful realness to the character's expressions. From frame to frame, you just can FEEL so strongly what the characters are thinking and feeling just from a static expression/pose.

For today, I'm only looking at faces from the Akira manga. Poses and body language, as well as many other lessons, remain to be studied at some later point. Onto the faces:



And some more:

Lessons Learned

I found copying pictures from the Akira manga very satisfying. There are lots of delicious details that you either learn or remember by doing this activity. I highly recommend it! I put letters near each of the drawings and I'll use them in the following notes to refer to the drawings. Luckily, I only did 26 drawings!

First, I noticed that Otomo really makes the part of your face from under your nose to the top of your lips very convex. That's just not something I ever noticed before. In some images, like E, the shape is very obvious. And it should be, since in that expression, the character is pouting, forcing the upper lip to bunch and create an arch. But even in more relaxed expressions, you can see the convexity indicated with subtly shadow lines. See images C, H, S, V. In these cases, just the contour of the shadow of the nose indicates there is an uneven surface. Amazing!

Comic book artists in general have a great sense of line weight: when to use thick lines, when to use thin lines. One of my goals in copying from Akira is to increase my own 'line-weight-sensibility.' I can't report on exactly what I learned, but one thing that stood out was the use of thin, often slanted parallel lines to indicate shadows on the face. Lines like that, if placed incorrectly can make a face look dirty or blushed. But Otomo has a wonderful ability to use these lines to give 3D dimensionality to an otherwise simply lined face. See images S and O.

Also with regard to line-weight, the mouthes seem to be the clearest demonstration of deftly placed thick/thin lines. The mouths are essentially soft triangles usually, what seem to be open mouths without any indication of teeth or tongue. I don't think the thick lines especially on the side of the mouth indicate any form-caused shadow or anything, but they do make it look cooler somehow.

Hair. I could have left the hair as an outline, but filling in the shape was fun! I outline a process for creating hair highlights in the second image. Who knows if that's how Otomo does it, but it was as close as I could get. First draw a halo in the hair, following the contour of the hair, then draw triangles (both up and down pointed ones) and then fill in the rest around them with black. I end up creating more triangles then I eventually leave white. I have a tendency to want to go overboard with the white space, but in the originals there don't seem to be that much and it really looks better that way.