Crow flight cycle reference and planning

Following on from Jazzy's bold attempts to stalk crows with a camera and capture them landing, I've been looking at how we might be able to animate the scene where the crow swoops in and lands on the scarecrow's arm as painlessly as possible.

By an astonishing coincidence I found this rather interesting video on Youtube:

I find the whole situation hilariously ironic - it's almost exactly the sort of movement we want and it's done in After Effects with an almost puppety looking bird. Of course, owing to the simplicity of the shape the animator was able to get a good deal more flexibility in his bird - note the flexing and arching of the back - it would be significantly more difficult to achieve with our puppet. I would imagine that he used a vector shape or mask of some sort within After Effects and was able to bend and flex the shapes at will. It's an interesting technique and certainly not one I would have considered. I could be totally wrong, of course - he may have done something totally different. I may actually ask him how he did it, mostly out of curiousity, but it may also be beneficial to us and give us some kind of insight as to how we can better approach this scene.

Regardless, it's a useful video to clearly examine the motion of the bird's landing.

From some quick doodles scribbled in Liz's lecture today (don't worry, I was paying attention!) I started looking at how the body would rotate as the crow comes into land, wondering if we might be able to simply use the same body and rotate it, or whether it would be necessary to draw new ones. Happily it seems we'll be able to re-use it. She'd lift her feet and spread her wings wide as she comes in, flapping to keep balance. We could probably use the same wings as well - they wouldn't necessarily change shape or perspective, simply rotate them along with the body.

I think we'd probably need about three "frames" for the wings - an 'up' pose, a 'down' pose and a 'mid' pose. As with the previous bird tests I did, we could probably rotate the wings down on the Z axis and then switch them to the 'mid' position once they get far enough. Hold that for a few frames, then they come down. They'd be blurred, too, I imagine - so that should cover up any choppy 'cuts' between each position!

If the wings are divided up into two or three sections, say, we could even try to get a bit of overlap by delaying the ends of the wings as she flaps up and down.

Puppet pose planning and reference

Starting to develop more puppets and thinking about how best to articulate each one. It's much trickier than you'd think; despite the crow's relatively simple design there are a lot of body parts to consider. I've been trying to think economically in terms of re-using as many pieces as possible whilst still maintaining lively and expressive poses and overall quality of animation.

I started with a fairly simple pose from a scene that doesn't require a great deal of movement in the crow — right at the end, when she's perched on the scarecrow, holding the bug in her beak. If done correctly, this pose could potentially be re-used for the scene where she actually lunges forward and grabs the bug from his hat as well. 

It looks totally awful at the moment — it's those blinking wings. I have a basic understanding of their overall structure and mechanics, but trying to rotate them and picture the folding from such a weird angle is incredibly difficult. The one at the top would probably work but I just really wasn't happy with it. The angle isn't quite right, really — the scene in question is more of an over-the-shoulder shot, whereas that one's a little more side-on. It could be used for the bug-grabbing scene, however! 

On the top left is the sketch from the 'above' puppet I posted previously. Nothing to say there.

It was pretty hopeless trying to completely imagine how the wings might fold so I compiled a bunch of beautiful reference images pilfered from Flickr! I opted to grab pictures of regular birds as well as crows — partially because there weren't many images of crows from the angle I wanted. The one on the far-right of the middle row is probably the most useful for my purposes, so it's the one I focused on most.

From the references I was able to scribble something that made a bit more sense — it took me a few tries and it's still far from perfect. I was using a poor-quality printout, however, and it was pretty difficult to see too much detail to reference. I started having real trouble with the head at this point — I tried hiding more of the beak behind the head to better suggest the angle but it just looked a bit peculiar. I think I finally sort-of got it though?

I'm not going to worry too much about the detail of the sketch at this point. It's really just to provide a base to work from — it will be much easier to correct all the horrible mistakes digitally.

I also started thinking a bit more about the wings and flight cycle at this point and how we might go about animating that with nothing but puppets as painlessly as possible.

