A Study In After Effects

20 Mar 2014, Posted by Keif Gwinn in Friends of Sketch In, News, Sketchpad

The Game is Afoot!

We are good friends of Tacit Theatre here at Sketch In Studios and have done a number of production jobs for them in the past. They’ve recently started a new show, an original adaption of ‘A Study In Scarlet’ the first Sherlock Holmes novel, running at the Southwark Playhouse.

This presented some novel challenges, as there was an urgent requirement to start the marketing, but a lack of resources available to film a more traditional promotional video as the cast and crew were busy building the production. In discussions with the producer, they were after a piece that highlighted the mystery at the center of the story and showed some of the unique aspects of a Tacit Theatre production such as the live music performed on stage.

There was already some promotional material designed, in a Saul Bass style, that I felt was an interesting image to animate. This also meant it would be a fresh approach for me as I had never worked with After Effects in this way before, I’d simply done some of the titles work that you see around the Sketch In website.

Learning the instrument

Working from the initial supplied poster, I took it into photoshop and sliced it up into all the elements on the poster so I could work with them separately. I then took it into After Effects and loaded the layers in. ‘Now what?’ I thought, never having used After Effects before. I googled some basic introduction tutorials* to working with animations in After Effects, and worked out how I could sequence the appearance of the foot steps in the right order, and in the right kind of timing for an 30 second piece. This mostly meant working out how to control the appearance of elements on the timeline, and how the timeline worked.

There’s a copy of that first pass at animating it on the right.

* According to my google history, these are some of the articles that I visited during this stage.+

+ Or basically I’ve put in the same search terms I used before and had a look at the purple links so I’ve been there before.

The mystery deepens…

The initial piece of animation worked great, but I ran into trouble when I first started taking it into 3d to walk along with the foot steps because I initially took the poster into after effects at its original 8000px resolution, which was a little bulky for my machine to render quickly, so I quickly redid all the initial animating work but at only 3000px.

I also had a lot of trouble in getting the camera to move in the way that I originally wanted, as I wanted to treat the camera like a physical camera and fly over the plane which held the animation. what I ended up working with instead was to keep the camera static, and then animate the composition moving around underneath the camera in 3d space. I’m sure this could have been done easier, and I’m still learning other techniques to do this. The link below would have been helpful if I had found it at the time.

Also, I managed to get completely confused in where the camera and the animation composition were in the 3d space, which meant when I tried to pull out and show the complete poster reveal it ended up flying off the screen to get reset. I also felt that I’d managed to squish the foot steps out of proportion and I’d also managed to do the all the animation with the text reversed! If you look carefully at the CTR in the first few seconds it’s back to front.

This meant that it was time to take all I’d learnt so far in working with the software and my resources and start again from scratch.

Intro To After Effects – 3D Layers and Cameras http://vimeo.com/3536691

Fine Tuning

Another piece of feedback I had from the initial version produced was that the animation itself was quite jerky when it moved between positions. A little research into the matter turned up the Bezier Curves and Easy Ease options of later versions of After Effects. This also opened up the possibilities of the Graph Editor to me to smooth out the movements between positions. What this means is that it’s possible to affect the rate of change moving into the keyframe positions. Every time you change a setting in After Effects you are basically just changing a number, and the automatic animation is caused by how fast the numbers move between place to place. Being able to adjust the rate of these changes allows for a lot of fine tuning when it comes to how the animation will feel.

In this pass of changes I also sorted out a more accurate rendition of the titles as used on the poster, matching up the font and the colours, and added in the details of when the play was running and where to buy tickets.

The fog is lifted.

We were concerned that perhaps it was all a bit bright and white however, so as an experiment I tried placing it into an old London fog. You can see this version on the right. What this taught me was that there are powerful tools in After Effects for performing different blends of layers. To make the fog, I went into Photoshop and generated some clouds, then imported it into After Effects and added a single layer. It didn’t look very realistic, so I added a couple more layers of the same clouds at different sizes and rotations, and messed around with a number of iterations to try and add some movement into the fog as the ‘camera’ (as I’m still just moving the composition around underneath the camera) moved to help sell the move.

I don’t think it was a complete success, and that’s why we went with the white version in the end, however this process did introduce some nice subtle features to the finished product. If you look carefully at the fade in of the southwark playhouse logo you can see it kind of fades in via a cloud effect from taking one of the additive layers, and there’s a bit of action in the reds of the post whilst we’re on the informational 5 seconds. When we finally fade up to red as well, there’s a bit of the cloud swirling around in it still. It’s these little touches that can add a lot of pep to the piece.

The mystery is solved.

So with the final feedback and one last render, the finished product was released to the world.

The story wouldn’t be complete without mentioning one more thing.

An huge part of this work was actually in the score, provided by Ella Wahlström of Tacit Theatre. Just try watching it on mute and you’ll realise how integral sound is to the finished product. She took on producing the soundtrack at the same time as getting the show up and running, and turned around versions incredibly quickly. I doff my cap to her amazing talents!

Check out her soundcloud page on the right.