Saturday, October 22, 2011

Making Things - A long awaited how-to post.

I have learned something about myself: when it comes to technique, I am a crappy teacher. I am positively awful at imparting any technical knowledge. I just don't really know how to break it down very well. As anyone who knows me will tell you, I have no difficulty speaking at length. But when I need to sit down and actually teach someone to do anything, I am hopeless. My wife explains it like this: I would make a fantastic lecturing professor but a terrible hands-on school teacher. I used to think she was just trying to nudge me into another career choice, but now I understand. She is, as usual, correct: Woe unto you if you are relying upon me to impart practical knowledge in a systematic manner.

What does this have to do with you? Well, a month ago I said "Boy, people sure are asking me a lot of questions about The Murf. I should just make a short behind the scenes vid!" And then I went and posted that I was going to do it and the people rejoiced mightily. And then, almost immediately, I suffered some massive hard drive failures that took with them the original project file for The Murf. I spent about a week trying to get it back, to no avail. Someday I will have the money to pay someone to attempt to recover a 2tb hard drive. Today is not that day. So I was left with no project file and a promise I had made to the lovely people of the internet. So I started writing a big long look at my methods and creating a sample project for it. And then I got sidetracked, and then I got busy, and then I didn't really know how to put it together, and I had problems with Camtasia, and then my voice sounded stupid so I kept re-recording the narration, and then I hated the whole thing and wanted to go hide under the bed.

But then I remembered - you know what I AM good at? Writing really long blog posts. So this is going to have to do. I'm going to go over some basic things that go into what I make, focusing mostly on The Murf. And worry not, there will be video as well. I'll be basing this mostly on questions I have received from you, dear internetters, and I will try to keep my answers as brief and clear as possible. I don't really do step-by-step tutorials, but I will try to be as helpful as possible. So feel free to leave questions or comments, or email me directly.

Also, as you can already tell, this will be LONG. Go grab a drink, throw a blanket around your shoulders and settle in.

ONWARD!

HOW DO YOU DO CHARACTER ANIMATION IN AFTER EFFECTS?

There are as many ways of animating in After Effects as there are animators. At the moment there seems to be a move to using some really intense rigging and coding to perform digital puppetry of sorts. I can think of three people off the top of my head who you should be watching if you are interested in going in that direction. One of them is Daniel Gies, who deserves to be a household name among AE animators. The results he attains are so unique and so very much attuned to his style that I am consistently in awe of him. He's one of those artists whose work is completely different from your own, but you look at it, grunt in approval and nod your head. The other two people are, of course, the twin geniuses that comprise Tiny Inventions. If you're reading this blog, you are probably familiar with their work. Their combination of puppetry, hand-made objects, pixilation and After Effects is in a class of its own. It's the best kind of kitchen sink animation. They've earned every bit of success they've attained and, in my opinion, deserve far more.

My approach is markedly different from these kids in a few ways. I use almost no coding and my rigging, if you want to call it that, is very simple. This is mostly because my style itself is very simple and when I am tackling a big issue I normally end up using a dozen simple things as opposed to a complicated, specialized solution. I could make my assets in Photoshop (and I sometimes do), but I've already got After Effects open, and if I do then right in program I save a step, save time, and have a remarkable amount of control when it comes time to animate.

As I've mentioned before, I began animating in Flash. I've always been self-taught. The big monkey-touching-the-monolith moment for my developing animation style came about 2 years in, sometime in 2006 or so. I stumbled across this tutorial thing by a guy named Chris Georgenes. Click here to check it out. It's a bit old, but the principles are still completely valid. The basic idea was that you could, by manipulating 2d layers, add an amazing amount of depth. My method for creating characters in After Effects owes much to his methods, and I couldn't possibly continue without tipping my hat to his work. Speaking of which, before we go on, allow me to be a boring professor type for a minute. As I have evolved my methods to fit my style, so should you. The world is crammed full of people who can reproduce what they see others do. If I had a dime for every reel I've seen which is nothing more than the sum total of the talented Nick Campbell and Andrew Kramer, I'd never have to work again. Take what they do, learn from their crazy skills, and apply it to your own voice. Daniel Gies and Tiny Inventions are amazing partly because they bend their toolset to their will. They have a vision and they use what they learn to accomplish it. Do the same. Reproduction is easy. Individuality is hard.


Ok, so we start with a solid layer. For our purposes, let's make it a square.