As before, I started digitally sketching the base of the puppet in Photoshop. The reference on-screen was much clearer and easier to see so it was much easier to get the angle of the wings correct.

I also replaced the original head with one of the others that I had drawn, which fit the angle of the body much better. 

Once the sketch was complete I started going over it again with the pen tool, creating blocky shapes on each layer for each relevant body part. In retrospect it probably wasn't necessary as the crow isn't going to really move at all, but I figure it's always a good move to have articulated puppets ready just in case.

I had a bit of an issue with the outlines - the normal method of simply "stroking" each section wasn't really going to work in this instance - the way I'd divided up the limbs looked a bit weird when stroked like that. The shapes were a bit clunky and awkward. I would have had to alter a lot of the outlines by hand to make it work, so I opted to just draw them myself. It allowed me to keep a lot of the original detail - I think (hope?!) it looks a bit better this way:

Thinking a little further about the more complex sections of the animation, I started trying to figure out how we might look at doing the crow's run for the hang glider chase scene. In theory, it shouldn't be causing too much problem, as it's mostly actually already animated within the animatic. The difficulty, for me, is knowing how far to take it and how to make it fit within the puppet design. 

The animatic version is a simple two-frame cycle of the crow's legs simply going up and down. There's a bit of keyframing to move her up and down and side to side as she runs. Something like this could probably work reasonably well within the final animation, however I wasn't sure whether or not I should look to making the cycle a little more polished and actually animate the legs properly. One thing I'd considered doing was to have maybe three frames for the feet - one flat on the ground, the other being lifted up, and the other outstretched in front. I thought we could maybe take a simple leg shape and rotate it in 3D space along the Z axis to appear as if it was rotating upwards, lying flat towards the camera, to give the impression that she was lifting her leg. As the leg rotated the "lifted" foot could be used, switching to the "outstretched" foot when her leg is fully extended.

I'd really need to put an example together - it's a bit tricky to explain...!

I've started loosely sketching out a potential puppet, trying to figure out how to not make it look utterly ridiculous. Front angles are tricky at any rate, let alone for bloody birds... No matter what I do her face always looks stupid

I was referring heavily to the crow Jazzy drew for the animatic - it's pretty perfect, I've just got to try and adapt it into the style of the crow puppet.

I really don't know about the beak or anything about the face. I think the top of the beak... the bridge-y nostril bit possibly needs to be wider? The expression looks off. She doesn't look particularly scared. It just doesn't have the charm or humour or simplicity of the original, I just don't know how to make it work. I'm not sure if my leg idea will work either - still, best to try eh?

The last thing I started looking at were wings! Specifically, their application to the scene where the crow leaps into the air and runs from the hang glider. The animatic shows her leaping in shock, looking behind her before turning and bolting. This sounds like it would require a great deal of additional puppets, but I've been thinking about it a bit and I reckon it might be possible to get away with just one, using a couple of additional heads and wings for the jump. The body and legs could be recycled from the side-on run (which is going to be very similar to the walking puppet). We could probably just lift her legs and feet (as shown in the terrible doodles at the top there) and attach a new head and set of wings.

We could potentially animate her wings very similarly to how I did the flying crows - we could use one or two basic wing shapes and simply keyframe them up and down at high speed, then apply a heavy motion blur so all you get is a blurred shape flailing about. Maybe we could even kick her legs and shake her tail a bit!

The question of how to fold her wings back up for when she starts running is a bit trickier. We could probably get away with just adding a blurred mid-pose as she draws them back to her body - the whole movement will be very quick so I think we can get away with being pretty loose with it.

I'll have to do some tests to see whether it will work or not. Hopefully it will!

Planning the flock of crows — perspective

I've started thinking about the composition of the opening shot and how the hell we're going to actually pull it off. The birds are going to be flying from right to left, towards/over the camera from a point on the horizon. The perspective is going to be a bit tricky; realistically the birds would change perspective as they drew nearer the camera but I think, for simplicity's sake, we'll simply stick with one angle and scale it up as they draw closer. They're moving fairly quickly, so hopefully it won't look weird.

