Animation doesn’t have to be complex to be engaging and, as the Ricky Gervais Show podcasts demonstrate, even a simple dialogue between three people can become top animated entertainment. We’re going to draw inspiration from Mr.Gervais and animate a chunk of the Envato Community Podcast.
The Ricky Gervais Show
If you haven’t seen the animated Ricky Gervais Show podcasts, then go and check them out now! (I’ll wait). The original podcast first aired in 2005 and achieved mega success, quickly becoming the most downloaded podcast in the world. In 2010 it was adapted into an animated televised version debuting for HBO and Channel 4 – and it’s brilliant.
Part of the appeal lies in the mundane nature of people chatting; small idiosyncrasies and behavioral traits are amplified by the complete lack of action.
I thought it would be nice to animate the Envato Community Podcast. Hosted by Drew Douglass, Jordan McNamara and Tash it’s readily available to download and listen to, but wouldn’t it be nice to see what they look like sitting in their little fictional studio?
Overview
So, who’s behind the animated Ricky Gervais Show? Well, you’ll be reassured to learn that it wasn’t just a single individual. Nick Bertonazzi, Art Director for the Ricky Gervais Show project (and interviewed about the whole affair on Channel Frederator) was assisted by a team of no fewer than twenty people; two teams of ten animators working on alternate episodes.
It’s worth noting, though, that animating requires a lot of patience and hard work, so we’re going to make things as easy as possible for ourselves. We’re going to work on a single scene, animate (almost) exclusively on one timeline and keep our movement pleasantly straight forward. Luckily, the Hanna-Barbera Flintstones style used by the Ricky Gervais Show lends itself well to simple animation.
Tutorial Structure
Many of the following steps can be tackled whenever you feel neccessary, there’s no strict 1,2,3 about the processes described. As such, you’ll find no step numbers, but prepending chapters which bunch steps together in logical groups.
Without further ado, let’s get in there and animate!
Preparation: Adobe Flash Version
Which version of Adobe Flash are we going to use? It’s entirely up to you. Most of the principles demonstrated in this tut are applicable from Flash CS3 onwards. In fact, we’ll use classic tweening (as opposed to the more advanced tweening available in CS4 onwards) as this serves our simple animation style perfectly.
In any case, during this tut you should be perfectly comfortable with most versions of Flash and most common hardware specs.
Preparation: Document Setup
We have a few considerations to bear in mind whilst setting up our document. Most importantly, where will our animation be broadcasted? I’m going to upload the result of this to an online video channel (blip.tv), which accepts a standard range of video formats, so I’ll aim to output a .mov file. I’ll discuss the process of doing so later in the tut.
Online video channels usually work with (display as default) a widescreen aspect ratio of 16:9, so I’ll tailor my stage accordingly. In terms of common 16:9 pixel dimensions, 1280 x 720px is one such example, 1920 x 1080px if you’re going HD, or 864 x 486px if lower resolution is acceptable.
In our case, embracing the wide screen standard, aiming for desktop monitors around the world and maximizing web experience, we’ll go for 1280 x 720px.
We’ll also set our movie to 30fps, though the frame rate is entirely up to your preference. Working towards web distribution releases you from the frame rate constraints laid out by NTSC and PAL standards. If you’re interested in exporting your animation for television broadcast, take a look at what Tom Green has to say on the subject, there’s plenty to take into account.
Preparation: Main Moveclip
As I’ve mentioned, we’re going to be working almost entirely on one timeline. We’ll place this timeline within a movieclip called “animation” and this movieclip we’ll place on the first frame of Scene 1. Hit Command/Control F8 or go to Insert > New Symbol… to create the “animation” movieclip.
Good. We have an empty animation. I suppose we’d better start filling it.
Sound: Chosen Soundtrack
We can’t do a thing without the soundtrack on which our animation is based, so go and grab the Envato Community Podcast.
In my case, I subscribe through iTunes, so I located the downloaded .mp3 file in my iTunes Podcast directory. It’s pretty long however (around an hour) so there’s no point dragging the whole 60Mb into our Flash animation. We’ll have to trim it.
There are loads of ways to trim an .mp3 file, you may already have a preferred application. MP3 Trimmer is a shareware application which will do the job nicely, or you could use QuickTime, Soundbooth, Garageband, even iTunes can export a trimmed version of your music files.
I used Adobe Media Encoder.
Adobe Media Encoder’s track trimming tool.
Drag your file into whichever application you’ve chosen, then use the tabs to define where your finished sound file will begin and end. In our case, we only need a couple of minutes, so find a suitable position for trimming off the end. We don’t need the whole intro sequence either, so trim a chunk off that.
QuickTime 10 allows you to preview what you’re doing.
Once our track is in Flash we can edit the fading in and out. So, with your trimming done, output the result!