I've thrown an Inner Shadow (set to screen) onto it. You can find that under Layer>Layer Styles. It can add a nice subtle bit of dimension and light-wrapping to your character. I don't use it all the time, but sometimes it works out well. You'll find that your eye doesn't actually need much more than a hint in order to "buy" something. Sometimes something subtle can make a very large difference.

Next we'll toss a mask on this thing.


See how simple this is? Now let's add a few more layers and masks.


Ok, so I've added some more features, all made from masked solids, all on separate layers. Even that highlight in the middle of his face is a little solid with the edges of the mask feathered out. Again, it's just a little something to add dimension. If you are somewhat fiddly with your work like I am, working with solids is great because it gives you infinite opportunities to mess with the color and shape of everything. You don't have to commit until you are ready. Already this hairless dude is looking alright. I will name him Steve. Everyone say hello to Steve.


See how Steve's nose is just two masks on a pink solid layer? SIMPLE. And because I've created all of this out of solid layers, the character naturally meshes with all the crazy stuff you can do in After Effects. And of course, that's where the lens flares come in. If I've learned one thing about After Effects tutorials, it is that you must use lens flares if you want anyone to take them seriously.


 WE WELCOME YOU IN THIS PLACE, OH DEFAULT LENS FLARES!


As you can see, Steve has embarked on one serious vision quest, one that we onlookers can scarcely comprehend.


And this presents us with a challenge: how do we make this humble collection of solid layers move and register emotion? How do we manipulate these simple shapes to show depth of both the personal and dimensional variety? WITH KEYFRAMES!


So here is a look at all of the keyframes I'll be using, plus how all of it is rigged up. This one is stupidly simple - everything is just parented to layer 9, face base. Of course, things are usually much more complicated. But right now I just want to have him turn his head in three directions. So I set my first few keyframes. Then I move a few frames down the timeline, set a new set of keyframes, and start adjusting masks.


I know what it should look like from this angle, and I just move the layers and adjust the masks to attain the desired shapes. By moving each feature more or less, I can also give the illusion of depth. Objects closer to the viewer move more than objects further away. That's called parallax, and it is very important. Look how far his nose has moved, as opposed to his ears? Notice that Steve's ears have dropped, counterbalancing his upturned face? Notice how his nose slants upward now, as if we are looking at it from below?


Once again, I've just moved layers and changed shapes. I've highlighted the nose masks yet again, as it is the feature that moves and changes the most throughout this sequence. Again note the counterbalancing of the features, as well as their placement. This is how I give the illusion of depth.


And now we hit our final position. Notice that he is now facing in the opposite direction. To give the nose an organic transition, I've gone back and added a keyframe to the middle of the last movement.

Usually I'll need to go back and finesse lots of things. For the purposes of this post, however, this will do. This is how I create the illusion of depth and dimension using only masked solids. It's mostly about know what things should look like at different angles, along with some basic principles of animated movement. From there on, it's just practice and experimentation. Before we leave Steve, let's have a look back at these fleeting moments we've all shared together.


Let's say you want to have your character speak. Some animators swap in different premade mouth shapes as they go. I prefer to do all of them with masks, so that I can smoothly move from shape to shape. There's no right way to do it as long as it works, but that's how I like to do it. It's pretty much the same method I used for Steve's facial features, only this time the shapes are the mouth, the tongue and the teeth. Then I precomp it and make it just another layer sliding around the screen. This can add up to a lot of keyframes, but don't let 'em scare you. Just remind them that THEY WORK FOR YOU.


Of course, this has been a simple and dirty example of one part of a character. Things get complicated very quickly. For example, here is a character rig from one of many unfinished projects.

He's made up completely of masked solids with some simple texture overlays. The textured bits as well as the mouth are precomps. The arm and finger bending is done with the puppet tool. I use the Puppet Tool all over the place. Just about all animation involving limbs uses the Puppet Tool. Sometimes, though, I'll just have some layers parented together like Cap'n Dan's legs here. They'll just swing on their anchor points. It all depends on what you're going for.

As I said before, there isn't one way to do this, so I experiment a lot. Sometimes I'll make some or all of the layers making up a character 3d layers, and use the camera to help add some depth. Sometimes I precomp the entire character and place it in a 3d environment in After Effects. And that will bring us to our next section.

If you're interested in learning something about character animation, I recommend:
The Animator's Survival Kit by Richard Williams
Cartoon Animation by Preston Blair
Character Animaton Crash Course by Eric Goldberg

None of these books has anything to do with After Effects, by the way.

HEY! Get up and get a drink of water! Use the bathroom! You've been reading this for like an hour! I'll wait.

HOW DO YOU MAKE COMPLICATED 3D ENVIRONMENTS IN AFTER EFFECTS?