I basically just took the backdrop from Jazzy's animatic and scribbled all over it to try and work out an angle for the birds that would look relatively correct no matter the distance. The angle shown above is probably the best option — it still looks reasonably plausible, even with the birds far into the distance. 

The only trouble is going to be getting them to actually fly. Flight cycles are notoriously tricky at any rate, but from such a weird angle it's probably going to be sheer horror. I've found a lot of great references of little birdies flying from all sorts of angles, so hopefully we should be able to use these and come up with something that looks pretty decent!

Again, for simplicity's sake, I think that keeping the birds completely silhouetted would be quite effective. This means we don't need to be too meticulous over the detail of the posing and wings — using a mass of solid shapes that merely suggest the idea of the pose. Plus, I think it would look quite nice against the sky...!

Low angle shots of birds in flight are surprisingly difficult to find, but a happy accident led me to stumble across this video:

It's pretty low quality but the angle is pretty much what we're going for! It's also far too quick, but fortunately I was able to download it and scrub through frame-by-frame. This allowed me to track the positions of a couple of the birds and get an idea for how we might go about the poses:

Again, horrible quality, but it serves to provide a guide as to what our poses might look like. I started thinking at this stage that the easiest option might be to create one basic body shape for each crow, and have the wings as separate layers. That way we'd be free to rotate or scale them between each keyframe — sort of like inbetweening?

Using the shadows as a reference I scribbled out some quick silhouettes to get a feel for the poses. It's almost completely eyeballed, so the proportions are totally off and I didn't particularly expect it to animate perfectly, but it should serve to give us an idea of whether it might work or not...

I drew out a rough sketch of the puppet's body shape using the first one as a reference. I tried to bear in mind the loose anatomy of the bird and made sure to give myself extra 'neck' with a rounded edge, so that we would be able to move and rotate the head!

To neaten things up I traced the outline using the pen tool and then filled the path with solid black, giving a clean edge. How lovely!

The puppet's body would remain the same — we can just pin the wings to him and rotate as needed. The head and body are separate layers and can be puppeted as well, so we could get a nice tilt of the head to counter the movement of the wings and add a little more life to the cycle.

I then just repeated the process, tracing over my wing sketches with the pen tool and filling with black on separate layers.

I definitely think we'd need more frames to ease in and out of the up and down positions, but it kind of gives you an idea as to what we'd be needing. I also just realised they're not arranged in sequence... whoops.

I very quickly slapped them together to see what they'd look like in motion:

It's not quite there yet but I think it's along the right lines. Biggest issues, I think, is the downbeat. It lacks any sort of power and just doesn't read very well at all. Needs to be far slower and hold on the down position a little longer as the rest of the wing starts to pull back up — there's no real continuity between that pose and the one before it. It just kind of jumps into this huge black mass and doesn't really 'read' at all. I think I focused a little too much on the reference and didn't really consider the motion or timing or the mechanics of the movement too much. I think if I can fix up the downbeat and sort the timing out it should look alright. It's getting there at least.

I'd also like to look at animating the body so that it bounces up and down, countering the motion of the wings. That will certainly help. Also bearing in mind that, on-screen, it will be much smaller — as was the case with my last After Effects test it should look nicer once it's actually put together and completed. Not that it's an excuse not to polish it of course!

I'm really sorry. I'm very tired, I can't really articulate myself too well at the moment. Damn birds.


I did go back and try to apply what I'd learned from the guide on Youtube about the beating of the wings, but the result wasn't too good:

I suppose it's smooth enough, but the angle isn't quite right. I was definitely closer the first time — this just doesn't make much sense given the perspective of the body. It's animated as if it's a side-on view. Again, same problems with the extremities; I need to drag the limb from the elbow and hold the positions longer and allow the rest of the wing to catch up before it changes direction.

