Scene 19 [flight cycle] V1 — V5

Scene 19 [flight cycle]

Version 1

The first flight cycle test, with all its individual components, still quite "stiff" looking despite all attempts to loosen it up. Unfortunately all the individual wing layers caused the animation to look REALLY choppy (even with copious amounts of blurring) so for this version I decided just to use the one wing layer and rotate it on the 3D axis to get the flap. The first attempt was pretty unsuccessful — it's got this weird rotation going on that looks as if she's pushing backwards! 

Version 2

The second version I re-did the flapping a bit, so that it travels more in a straight line with none of the weird outward rotation. It looks distinctly more like a flap now, but the timing's all screwy and the motion is quite choppy — the wing comes to a very sudden stop at the top and bottom of the movement, and overall it just looks really stiff.

Initially I thought I would just be able to alter the speed and timings of each keyframe using After Effects' curve/graph editor and use that to get a bit of overshoot going on (have the wings travel "too far" before settling back into the intended position) but I encountered a pretty huge problem:

The rotation of the wings is handled by the "orientation" parameter rather than individual X, Y and Z rotation keyframes. I did try using individual values but it just doesn't handle the interpolation as well as the orientation does. The problem is that, because the X, Y and Z values are handled by one parameter, they're also locked together on the speed and value graphs:

Basically, what this means is that I couldn't alter the curves of each rotation value individually. Altering the X rotation keyframe, for example, would also change the Y and Z keyframes, leading to all sorts of problems with things getting rotated out of place. You also can't change the slope of the curves, either — notice how there are no bezier handles on any of the graphs shown above. This is a massive issue — I was able to alter the timings to a limited extent using the speed graph but would not have been able to add any of the overshoot that I wanted.

At this point I started toying with the idea of trying to get the flexibility I wanted another way...

Version 3


I'd previously considered using the puppet pin tool alone to animate the wing, which would have given us some great flexibility and bendiness, but it's terribly imprecise and difficult to control animation as much as I would like. 


The wing is its own pre-composition, meaning it's effectively one flat layer with keyframes applied to the orientation values to give the basic flap motion. I decided to see if I could somehow combine the use of the puppet pin with the basic animation I already had...

To my great surprise, it actually looks as if it will work!

Because the bulk of the animation is being driven by keyframes, all the puppet pin is doing is bending and warping the wing as it moves. It doesn't really interfere at all and you still get a great degree of control over the animation whilst allowing a great degree of flexibility in the joints.

Still a great deal of problems with it at this point — the wing, as it comes down, looks to me as if it's going forward too much. I feel that the base of the wing should come more directly downwards and the tip needs to drag behind a little. Same with the upstroke — the middle section of wing should move first, the tip dragging. 

Still, I think it might work, as long as I keep playing around with it.

Version 4 is REALLY similar to V3 so I won't bother with it... ;)

Version 5

It probably looks worse by itself, but once we get the head and body movement going I think it could work quite nicely!

Timing's getting there I think, still not totally happy with the upstroke. I think it the upmost position is perhaps rotated a little too far back — needs to be more vertical maybe?

Chase scene ground tile test

After much arsing around this morning I've managed to start getting something prepared for the chase scene! I'm trying to figure out the best way to get the perspective of the shot right without resorting to distorting the images. This is all I've got so far:



The tile was cycled using Motion Tile, as before, and I think the perspective's looking alright so far — it's getting the bushes on there that's the trouble (though we always knew that would be the case.)

I'm not too pleased with it though — if you watch closely you can see that the animation doesn't loop seamlessly and many of the stones get cut off. The original tile was rotated on the 3D axis, leading to distortion in perspective. The edges of the image no longer line up neatly, which is essential for the Motion Tile effect to work seamlessly.

The ground itself is 3 seperate layers. Once I'd gotten the perspective of the first tile right, I pushed it into the distance to mark the horizon line. I then just duplicated it and pulled it forward until the edges lined up, repeating until the screen was filled.

The "top" view shows the layer stack (the camera is positioned at the bottom of the image, so the higher something is, the further away it will appear)

It's a start, at least, but optimally I'd like to try and get it to scroll absolutely seamlessly. After Effects' Orbit and Pan Camera tools may allow me to accomplish the same sense of perspective without actually distorting the image, meaning that the layers should still line up correctly. I'll have to have a play around with it.

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.