This section will be considerably shorter than the last, because there isn't much to it and no pictures. I make the assets, often in After Effects but sometimes in another program. I bring them into After Effects, and arrange them. Then I add a camera. VIOLA! Obviously, it gets more complicated than that, but that's the basic idea. I use the same basic principles as I used in creating Steve earlier. We're not trying to make real objects that we can film from every angle. We are creating those angles, and creating the illusion of those objects. So let's look at a shot from The Murf that I've received many questions about. I've reexported it with some changes - the elements in the scene will come in one by one, and then the camera will change position. I think that, after looking at it for a bit, you'll understand how it was made. In hindsight, there is a lot there I could optimize and do differently, but I don't think I've made anything that I can't say that about.

 

You can download an HD mov of this clip HERE. That way you can frame-by-frame it to your heart's content.

Ok, so let's look at this shot. I made it on the fly, just tossing solids and masks down all over the place. I had a thumbnail sketch to work from, but otherwise I just went for it. The canal in the center is just a precomp of the city skyline tinted blue with Wave Warp added. The people are precomps, as are the zeppelins. The cars and streetlights were duplicated using Motion Tile, which is very handy for such things. You can also see one of the few textures I brought in for the project. A little bit of texture goes a long way. You'll notice that much of the depth and size of the scene comes from color. Color tends to lose saturation and become lighter as it recedes into the distance. In real life, this is caused by witches. Do not anger them, lest they steal even more color from the world. When the camera pulls back in the above shot, it is clear how cheap and small the whole setup looks. But remember, we're not out to actually make a city. We just want to fool the viewer for a few seconds. And using some actual depth, some strategic coloration and composition we can convince them that it's a real place (or real enough, anyway). This shot took possibly the longest of any shot in the video, maybe two nights or so. It was snowing very hard and I remember I was watching a very long BBC documentary on the first World War. What a stupid war that was. Not that other wars are awesome or anything, but seriously. I just kept getting angry listening to how it got going. After awhile I turned it off and watched Flapjack instead.

 I've also written about making 3d-ish environments in After Effects here, here and here.

As an aside- thanks to whoever it was who wrote me a month ago to ask about the above shot. Had I not exported that clip for you, I would not have it now. It would have went along with the project files in the great hard drive crash of '11.

IF YOU HAVE TO SPEND SO MUCH TIME CHEATING TO CREATE THE ILLUSION OF DEPTH, WHY NOT JUST USE A 3D PROGRAM?

Well, if I ever get the time I would love to become better at Cinema 4d. I'm a novice with it now, but can get things done in a pinch. I'd need a few months to really get to know it and I always seem to have other things that need to be done. That's a bad excuse. Beyond that, I find that my brain works mostly in 2d, or maybe 2.5d. And in the end, the kind of animation I like doesn't look like it's fully 3d. I like a blend, erring more on the 2d side. I like animation that's a little flatter, a little stiffer, and little more imperfect. Even the 3d stuff I like is stopmotion, and I prefer it when it has little blemishes and fingerprints. Show me a beautiful 3d render and I'll admire it for sure. But show me something scrappy, flawed and unique and I'll be intrigued. I'll remember it. I blame it on growing up playing in punk bands. I learned to play power chords and upbeats really, really well. I also learned to sing terribly, but with plenty of heart. I think my animation has evolved along those same lines.

AND NOW, QUICK ANSWERS TO ADDITIONAL QUESTIONS:

HOW DO YOU MAKE PEOPLE WALK?
In After Effects, I use the puppet tool for the legs and arms. The rest is just learning to make a walk cycle. The books listed above or the internet will tell you all you need to know about them.

DUDE, HOW HIGH WERE YOU WHEN YOU MADE THE MURF?

I can't believe I've gotten this question more than once.



Not high at all. I've actually never done anything close to drugs. I don't even drink. Of course, I'm not counting caffeine. I am a Coke Zero addict. Then again, I DID take generic Nyquil this year just to combat insomnia. I did it twice. The first time I took it I suffered a massive fall down some steps and into the street the next afternoon. The second time, I nearly cut my finger off while peeling a potato the next day. Seriously, you should see the scar. Thank god for liquid skin. Let that be a lesson to you, kids.

HOW DID YOU MAKE THE SQUARE FLAMES IN THE MURF?
Particular. Custom particles. Easy as you like. Same with the snowflakes and the comet.

