Rough Animation - Gynmastics

so I sent off my application for the Pixar internship on monday. Yay! But I'm not feeling so optimistic. I got feedback on my portfolio from some Dreamworks story people two weeks before that, and I didn't have time to do anything about their feedback before sending out the portfolio. >_<

But now that I've sent it off, it's practice time! The Dreamworks folks talked about more gesture practice, drawing from films/etc, to build a vocabulary of action poses. So I started doing marker gestures from gynmastics videos the past few days. It's been fun. And then I wanted to do some kind of small animation.

I started doing it in Flash, but the drawing tools in Toon Boom are so much nicer. Almost like photoshop.

Also, when I hear the word "gymnastics" I hear my mom's voice ... she says it with a long drawl on a: gymnaaaastics. I remember watching the olympics on tv with my mom, and she says "Heather, why didn't you stick with gymnaaaaastics? You see, if you had stuck with gymnastics, that could be you!" Oh mom.

Ghosts are Scary

A little animation for halloween. Enjoy!

Kanook – Episode One (Draft)

I'm working on a series called Kanook.

This is a draft. I welcome feedback and collaborators.

-Heather

First Animation in Toon Boom Digital Pro

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

[/kml_flashembed]

Introduction

Above is my first animation after learning how to use Toon Boom Digital Pro. I bought the software (educational price) a few months ago and hadn't yet gotten around to trying it out. But finally, last week, I sat down and watched their video tutorials and I have to say I'm very excited about it.

For now, I'm still focused on using Flash because of it's programming capabilities. However, I'm eager to use Toon Boom for making animations that I can then import to Flash.

Pre-Planning

First things first. I planned out my animation by drawing thumbnails sketches with pencil and paper:

Background Painting/Animation Practice

Here is the final product:

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

[/kml_flashembed]

I've been working on storyboards and scripts for the past two weeks, so I wanted to do something a little less on the 'pre-production' side and more on the 'final product' side. I tend to get paranoid if I spend too long planning things that I won't have the skill/patience to bring it to fruition.

Drawing the Background

I started with my background. I looked through some of the pictures I took when I went to Panama during my third year of college. Once I found a good picture, I traced a 720x480 box on paper using one of models I made in Photoshop (described here).

I drew a somewhat rough version of the picture. I've tried doing drawings from pictures like this many many times before, and I usually get bogged down by trying to draw too many details. I was feeling impatient, so I just indicated the shape of the landscape and some of the major tree shapes. It looked like this:



The ugly looking white bits are where I later painted over some of my pencil lines in Painter. This was sort of a revelation to me. Usually, I don't like editing the sketch once it's scanned, but if I paint over the lines in white in Painter (instead of trying to erase them in Photoshop) then I can do it gradually, so it doesn't look obvious that it was edited (although it does when you just look at the sketch).

Painting the Background

Next, I moved into Painter. I set the sketch to "Gel" and made a layer below it that I filled solid with green. Also beneath the sketch layer, I made a layer for the light values. I put in the bright sky in the upper right corner and the trees below it, as well as the light bit in the middle of the path.

Then for the dark layer, I did a bit more sculpting of the ground, added many many more trees and silhouettes of foliage. I definitely used a lot more dark on this painting then in my last painting tutorial.

Then I added another layer for some of the greenery, but it wasn't standing out so well with the sketch covering it. So, I started adding layers above the sketch layer for foliage and other highlights. It's nice when the scanned drawing is good and you want the lines to define things ... but that really works better for indoor settings, where you can delineate objects easily. But with a forest, you can't delineate bushes and grass so easily, so I needed lots of layers above the sketch layer for those kinds of things. I still have a lot to learn about painting forests, but I don't think it's too bad. :)

After I was done in Painter, I took the painting back into Photoshop and flattened it (and saved it as a separate file). Then I took the lasso tool and selected the farther elements of the scene and applied a nice 2.0 Gaussian blur for an added feeling of depth. And voilà, it's done:

Animation Preplanning

Feeling somewhat satisfied with the painting, I decided I would go ahead and put some animation on it. I took the painting into Flash MX and immediately started to animate my character, Kanook, running through it. It was a horrible disaster. I sighed, I resigned myself to the fact that I would actually have to do some preplanning.

I sat down and thought about Kanook's run cycle. I basically broke it down into five frames:



Then I went frame by frame and sketched many cycles of those 5 frames into Flash. The tricky part was the end. I really wanted him to disappear off the screen, but nothing I was doing was looking right. That's why I left him still in the shot on the last frame. I will have to do some research on how to do that later ...

With the sketch animation done, I went and did the nicer version. I was careful this time to make the lines closed and without holes so I could color them easily with the fill tool (as described here).

Using Masks to Add Depth

Here's a neat little trick I've used many times. I make masks over the characters to show them moving behind background elements without having many background layers.

For example, see how Kanook is running into the shot:


I want to make it look like he's coming out from behind the trees. To do this, I first make a new layer and paint colored shapes where I want the character to appear. In other words, I don't put color on the trees that will be in the foreground. Here's shapes I drew for this animation:


Then, make that layer a Mask layer, by right-clicking on the layer and clicking "Mask." Drag all the layers you want to be affected by this mask under the mask layer (see the pictures for what it should look like).

If the mask layer and all its linked layers are locked, then you'll see the mask effect. Here's what what the final product looks like:


This is not a super great example since I'm so zoomed in and the tree shapes aren't so clear to begin with ... but hopefully you get the concept (ask me if not).

That's all I have to say about this animation. It was a fun little exercise that only took a few hours to do. And I hope my explanation was helpful to you, too!

“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

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.

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"]

[/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:



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:

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.

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:

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

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.

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.