Thursday, January 10, 2008

Animating a hornbill



Thumbnails of heron in flight

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.

Monday, January 7, 2008

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:

Day 18 - Akira - Faces

And some more:

Day 18 - Akira - Faces

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.

Sunday, January 6, 2008

Tiger Attack! (Part 2)

Animation!


I could do a lot more to fancy it up, but I don't want to! Here's the final product:

[kml_flashembed fversion="8.0.0" movie="http://www.larkinheather.com/blog/entries/tigerattack2.swf" targetclass="flashmovie" publishmethod="static" width="333" height="500"]

Get Adobe Flash player


[/kml_flashembed]

I got a little lazy with the face, letting the white eyespots wander jiggity-jaggedly all over the place. I could fuss, but I think I've learned enough from this activity. I'm ready for the next one!

Flash Camera


I think what really took this animation up a notch was the camera action. I animated the tiger moving across a larger than 480 pixel space and used Sham Bhangal's Flash Camera to follow his movement. This camera thingy is the best thing in ActionScript since play().

More Thumbs


I put the animation above, but in time I really did the following thumbnails first:

Tiger Attack Thumbnails 4

These thumbs were done while looking at the video frame by frame (see previous post).

Tiger Anatomy?


Ideally, before animating, I would have a solid idea of what the tiger is going to look like and prepare a guide to its form clearly delineated at all angles. Well, I decided that I didn't want to do that this time, so instead, despite it being wildly insufficient, I drew three pictures of tigers from pictures I found on Google Images:

Tiger Attack Drawing Practice

Lessons Learned


-It's so important to do detailed thumbs. When I started the first animation I didn't have nearly enough information. I should really just be copying my thumbnail drawings directly into Flash. I shouldn't have to be figuring out what's happening while animating.
-Big white circles around the eyes is a small way to stylize something to look like a tiger.
-Never mess with tigers.

Friday, January 4, 2008

Tiger Attack! (Part 1)

The Video


Have you ever seen a video from YouTube that ever make you wet your pants? Well, here's your chance:




Intense animal movement in slow motion? It BEGS to be animated. So, here we go.

Thumbnails


So, step one. I sat down with my pad and paper and did rapid succession start/stop with the YouTube player. Here's the results:


Tiger Attack Thumbnails 1


Then did a bit more sketching, redrawing the sequence in space:


Tiger Attack Thumbnails 2



Animation


Then I said, "Shoot! I'm ready to animate!" And low and behold, after many hours of working and reworking, this was the fruit of my labor:

[kml_flashembed movie="http://www.larkinheather.com/blog/entries/tigerattack_firstattempt.swf" height="333" width="500" /]

Hmmm. So. Not so great. And this was the best of many attempts. Something is just not working.

Back to the Drawing Board


I think that my preparation was insufficient. I think the problem is that my thumbnails were too sparse; I'm missing important frames that show that the flow of action and, to compensate, I tried unsuccessfully by making things up. So I need to re-analyze the video with more detail. One problem though: the YouTube controller doesn't allow for frame by frame playback.

Screen Recording


I know of a great screen recording program for Macs. Unfortunately, I don't have a mac. :( So, instead, I searched the web for a decent, free, screen recording program. I went with CamStudio, and downloaded a free trial of their software. I captured the YouTube video as an avi file and loaded it into Flash 8. There, I could scrub frame by frame. This makes a HUGE difference. By scrubbing you can pick up on some motion, scrub back to see where it starts, then scrub forward and see how it plays out. For example, I saw how the tiger was already pushing up on its front legs while the back legs were coming down. The switch from the front paws to the back paws on the ground was quick. I missed all these details when I watched the video initially.

New Thumbnails


Here are the notes from the second half of the video, things which popped out at me immediately.

Tiger Attack Thumbnails 3

Next Post


Having realized that there was so much more to study, I have decided to do more detailed thumbnails from the beginning to the end of the video. But not tonight.