I think if I can combine the flexibility from this version with the angle/wing shapes of the first version, I might be on to something.

Fortunately I've found a selection of far better quality references that more clearly illustrate the movement of the wings from a low angle:

Hopefully, using these, I'll be able to get a much nicer looking test done this week :]

Initial flight cycle tests/research

Trying to figure out exactly how we can pull off the flock of crows in the first scene, I've been spending some more time looking at the flight cycles of birds and how that might fit into the perspective that we're aiming for. I've located some amazingly helpful resources and tons of reference videos that should hopefully serve to help us to figure out the motion of the crows.

There's this fantastic guide to bird flight written by Brendan Body that goes really in-depth into the mechanics of it and how that applies to animation. He was also kind enough to include masses of videos of birds in flight from all sorts of angles and speeds so that you can really analyse and see the movement and timing of every limb.

I thought it would probably be a better idea to get the hang of a general flight cycle from just one angle — say the front or the side — and fully understand that before even attempting to start injecting perspective into it, so I started looking at some general reference images combined with some of the videos from the above link and just sketching out a few of the poses, trying to figure out how the wing would look at each stage of movement.

I did some extremely crude and scribbles of what appeared to be the main positions of the cycle — keyframes, to some extent, I guess — the 'up' position, the mid position, and the furthest down position. I started thinking about the timings at this stage — the downstroke is slower than the upstroke due to wind/air resistance, depending on the size of the bird in question — so I tried to roughly plot out how many frames it might take each way. Crows are fairly small so probably around 6 - 7 frames to go all the way down and 4 - 5 to come back up? Tried to also think a bit about 'breaking' the limbs a bit to give them some flexibility.

On account of the fact that it was such a quick, rubbish drawing, I'm not surprised it didn't animate properly. I'm not going to try and make excuses for it, the limbs are just too stiff and the spacing is too uniform so it's just a straight up-down movement. It would certainly be fixable; slowing in/out of the upmost and downmost positions would certainly help, but it seems I was in a hideously impatient mood today and just wanted things to magically be brilliant and perfect first time. Blagh.

I had a little look at a very nice little guide on Youtube to see if I could better understand where I might be going wrong in terms of the spacing:

(The body's up/down movement is atrocious — I apologise, but I animated it in Photoshop (which has no onion skinning), so I just opted to make it bob around in a uniform manner and it looks really stupid. Should have left it.)

I referenced completely shamelessly copied the example front cycle from the video — sketching out the shapes simplified like this, I feel, did help me to better understand the underlying movement of the wing beneath the muscle and feathers. It made me realise that, previously, I'd neglected to consider the wing's individual joints and how flexible it actually is. Part of the reason it looked so stiff before, I think, is because it was a simple mass of straight lines and balls. Nothing even remotely organic about it. Wings are very flexible, and even at this rough stage I should be thinking about bending and flexing them to help loosen things up.

As nice as the referenced cycle is, it seems as if the wing stops at the top very suddenly — as if it hits an invisible ceiling. Might be nice to pad that out a bit — as well as delaying the wing at the peak of the up/down strokes.

The two videos above — both taken from Brendan Body's tutorial — are fantastic examples of the joint rotation in a bird's flight. You can clearly see how the bird tucks the tips of its wings back on the upstroke to decrease wind resistance (hence why it's faster!) It really helps to understand how, exactly, a bird gets its wing from A to B — not at all a simple up-down movement like you would expect.

The second video also highlights the delay in the bird's joints — to compare the wing to an arm, the forearm and hand continue to travel forward as the shoulder moves up. Much like the human arm in a walk cycle, in fact!

I think I'm slowly beginning to understand how this kind of thing works, but I still need a lot more practice. Hopefully I can tackle a few more basic flight cycles and really familiarise myself with the motion. Continuing to think of the wing as an arm and comparing the delay/breaking of joints with that seen in a walk cycle will probably help immensely and make the whole process seem just a little bit less alien.

To conclude: birds are weird.

Eternally scrolling bushes, V2

To finish up the animatic (for now, at least!) I had a shot at replacing those circles with actual bushes to see how the effect would look and, most importantly, whether it would still work...

I apologise in advance for the informal tone of this post. I do try to maintain some level of relative professionalism, but when trying to explain something relatively tricky I find that if I don't laugh (or make crap jokes), I'll cry...

I started, most logically, by drawing a bush. It is, beyond any shadow of a doubt, the foliage equivalent of the Mona Lisa — try not to weep at my artistic ability.

I actually only drew half a bush and then mirrored it — a precaution to ensure that it did definitely loop seamlessly. I'm sure it would work with an asymmetrical bush, but I didn't feel much like running that risk!

With the bush happily drawn and imported into After Effects (as a layered composition, natch), the next thing was to apply the Motion Tile effect (found under Effect > Stylize > Motion Tile)

The Tile Center parameter is the one of interest — as said before, this will give us the seamless "conveyor belt" effect. I wish I'd thought of describing it as a conveyor belt when I was first trying to find out how to do this. Would've saved a lot of time.

Slap a keyframe on there, then we need to ensure we get a seamless loop. To do that we need to make sure that the position of the bush is exactly the same at the first and last keyframes — the easiest way to do that is numerically. Right clicking on the parameter gives you the "Edit Value" dialogue box, which gives you a greater degree of control over the movement of the tile.

In this instance I chose to use "percentage of source" as the unit of measurement. I guess you could do it with pixels but I can't handle that many numbers. The objective here is to have it move in equal increments and complete one (or two or however many you want) cycles and end up exactly where it started. Theoretically, we could just insert a very high number and that would pretty much play as long as we need it to, but for simplicity I wanted it to scroll just once. I could then loop the animation using just an expression.

Anyway, in order for it to end up exactly where it started, we need to set the ending value in multiples of whatever our beginning keyframe is. Confused? Me too, but trust me, it works! So in this instance, we're starting at 50%, so our last value needs to be a multiple of 50.

150% in this case, would be one complete cycle and a half. The bush in the first frame is halfway off the screen, so ending on another half value will lead into the next bush (which will also be halfway off-screen) and continue the cycle. The next screenshot illustrates that better:

So you can see that by duplicating this bush layer many times and aligning them next to each other, we'll get a side-scrolling loop of as many bushes as we possibly need. Hooray!

The bushes are inside their own composition, so I just dropped those onto the main composition (containing the rest of the scene) and activated the 3D layer switch.

I then just tweaked the Y and Z rotation/orientations to try and roughly line up the bushes with the edge of the path. It's at this point that the first problem becomes apparent — being 2D objects rotated on a 3D axis, they're very, very flat. Not a good look. I'm not sure how we can get around this — the only thing that springs to mind is to simply draw the bushes at the correct angle/perspective to the path, but I'm not sure how that would affect the looping, or indeed whether it would still work at all. Definitely something to experiment with.

I also used the Corner Pin effect (Effect > Distort > Corner Pin) which works something like Photoshop's perspective transform to squash the bushes down as they got further into the distance, but that in itself is a problem — the more you transform it, the more distorted the bushes become, leading to pretty ugly/low quality images. Not cool.

To get the bushes on the other side I just duplicated this composition and flipped it around, adjusting the rotation to match the other side of the path.

I used the same effect to animate the path, using this seamless tile texture I stole off the internet:

I quickly desaturated it and scaled it horizontally to fit the width of the path and used the same combination of motion tile (moving it on the Y axis instead of the X) and corner pin to get the perspective right. It's quick and lazy but it sort of works and it serves to give us an indication of what we need to do. It's now just trying to replicate this effect in a style that matches the rest of the backdrops...

Jae did suggest using textures over Jazzy's flat colour backgrounds, so using a loopable ground texture might slot nicely into that. Again, it'll be something we need to experiment with before reaching a final decision.

The very last thing I did was try to get the bushes/ground to stop when the crow does — After Effects has a feature called "Time Remapping" which, to steal Adobe's description, distorts time for a range of frames within a layer. This basically means that you set a couple of keyframes to mark the section you want to mess with. It's possible to speed up, slow down or even reverse entire sections (endless possibilities for lip sync!) but it's confusing and irrelevant (for now) — the most straightforward use is to add "holds" or pauses. Basically, to freeze-frame.

Simply right click on the layer you want to alter, go to Time and then Enable Time Remapping.

I marked the point I wanted the ground/bushes to stop moving — in this case, just as the hang glider is obscuring the screen — and set down a keyframe. We want this position to be held for the entirety of the animation, so copy the keyframe and paste it right at the end of the sequence. Because the values are the same, it'll hold there. Forever.

I didn't want it to judder to a halt too suddenly, so for the first "hold" keyframe I applied an "Easy Ease" effect just to soften it slightly. I could then just copy and paste these keyframes onto the bush layers (after enabling time remapping).

The finished scene:

Again, multiple issues — squashed bushes and random cutoffs that even the crow couldn't disguise! For all intents and purposes, though, it sort-of works. Hopefully these problems will be something we're able to work around... it will, with any luck, be a simple case of altering the artwork for best effect.

Eternally scrolling bushes, V1

One of the things that had vexed and puzzled us most in creating the animatic was how to achieve the effect of the scrolling background in the scene where the crow is fleeing from the hang glider. We knew from the start that we wanted her to run on the spot as the scarecrow approached from behind, with the bushes and ground scrolling past into the distance to give the effect of movement.

Demonstrating the desired composition of the shot.

We'd come up with a few solutions as to how this could be achieved but they mostly involved laboriously animating each bush, pushing it further and further into the distance. This was both time consuming and impractical; if we wanted to alter the timing or length of the shot at all we would have to re-tweak the keyframes manually in order to compensate. We'd also considered simply drawing a line of bushes far longer than we needed and simply scrolled that into the distance, but this, again, was problematic; we didn't know exactly how long the shot would be and needed flexibility to make adjustments as necessary. The ideal solution would be to somehow have an endless loop of scrolling bushes that would dynamically adjust its length in accordance with the length of the clip. A simple enough idea, but it was the technical execution that proved to be a stumbling block.

A bit of poking around online (and the guidance of a friendly message board visitor) revealed a rather nice "Motion Tile" effect within After Effects. The Motion Tile basically allows you to take any layer, image or object and replicate (or "tile") it across the entire composition. Altering the "Tile Center" property moves the tile within the constraints of its bounding box without needing to move the layer itself. By keyframing this parameter, you can create a sort of conveyor belt effect with almost any image.

I created a simple test using a basic circle to represent the bushes to see whether or not we would be able to achieve the desired effect in this way.

I actually animated the bushes next to each other, scrolling in a straight line. The illusion of perspective was created by placing the animated bushes within a new composition and making it a 3D layer. I was then able to adjust the Y and Z rotations so that the bushes ran alongside the path, appearing to vanish into the distance. Unfortunately there's a sharp cut on the last bush which, fortunately, we were able to disguise by placing the crow over the top — ideally, however, we'll be able to find a way to rectify this more neatly as we're otherwise very restricted as to where we can position the bird.

The animation does loop seamlessly and certainly works for these purposes, aside from a few kinks that need to be worked out. The perspective needs to be tightened up — ideally, we'll find a way to get the desired perspective without distorting the artwork too much. As it is we're needing to seriously re-scale the bushes which will inevitably lead to horrible image quality — though it's less noticeable with such a simple circle.

At least we know now that we can get the kind of effect we need. Certainly it needs refinement, but the basic principle is there! Hopefully we can do something similar with the ground texture, although creating a loopable ground tile could prove to be much trickier. I'm going to investigate potential solutions for the ground tiles and replace the circle with an actual bush to see how it works out.