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

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.

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.

Once our track is in Flash we can edit the fading in and out. So, with your trimming done, output the result!

Sound: Importing Your Sound Files

In Flash, go to File > Import > Import to Library and locate your newly prepared .mp3 file. Alternatively, just drag and drop it into the library. Remember to keep things organized, so stick it in a folder named "sound".

It's now available for use on your timeline, so, create a new layer, in a new folder (name them appropriately) and select the first frame. In the Sound section of the Properties Inspector (Windows > Properties) for that frame, you can select any of the sound files in the library. I named my soundtrack "podcast_shorter.mp3" and you can see it selected in the screenshot below. You'll also notice the soundtrack visualized on the timeline:

Sound: Syncing Feeling

You'll also notice a "sync" select menu in the Properties panel; make sure Stream is selected. Streaming the sound file allows it to begin playing as soon as it is encountered by the playhead. It loads and plays simultaneously, which is ideal for our needs as we're using a large sound file.

The Event sound type first loads the file into memory before playing it back, which would make accurately synchronizing our animation with the sound nigh on impossible (unless we use a preloader, starting our film once the assets have all loaded). The speed at which the sound is loaded into memory (and therefore the point at which it begins playing) depends entirely on the machine and connection being used. Even whilst working locally, you'll notice the difference.

It might be that you experience poorer sound quality with Stream selected; a tempting reason to opt for the Event sound type. You can fix this easily by altering the Publish Settings. Go to File > Publish Settings… and choose the Flash tab. Where you see Audio Stream hit the Set… button. This brings up the Sound options for the Stream sound type. Make sure Best quality is selected, with a suitably high bit rate and you're good to go.

Sound: Levels

As we're working with an ActionScript 3.0 file, you'll find the Live Preview (Control > Enable Live Preview) automatically checked. Go on, hit Enter and you'll see the playhead zip along the timeline, playing your sound file as it does so. This is great for instantaneous editing, as you'll find once you begin lip syncing.

For now, what will stick out the most is the abrupt beginning to our sound. If you trimmed it anything like I did, it will be cutting in sharply, while the intro music is playing, just before Drew starts speaking. Let's fix that in Flash by editing the sound envelope, available to us in the Sound Properties panel.

Sound: Channels

As the screenshot below demonstrates, you can easily alter the sound levels across the file. You'll see two channels; the left channel (top) and the right channel (bottom). If you're working with stereo, editing the levels of individual channels can be extremely useful.

There are two aspects of the envelope dialog to take into account here:

• Finer trimming: The bar between the two channels indicates where we want our sound to begin. The gray areas illustrate the section of the soundtrack which we've effectively deleted.
• Levels: In our case, you can see the level fading in until it reaches full volume. You can add nodes to the vector to raise and lower the volume wherever you want.

Labeling: What Labels?

OK, we've laid our soundtrack on the timeline. This soundtrack determines what happens when, so everything we do from now on will be based around it. We're going to begin with lip syncing; once we have the characters talking we can consider movement and other details. They key here, as with many things, is planning. We need to sketch out a plan so we can visualize what's going on.

Create a new folder on the timeline and place within it 4 new layers: music, drew, tash and jordan. These layers are to be used explicitly for labeling; marking out who says what and when, so you can later see how to animate your characters without needing to refer to the soundtrack every time. You can lock them to prevent objects being accidentally pasted into their frames.

Label a keyframe:

Labeling: Label Types

As the screenshot below illustrates, frame labels can be of a number of types:

We'll ignore the Anchor type; this is used for deeplinking and works much like an anchor tag in HTML. You can read more about the Anchor label type on Adobe Developer Connection.

It would be usual in our situation to use the Comment type. We're really just commenting our timeline to show where we need to place objects and movement, the labels perform no other function. Either select Comment when entering the frame label, or prepend what you type with "//" (much as you would to comment out ActionScript) and away you go.

Continue to label the speech and other events along your timeline. Scrubbing the playhead back and forth will give you a rough idea of levels (the exact frame where someone begins laughing, for example). Otherwise, hitting enter will start and stop the sound, helping you to judge where your labels belong.