HOW DO YOU GET THE NICE FLICKERY PARTICLES I SEE ALL OVER YOUR WORK?
In Particular, go into the editor for Size Over Life under particle settings. Make it all crazy jagged. Make sure that overall it increases and decreases gradually over the life of the particle. Now set the particle life to 100% random.


WAIT, ARE YOU SAYING THERE IS OR ISN'T A GOD IN THIS VIDEO?
Well, is it a whale or is it a group of stars?


WHAT WAS YOUR LIGHT SETUP FOR THE MURF?

I almost never use AE lights. They slow everything down and I can never get them to look right. All light/atmosphere in The Murf was done with solids and color correction. Here's a hint - a nice wash of glow, especially of you have a bright and colorful sky, will go a long way.


HOW DID YOU MAKE THAT SCENE WITH THE STARS AND THE GRID AND THE FLASHING SQUARES AND STUFF?
You refer to the scene that comes at about the 2:02 mark. I will have to do this from memory, so bear with me.

That scene used 3d layers and a camera. The space clouds were off in the distance. The non-constellation stars were made up of two instances of Trapcode Form. You'll understand why I used two in a moment. The stars making up the constellations were just shape layers, so that I could place them how I wished. The whale and squid were just masked solids of course, lightly animated with the puppet tool. Ok, so they disappear. The grid layer is just a 3d solid layer with grid applied to it. I then duplicated one of the background Trapcode Form star layers, and replaced the star particles with custom particles. That way they matched up with some of the stars and looked like they were labels. I animated them in by tweaking the string settings in Form. Oh, I also used Form in this video because I liked the strings and how they also looked like artificial patterns, which was a running theme. So I then added in some tracking label graphics around the main constellation stars by hand. The camera had been slowly tilting this whole time. A little camera motion can really help add depth to a scene. Even if it's very small, your brain notices it. The rest of the shot is just camera movement, a black solid over the background, and animated solids.


WILL YOU UPLOAD THE PROJECT FILE FOR THE MURF?
No, silly! It's gone forever! And even if I had it, probably not. It's better this way.


I WOULD LIKE TO READ A LOT MORE ABOUT THE MURF, PREFERABLY IN RESPECTED PAPERS OF NOTE.
Please see my interviews with Motionographer and The Atlantic. You should have few questions afterward.

I'VE READ THOSE INTERVIEWS AND UNDERSTAND WHY YOU HAD THAT MOSAIC OVERLAY OVER THE WHOLE VIDEO, BUT HOW DID YOU DO IT?
Again, this is from memory. It was just an adjustment layer with Mosaic, set to Overlay or Soft Light at maybe 10-20% opacity. Something like that.

WAIT, IN THAT VIDEO OF STEVE FROM WAY BACK AT THE BEGINNING - WAS THAT A SNIPPET OF A PRODIGY SONG FROM THE HACKERS MOVIE SOUNDTRACK?
Yes. I still have my techno cds from high school. Incidentally, I'm listening to an Orbital song that was on the soundtracks to both Hackers and Mortal Kombat. Yeah, kids. I'm tumbling off of whatever pedestal onto which you might have placed me.

Alright. I think at this point I've covered the basics of how I make things in After Effects and thoroughly exhausted The Murf as a topic. As always, I will answer what questions I can, so hit me up.

I hope this was somewhat useful to you. As previously stated, I am a crappy teacher. There are probably further steps to everything I do that I don't realize I need to explain. If you need me to write a long essay on a topic, that's fine. If you need me to teach you how to do what I do, WE ARE SCREWED. Thanks again for your correspondence, your enthusiasm, and your support. It means more to me that you know. Keep checking back. More awesome stuff to come in the future!


I AM GOING TO BED NOW.  GOOD NIGHT.

-scott

5 comments:

blake said...

hi scott, this was such a joy to read. thanks for the huge effort and being an awesome person as well as a fantastic blog "lecturer"

Charles Huettner said...

I need Steve to give us a vision quest tutorial.

I hate getting the "How high were you..." question when people see something I made. Cause the answer is so obviously "totally high on all the drugs."

Kyle Reynolds said...

Dude wow! I've been following you daily waiting for this post, and man was it worth it! You have showed that it's not about how much you know, its all about using what you have to achieve what you require, and you've mastered it! You are a legend and pioneer amongst After Effects animators, and an inspiration to us all! I will read this post for months to come, thanks for such a great effort.(oh, and regarding the awesome 3d city scene, well done, gotta say, didnt realise how much you use color to create depth, quite sneaky I say)

bombsfall said...

Glad to be of service!

Anonymous said...

The article was very interesting and informative for me. weight loss Read a useful article about tramadol tramadol