/ forum / (archived) How the A* movies were made
Sat Apr 18, 2009 1:21 am
[This was a description of the process of making the animated A* episodes, which I produced for about the first year of the comic's existence. In fact, A* started out as silent, animated episodes only, in Flash format. I redid episodes 1 and 2 with sound after I'd first put them out without sound; when I got to episode 5 I started releasing the animation art I was drawing each day as daily comics so people would have something to look at while they waited for the animation to get finished, and I went back and converted the previous four episodes to comic form retroactively. Also starting with episode 5, the incorporation of grays increased the file sizes beyond what Flash could handle, so I switched to YouTube format, making short trailers for Flash-based sites--and again went back and converted the previous four episodes, too. Starting with episode 8, A* moved to a comics-only format, with a larger page size.]
Figured I'd write a little outline about how an A* episode is made. Maybe I'll even manage to keep this updated as I change how I do things. =p


1) Script
I type up a script in Textpad 5 (shareware). I start by typing out a list of things I know I want to have happen; this serves as the skeleton, which I fill in with more notes, eventually turning these into actual lines of dialog and direction.

2) Reading
I read/mime the script while timing myself with a stopwatch (FreeWatch, freeware), probably to the great annoyance or amusement of my neighbors. This helps me make sure the episode will be about the right length, and helps to refine the dialogue, since lines that look great on paper sometimes don't sound all that great when you actually speak them.

3) Concept art
If I have a new prop, set, or character coming up whose design is a little complicated, I may take some time at this point to do sketches to work out the look I'll be going with. This and all my other artwork is drawn in Photoshop 4--that number is not a typo, it's just my favorite version to work with--using a Wacom Intuos 3 6x8 tablet.

4) Storyboards
Following the script, I use Photoshop's paintbrush tool to sketch a layout for every "camera" shot and character pose that will be needed. This usually works out to just a bit under 100 little cartoon doodles. Here's episode 1's storyboards compiled into an animatic, for instance. I also use this stage to work out the designs for most of the new elements, so you may see a character's design evolve over the course of an episode's animatic (the designs of Vero's suit and Mar's face change over the course of the episode 1 storyboards, for instance).

5) Final art
Now I go through the sequence of storyboards one by one and draw them in sharp black and white shapes using Photoshop's lasso tool, at twice the size the final animation will be.
For the lasso drawing, I have Cut (CTRL+X) and foreground/background color swap (X) bound to the thumb buttons on my tablet's stylus. I draw a shape on the background layer with the lasso, swap so that I have the color I want the shape to be as my current background color (either white or black), then cut, and voila, there's the shape I want neatly cut in black and white.
If I'm going to need an element I'm drawing to animate across the background, first I draw it in a solid outline--no interior detail--then make that a floating layer set to either Darken (if the shape is white) or Lighten (if the shape is black). I clear the background layer and draw the element's interior details on it, select the blank areas around the floating profile with the magic wand tool, expand the selection by one pixel, float the background layer that has my interior details on it, then cut the selection out of that, leaving the form with interior details neatly free-floating, with no stray colored pixels along its edges.
If I have an element that's going to need to zoom or rotate, I make however many layer copies of it as I'm going to need frames for the final animation (at ten frames per second), then scale/rotate those systematically using Photoshop's numeric transform functions. If the object needs to feel like it's accelerating into or away from the camera, I use a calculator to figure out scaling factors per frame based on simple logarithmic functions, ie okay it needs to be scaled 50% down for this frame, 25% down for this frame, 12.5% down for this frame, etc. Objects that will scale always have to be drawn at the largest size they will appear, then scaled down--never up, because that gets pixelated and ugly.
Once I have all the final art drawn, I scale it down to final size--50%, from 1434x750 to 717x375; this is cinema 2.39 anamorphic aspect ratio, plus 75 pixels for the subtitle area at the bottom.

6) Captions
Using pre-established snap-to-position guides and Photoshop's type tool, I create all the subtitles and captions that will be needed. The licensed fonts used are Trebuchet, OCR A Extended, and Georgia.

7) Animation
I import up to 100 layers of final art at a time (the most Photoshop 4 can store in a single file), plus captions, into Ulead GIF Animator 5, and place/tween them into a 10 frames-per-second animation sequence. I render each of these sets out as an 8-colors-per-frame animated GIF file.

8) Voiceover
I record the lines of the script from a Snowball USB microphone into Audacity (freeware), where I apply whatever effects are needed, such as reverb or vocoder effects.

9) Sequencing
The sequence of GIF animations is loaded into Flash Professional CS4, and the sound files for the voices are placed at the correct spots in the animation's timeline. At this stage I tweak the duration of the lip movements to match the cadence of the speech, very approximately; my default is 0.3 seconds--3 frames--of an open mouth, alternating with 0.2 seconds--2 frames--of a closed mouth; usually one open mouth is needed per word.

10) Music
I gather music from Kevin MacLeod's free & royalty-free music site,, and tweak as needed in Audacity for volume and length before--and during--placing them into their desired places in the animation's timeline in Flash.

11) Export
I output the animation from Flash, canvas-sized up to a 16:9 aspect ratio--720x405--then scaled up to 1080p and output at maximum detail so it will look as sharp as possible in YouTube's HD mode.
Currently, due to a bug in the Flash compiler that prevents it from exporting large files, I have to export the animation from Flash in sections; I then reassemble those small video files into a single file using Vegas Movie Studio Platinum, and upload it to YouTube.