Lastly, bear in mind the scale of your timeline, layers and frames. You may find that increasing the height of your sound layer helps visualize what's going on:

Increasing the soundtrack layer height to 300% gives you the following result, much easier to work with:

Labeling: Taking Labels Further

This step is by no means compulsory, but you might find it useful when you're mapping things out on the timeline.

We're going to incorporate a nifty AS3 snippet pulled together by Michael James Williams especially for this tut. The aim is to trace each label, as the playhead encounters it, in the output window whenever we test our movie. We'll effectively see subtitles scroll past as our characters are talking.

 
import flash.events.Event; 
 
if (!this.hasEventListener(Event.ENTER_FRAME)) 
{ 
	this.addEventListener(Event.ENTER_FRAME, onEnterFrame); 
	//onEnterFrame() will not be run in frame where it was declared 
	traceFrameLabel(); 
} 
 
function onEnterFrame(e:Event):void  
{ 
	traceFrameLabel(); 
} 
 
function traceFrameLabel():void  
{ 
	if (this.currentFrameLabel != null) 
	{ 
		var totalFrameLabel = this.currentFrame + ": " + this.currentFrameLabel; 
		trace(totalFrameLabel); 
	} 
}

Take this snippet and paste it into the Actions panel (Windows > Actions) on a new layer named "actions".

The first line (the import statement) allows us to handle events. The event we're listening for is ENTER_FRAME and, as the following lines dictate, upon detecting that the movie has entered a new frame, we run the onEnterFrame() function. This function actually just calls the traceFrameLabel() function (see comment in the code).

As you can see on line 19, traceFrameLabel() stitches together a string comprising this.currentFrame and this.currentFrameLabel then on line 20 outputs it for us, giving us the following effect:

To do this your frame labels will need to be "Name" type, not "Comment". Comment labels aren't exported into the .swf so the information isn't available for us to trace. Name labels are exported in to the .swf (they're more often used for navigation around the timeline) as long as you haven't chosen to place them on guide layers. The only foreseeable issue is that Flash will throw warnings if you duplicate labels; technically they should be unique. You may see a few of these fly past:

WARNING: Duplicate label, Symbol=animation, Layer=jordan, Frame=1677, Label=here

Either avoid duplicating the labels, or just ignore the warnings!

Theory: Preston Blair

Let's leave the Flash IDE for the time being and take a look at lip syncing principles.

Preston Blair was a pioneering animator who worked on (amongst a great many other things) the Flintstone's, so that brings us nicely round in a circle :) He defined what's known as the Preston Blair phoneme series; a collection of the basic mouth shapes we humans use to make our vocal noises.

He specified 10 basic mouth shapes:

1. A and I
2. E
3. U
4. O
5. C, D, G, K, N, R, S, Th, Y, and Z
6. F and V
7. L
8. M, B, and P
9. W and Q
10. Rest Position

If you draw yourself a collection of mouths which adhere to these ten phonemes, then you're covered. In our case, we're dealing with a fairly simplistic drawing and animation style, so we're actually a little less restricted than you may think. This is down to a concept known in the comic book world as closure and I'll discuss that further in the next step.

Theory: Closure

I actually covered the concept of closure in a tut The Mechanics of Comics which I wrote aeons ago for Vectortuts+. Closure (defined by Scott McCloud in Understanding Comics) describes the process of filling in the gaps, which we as readers do every time we move our eyes from one comic book image to another. We willingly suspend disbelief, absorbing ourselves in the narrative and letting our imaginations tell us what's happening between the static pictures.

To kill a man between panels is to condemn him to a thousand deaths.

Scott McCloud

I'm digressing a bit, but animations (all films, actually) are essentially a series of static comic images, the frame rate determining when we see them instead of our eyes moving across a page. We don't witness something moving, but our brains process the film as though that's what's happening. Even by watching a single static frame every second we could still allow ourselves to experience what we see as moving images. The level of detail in the drawing style and movement influences the overall effect of the animation, but we can certainly cut ourselves some slack and allow for closure taking place. It's likely that we, as animators, will see imperfections in the movement and artwork which viewers let slip by unnoticed.

That said (apologies for the rambling) it's up to you whether your lip syncing comprises nothing more than an open-shut movement, or exquisitely composed tweening; it's a decision based on communication, not necessarily quality.

Design: Character Design

Character design is entirely arbitrary. I've already discussed using the Hanna-Barbera Flintstones style, but that's just my approach because I'm deliberately emulating existing work. I'm not going to dictate how you should tackle things.

You may favor hand drawing your figures, or working directly in Flash. I tend to use Adobe Illustrator, out of habit and because it's a the vector drawing application. Plus, it works seamlessly with other members of Adobe's Creative Suite, including Flash.

Here's the Drew I drew. So to speak.

It's straight forward, is filled with simple, flat colors and can be easily separated into components for animation. Let's move on to exactly what we're going to animate…

Design: Moving Parts

Consider the parts you'll want to be animating. At his most simple, our animated Drew will need the following six features as separate objects:

1. Face: This will comprise the basic head shape plus ears.
2. Hair: A solid block which will move independently from the face when laughing etc.
3. Mouth: An obvious one this - it'll be continually moving and changing state.
4. Nose: This won't necessarily be animated individually, but it sits above the mouth, sometimes masking the lip slightly.
5. Eyes: The eyes will change state and will be blinking - definite separate entities.
6. Eyebrows: Very useful when determining expression.

Build yourself a style file with combinations of the features we listed above. Just a few versions of each feature, mashed together, can provide a huge range of expression and emotion.

Design: Other Characters

Jordan and Tash will be made up of essentially the same moving parts, though Tash has the main body of her hair behind her head with an independent fringe (one of the weirdest things I've ever said) in front of everything but her eyebrows.

Workflow: Importing the Graphics

This step depends entirely on your preferred applications and workflow. As I've already mentioned, I tend to prepare my graphics in Adobe Illustrator, but it's perfectly plausible that you're working within Flash or another program. If you've been seriously organized you may be able to import your Illustrator or Fireworks file directly into Flash (File > Import to Library..) and have the layers converted to either keyframes or layers within Flash.

The likelihood of you achieving this successfully, given the amount of objects we're talking about, is very slim (if you do manage it, without creating a library which looks like a war-torn village, then I want to know how!)

I rely on a simple copy and paste, which these days is fully supported when working between Adobe applications.

Note: If you are going to work in an external application (Illustrator or Fireworks) bear in mind that copying and pasting is often only possible between compatible versions. Copying objects from Illustrator CS5 and pasting directly into Flash CS3 won't work; you'll need to work in Illustrator CS3.

Workflow: Uninvited Library Guests

Recent versions of Flash handle copying and pasting seamlessly, but if you're working with CS3 you'll notice Illustrator objects automatically thrown into new folders in the library. "AICB" is an acronym for "Adobe Illustrator Clip Board" (a fact which you may now remove from your brain) and if you're not careful you'll end up with a real mess on your hands.

Even in CS4 and above, pasting from Fireworks gives you a similar result.

We need to aim for an organized library, so any superfluous folders and movieclips can be broken up (Command/Control + B), renamed, removed, whatever you like. Just keep things tidy!

Workflow: Tidy Library

You'll begin to realize the importance of keeping things tidy once you see how large the library becomes. I recommend you place each of the relevant body parts within folders for each character. Logical placement and naming of the mouths will be particularly helpful once we start swapping objects on the stage for lip-syncing. We'll come back to this.

Workflow: Tidy Timeline

We've organized our library, now let's focus on the timeline.

You've already created the "animation" movieclip and placed soundtrack, labels and action layers on the timeline, now take a minute to think how you're going to organize your other layers. Apply a similar logic to your library structure; folders for characters, scenery etc.

In our case, we have the scenery placed on the lowest frame of all (it's just a .png made in Photoshop) and the foreground (the desk) which has to sit above everything but the characters' arms. All other elements sit between the fore and background scenery objects.

Animating: Making a Start

OK, enough messing about, we can't put off the inevitable any longer, let's animate something! The two images below illustrate the first noteworthy change in our characters' behavior. Drew starts talking.

You'll notice a few things happening here:

• 1: You can see on the sound layer the exact frame where the theme tune stops and Drew begins talking.
• 2: At the same point, I've made a new keyframe on the mouth layer where I've placed a different mouth object.
• 3: Here's the new mouth.
• 4: The face and ears have also moved - a simple but effective way to promote realistic movement. Drew begins enthusiastically, so you can imagine his whole face moving; mouth opens, chin, ears and eyebrows move too.
• 5: And here's the simple tween of the head moving down and returning. This gives the impression that the chin has moved.

Animating: Swapping Symbols

You have your labels to guide you, so you can see where and when you'll need new mouths. Go along the "mouth" layer of each character and place a new keyframe (F6) whenever you think the mouth shape will change. This can be as simple or detailed as you decide (it can be a seriously time consuming process if you don't have some kind of tool to do it for you).

To swap a mouth, select the mouth instance on stage and right-click it to bring up a context menu. Select "Swap symbol" to open a library browser:

It should now be clear why library organization is so important. The browser dialogue opens with the current mouth symbol selected. As all mouths for each given character are grouped together we needn't look far to find what we're after.

Also worth mentioning is the registration point and position on stage of each symbol. If all mouths are positioned similarly on their respective stages, they'll be positioned properly when swapped for each other on the main timeline.

Animating: Hard Labor

There's little point in me describing what will now take up the greater portion of your animating time. You are faced with the daunting task of lip-syncing; going through the entire length of the animation and matching up mouth movement with speech. There are automated JSFL lip-syncing tools available for purchase, but for the purposes of this tut, we're tackling the challenge hands-on. Do it for all the characters, on their respective layers, as quickly as you can. Use your labels as reference and get it done roughly - you can go back afterwards and tweak the synchronization.

Note: Don't forget you're working with phonetics - the mouth shapes which describe podcast don't look right. Paadcast is how U.S. residents say it :)

We discussed scrubbing the playhead to get an impression of sound fluctuation and I mentioned using the timeline controls (in the Control menu, or keyboard shortcuts) to watch your movie and test how effective your lip syncing is.

You can also, particularly if you want to make use of the subtitles snippet, output your movie to preview the result. However, if you're checking a section of the animation which is, say, one minute in, you don't want to sit and watch the whole animation up to that point (there are only so many times I can listen to Drew saying "Al-righty and welcome"!)

Add the following line to the actionscript on your first frame:

 
import flash.events.Event; 
 
this.gotoAndPlay(1550);//enter the frame number which you want to jump to 
 
if (!this.hasEventListener(Event.ENTER_FRAME)) 
{

You can either enter a frame number, or one of the labels you've defined. Use it to skip however much of the animation you want. If you no longer want to skip any frames, just comment the whole line out.

Directing: Complimentary Movement

Once you have the lip syncing sorted out and you're satisfied with the result, go back and add convincing complementary movement. As we discussed when we first began with Drew's opening line, it's not just the mouth that moves when someone's talking. Use the eyebrows, the chin, and if you want to move beyond that, look at arms and body movement.

We're trying to make three people, sitting down chatting, appear visually compelling. Three static bodies will not be particularly interesting! During periods of silence play with the eyes, for example. Engage the viewer and imagine the characters turning to face the "camera". Have them react to what the others are saying; looks of agreement, confusion etc.

Few people talk without using their arms and hands, so animate some additional movement there too.

Directing: Subtleties

The eyes are the windows to the soul, or so they say, so don't ignore the potential they give you in conveying emotion and action. The eyes, in their few simple states, can speak volumes with relative ease on your part. All three characters are involved in this podcast, they're all in the discussion, so just because Drew is doing the talking it doesn't mean Jordan and Tash have to remain 100% static. Let them react to what's being said, subtly.

Here's an example. At around the 1 minute mark, Drew takes the lead and stops Tash in her tracks (it's not as bad as I just made it sound!) To emphasize this 'interruption' we'll make it appear that Tash is mildly taken aback, with an extended blink:

Subtleties such as these are yours for defining and will, most likely, go unnoticed by the viewer. They do, however, help greatly in improving the overall effect of the three colleagues interacting.

Directing: Artistic License

Of course, what happens while these three people sit chatting is entirely up to us. To break up the footage we can even introduce additional action and use extra sound effects. The sky is the limit - which would suggest I had come up with something more exciting than Tash drinking a cup of coffee…

Anyway, that's the example we're going to use. Firstly, grab a sound effect (do I need to mention AudioJungle as a royalty free audio resource?) such as this drinking sound loop. Then, import it to the library (keeping things organized) and place it on the timeline on a layer of its own.

I chose to add this sound and movement whilst Drew is introducing the podcast, just to break up the three motionless participants.

The accompanying drinking movement is very subtle, but pay attention to a couple of key aspects which help it on its way:

• 1: The mouth shape (obviously) changes.
• 2: Tash closes her eyes as she drinks..
• 3: ..and also raises her eyebrows (go on, suck up the last contents of a beaker using a straw, you'll find yourself doing the same).
• 4: The point of rotation on the arm movieclip is at the shoulder.

Animating: Blinking Heck

We’re going to use a single line of AS3 to add some animated realism to our characters' eyes by making them blink at random. I covered this a while ago in Quick Basix: Random Animated Blinking, but I'll go over a breakdown for you here.

You should already have a movieclip for the eyes of each character; mine couldn't be any simpler, they're just a couple of dots. Extend the timeline of your eyes movieclips and place a "blinked" state at the end of each.

Animating: Blinking Script

Add a final layer to the eyes movieclip, label it "actions" or "a" (or whatever you prefer) and lock it. Select the first frame and enter the following snippet in the actions panel (Window > Actions):

 
	gotoAndPlay(uint(Math.random()*totalFrames)+1);

This snippet sends the playhead to a random frame along the "eyes" timeline. On some occasions, therefore, the blink state is reached quickly, sometimes it takes longer. Each of our three characters will now blink at entirely random intervals. For a detailed explanation of how this snippet does what it does check out the Quick Tip.

Theory: Don't Repeat Yourself

Warning: I'm going to be referring to Dru and Drew in this step. It may get confusing.. That said, let's talk about repetitive animation.

Never write the same thing twice.

Dru Kepple

This quote was made during Dru's AS3 101: Functions tutorial whilst referring to the DRY principle of programming Don't Repeat Yourself. Admittedly, he's discussing why repeated sets of actions in programming should be wrapped up as a single function then reused, but the idea applies equally to our situation.

There's no point in animating the same movement over and over again. Animate the relevant sequence once, wrap it up as a movieclip, then use an instance of the movieclip whenever you need that movement again.

Animating: Looping Drew

In our case, we have Drew laughing and he does so several times during the podcast (hey, he's a cheerful guy). We'll illustrate that by animating a repetitive giggling movement; shoulders rising and falling, head bobbing in reaction to the shoulders, eyes closed, mouth open etc. By animating a single completion of this movement, we can loop the sequence and have Drew laughing for eternity, should we wish.

Animating: Prepare Your Sequence

There are lots of ways to approach this, feel free to apply your own specific workflow, or just follow along. Prepare the sequence on the main timeline. Select all the frames needed (in our case we'll take each of the Drew layers during this sequence), copy all frames and go Insert > New Symbol… or F8 to make a new movieclip. Now paste all frames and observe how the layers are duplicated perfectly.

You could select all the relevant frames on the main timeline and "convert to movieclip" to achieve a similar end, but the layers won't be preserved. You'll end up with all your objects on one layer, though, granted, in the correct display order.

Animating: Finished Sequence

Place your giggling movie on the timeline, emptying all other Drew layers, for however long the giggling lasts. Do this for the other two occasions where Drew is laughing and repetitive movement is necessary.

Animating: Jordan's Head

We're going to do the same for Jordan's turning head. This movement is purely a directorial decision; we don't know he's turned his head, in reality he's not even sitting next to Tash, but this adds a bit more dynamism to the scene. We can have him turn to face Tash on several occasions and by making one movieclip for the movement we make things a lot easier on ourselves.

Again, you'll notice a total absence of tweening here, they're not necessary. Each of the symbols within Jordan's head moves very slightly just a couple of times. Eyes closed, slight rolling of the head by tilting down and finish. It looks quite rough here, but you'll be surprised how effective it turns out to be.

Note: You may find it useful to place a stop(); command on the last frame of this sequence - you don't want it looping when on the main timeline.

Animating: Turn Back

We've had Jordan turn his head and it makes for a nice transition between him facing one way, then the next. Now we should make a similar movieclip which deals with his head turning back.

Right-click the movieclip of Jordan turning his head (either in the library or on stage) and select "Duplicate Symbol". Give it a suitable name such as "jordanHeadTurnRight".

Enter the timeline for this new movieclip and select all of the frames on all of the layers. Then go to Modify > Timeline > Reverse Frames. Surprisingly enough, this will reverse all the frames you've selected. You now have a movieclip of Jordan turning back to face Drew.

Execution: Exporting

This animation is headed for internet video broadcast and, as such, I need to output the result in video format. Shift + F12 will publish a .swf for you, or an .exe, or an .app, but what about a .mov? We've covered QuickTime export on Activetuts+ before, but here's a run down of what you'll need to take into account.

Firstly, don't expect Flash to export a file precisely the length of your animation; you'll have to define the length manually. If you leave QuickTime export to its own devices, it will produce a file exactly 1 frame long as that is the length of the Scene 1 timeline. Since CS3 we can include nested movies, effects achieved with actionscript and so on, but as I say, you'll need to basically hit "record" and leave the export process running for a determined time.

Figuring out how long your animation lasts is easy, time it! Alternatively, you can work out the time elapsed by dividing the total amount of frames by the fps (in this case, roughly 3300 frames / 30 fps = 110 seconds, 1 minute 30 seconds). Once you have that information, and assuming you've finished your animation, go to File > Export > Export Movie. Enter a destination filename, select the format (QuickTime) and hit enter to bring up the Export Settings dialogue.

Notable in the screenshot above are the rendering dimensions; make sure they correspond with your stage if you don't want bits chopped off. If they're incorrect, altering the dimensions is possible via the "QuickTime Settings…" button. Also, as discussed, I've selected to Stop Exporting after a certain time has elapsed, in this case 1 minute 30 seconds (formatted 1:30).

Hitting the QuickTime Settings… button will give you access to a wealth of other options for tweaking sound and vision but default settings are fine for our needs. Go ahead and hit "Export".

Once complete, Flash will have exported a .mov version of your animation!

Oh Dear: But…

Flash cannot handle exporting for video. Not properly. It just can't. Your finished .mov will be pretty darn good, but you'll notice that the sound gradually loses synchronization with the animation. In an animation of 3 minutes, the sound will likely have run ahead by about 1 second. You may find this a trivial amount, depending on your animation it may be unnoticable, but where lip-syncing is concerned there's a good chance you will notice.

You can play with settings as much as you like (.mp3 compression for the sound is often the cause of synchronization problems) but nothing will sort this one out.

If you want, check out the final Flash export of the animation () and compare it to the finished article. The credits graphic is supposed to hit the screen upon the very last note of the music. It's late.

Frustratingly, there's very little that can be done without paying for a solution; the Flash Quicktime export is not good enough and you won't be able to upload your .swf animation to any of the standard web video channels. Neither do Adobe provide an alternative method for converting .swf to video; Media Encoder cannot process .swf files, After Effects cannot take a .swf and output a video. It's a strange situation.

The most common options are as follows:

• Play your animation and screengrab it. Be prepared to lose quality, however.
• Export your animation as a .png sequence (a pile of images), place them on the timeline in After Effects (or similar video editing software) and add the sound seperately.
• Pay for a 3rd party .swf conversion tool (usually anything up to $100).

Sadly, none of these choices are exciting prospects. I used Sothink's SWF to Video Converter (for Windows), which is one of a million similar applications, illustrating the gaping hole in the market left by Adobe. And if you're hoping to take advantage of one of the free trials on offer, don't be surprised when your Quicktime animation is decorated with a large watermark.

It's an unsatisfactory conclusion to the process, but one which I felt was important to highlight.

Conclusion: That's a Wrap!

You're done! You've planned, set up, executed and published a complete animation, ready for internet video broadcast! I hope following this helped you learn something about the decision making and technical basics of Flash animation. Animation doesn't have to be complex to be engaging and as Ricky Gervais showed, even a simple dialogue can become top animated entertainment. Thanks for reading :)