2D Flash Animation in Flash – Part 6: Coloring the Animations

[Part Six in multi-part series about “Link’s Prize,” a 2D animation done in Flash. See the bottom of the post for the rest of the series.]

Previous: Painting the Backgrounds

Materials used:

Flash, wacom tablet

Outline:

-Not as easy as you think
-The Color Process, Version 1.0
-Changing a color layer quickly
-The Color Process, Version 2.0
-Shading

Not as easy as you think

At this point, the animation is almost complete ... The animations are smooth, the backgrounds look good, the sounds and music are in ... all that's missing is coloring in the animations. Piece of cake, you say? Ha-ha.

I left this part of the process until the end because I knew it would turn out to be the most boring, soul-draining and looongest part of the whole process. That mostly has to do with the fact that my approach to coloring was terrible. Since then, I've learned a lot about how to make the coloring process quicker, but, not before spending many long, back-aching hours hunched over the computer.

The Color Process, Version 1.0

In a nutshell, each color gets its own layer, placed underneath the animation layer. Using the drawing as a guide, I paint in blocks of color using the brush tool.

Here's how it works. First let's say I have a frame like this (the background was made invisible):



I make sure the drawing layer is locked and make a new one beneath it for, say, everything green. Then I take the brush tool [], set it to a larger brush and turn on pressure-sensitivity []. Then I paint in the color. I usually will quickly make an outline around the area I want to fill, like so:



Then, with the fill tool [], I fill in the rest of the color. It can be somewhat faster if you divide the process up: First, draw the outlines for all the frames one by one, then go back and fill them in one by one (assembly line style).

In this way, I meticulously colored Link's yellow hair, skin, green clothes, and other details. Each color has a separate layer just in case I need to change the color later.

Changing a color layer quickly

Say you have just finished coloring all of a character's skin and you realize that the color you chose is too dark or too orange, or something. To correct that, first, make sure all the other layers are locked. Then, select the onion skinning tool []. Then, in the onion-skinning drop down menu [], select "Onion All." This will show you all the drawings on that layer at once. For example, here's the green clothes layer with onion skinning across all frames:



Then click this button []. This will make them all selectable. Now all those faded colors will look solid, like this:



Click Edit>Select All. (I recommended making a custom shortcut key for this function.) Here's what they look like all selected:



And finally, with all of them selected, you can go to the Color Mixer and select a new color, changing them all at once, like so:

The Color Process, Version 2.0

The problem with the previous way of coloring animations is that it's very, very hard work. If you have a 100 frames to color, and the character is made up of 4 colors, that's 400 frames to labor over. Pain in the butt. If I hadn't put so much work into the previous parts, I would have totally given up on this animation (that's why I left this part until the end!). I really did consider it.

But along the way, I experimented with other ways of coloring. It would be really nice to be able to color with the fill tool - just click, go to the next frame, click, next frame, click ... that would take so much less time. The problem I've had is that my drawings are quite rough, with lots of holes and "eyes", made by criss-crossing lines.



So, I decided to try a new approach, where I take the time to make each drawing look extra nice, without holes or gaps in the linework. I figure the extra effort put into the linework will equal even greater savings in time spent coloring. Also, having even cleaner linework is not a bad thing.

I couldn't try this coloring style with the Link's Prize animation because I had already completed the linework and wasn't going to redo it. So, I made a very short animation with which to try it. Here it is:




So first, let's look at the linework from this animation. See how it compares to the linework in "Prize"?



It really wasn't as hard as I thought to make the linework cleaner. Once I did that, then I copied the drawing layer onto another layer (using the "onion all" onion-skinning feature). Then, I filled in the color blocks using the fill tool. I still did each color on a different layer. If you need to adjust the color of one layer, it doesn't matter that the black lines are there too; they can be changed to the new color as well, since the original black lines lie untouched on the top layer.

Shading

I'm still not sure how to approach shading. When I say shading, I mean adding shadows and highlights to the character.

For "Prize," I just made a new layer for highlights/darks of a particular color and then drew them on with the brush tool. So, if the character is four colors, and one dark and one highlight for each color, then that brings the coloring frames up to 1200. Not fun.

I'm experimenting with the following technique:

Let's say you have a base color layer, like the skin layer in the image below:



Copy the base color layer to a new, higher layer. Make that layer darker (See "Changing a layer color quickly", above).



Then, using the lasso tool [], select the part that will be the lighter color:



and delete it:



Important note: When choosing the shadow color, don't just pick a darker color. Pick a color that is dark, as well as more pale than the base. In other words, don't just pull the slider down to make the shadows, but move the color picker down toward black as well.



I hope this way of coloring will prove to be better, even in larger scale projects. We'll soon see!

So, that's it! It's finished! Yay! I hope you have enjoyed this series. I appreciate any and all comments on what you've thought of it so far. If there's something else you'd like me to go over, anything at all, please leave me a comment or send me a message. Thank you all for your kind words!

Heather

Part 1: Idea and Storyboards
Part 2: Making an Animatic
Part 3: Drawing the Backgrounds
Part 4: Animation Preplanning and Animating
Part 5: Painting the Backgrounds
Part 6: Coloring the Animations

2D Animation in Flash – Part 5: Painting the Backgrounds

[Part Five in multi-part series about “Link’s Prize,” a 2D animation done in Flash. See the bottom of the post for the rest of the series.]

Previous: Animation Preplanning and Animation

Materials used:

Painter 8+, Photoshop, wacom tablet

Outline:

-Prepping the Drawing in Photoshop
-Entering Painter
-The Base Color
-The Lights
-The Darks
-The Colors
-Back to Photoshop

Prepping the Drawing in Photoshop

Remember when I drew the backgrounds? For each shot, I made a drawing, scanned it in and used a black and white version as the basis for animating. I saved two versions: a small 720x480 version for the animatic, and a larger, 300 dpi version for use later. The latter is what I'll be working with now.

Here's the background again from Shot Three:



There's not a lot of prepping to do. First, you want to make sure the drawing layer is not the lowest layer. The reason being that Painter will lock the lowest layer so you can't move it. That's no good because eventually the drawing layer will need to be on top. So, make the last layer a simple white-filled layer. That's the only real prepping you need to do.

In this particular animation, I have window in the scene, with light pouring in quite strongly. In order to make sure that light came through as strongly as possible, I used a soft-edged eraser to erase the inside of the window. This got rid of the paper texture, exposing the completely smooth whiteness of the lower layer. You can see the difference in the drawing above. The paper texture adds a wonderful quality to the paintings, but its not as appropriate for distant or blurry parts of the image.

Entering Painter

Next, I bring the drawing into Painter. I use Painter version 8. I can't guarantee that all versions of Painter will have the same results .... I hope they do ... I can't use version 8 forever ...

Anyways, this is what, eventually, my layers are going to look like:



All the backgrounds were done in the same way, with the same layer system. All except for the first one, which was an exercise is crazy working and reworking and crying and tearing my hair out and then reworking again. If I hadn't been on a crazy high of diet coke and green tea I could have written about it.

This system is simple, and I think it works well. I'm sure I'll be using it more in the future. So, the first step is to take the drawing layer ("Layer 0" in the picture above), and set it to "Gel" in the blending options (where it says "Normal" in the picture above). "Gel" is almost exactly like "Multipy" in Photoshop, but I think it's a bit nicer. That may be a completely baseless bias.

The Base Color

Below the "gel'd" drawing layer, at the very bottom, is the blank white layer whose purpose is to satisfy Painter's need for an immovable first layer. Then, above that is the "base" color. The base color will be, for the most part, seeping through the whole painting and tying it together. I recommend using a color that will be most present in the final picture. So pick a color, then just fill in the whole image with it. I used the same color for all subsequent shots to help unify the look of the shots.

Here's what it looks like so far:

The Lights

Here's an important detail: I work with the Oil Pastels - Chunky SOFT Pastel. That's the only brush I use. It has an amazingly soft feel and blends like magic. I LOVE this brush. I toggle the size of the brush using the [ and ] keys. This is amazingly helpful. I also use the [g] key to switch to the hand to move quickly around the scene while zoomed in. The [b] key brings you back to the brush tool.

The next step is adding the lights to the scene. Make a separate layer for your lights values. Then, I select a color that is appropriate to the light source. In this case, the light was from the sun, so I used a pale yellow light very close to white. Using the oil pastel brush, I added the light values. Afterward, it looked like this:



All of the lights were added with same color; the variation in the strength of the color comes from the varying pressure I put on my stylus. For example, I painted the inside of the window very hard, and tried to make the color very solid. Conversely, for the walls, I painted with an extremely light touch, and allowed it to be a little messy, going along with the paper texture.

The Darks

Where there's light, there's dark. The darks will make another layer. This time, I picked a color only slightly darker than the base. Too much very dark areas could really ruin a drawing like this. In the past I've overdone it with the darks. Just because you make a ton of light areas does not mean you need a ton of dark areas.

Here's what it looks like now.


In this case, the difference is barely noticeable. That's good.

The Colors

I've always had trouble painting. I think I'm more of a black-and-white, pencil on paper kind of girl. Painting, with all the colors and tones and values is really a lot to handle. Light and values I can deal with, but colors ... that's a whole other ball game. The reason I like this technique is that it allows me to focus on those light and dark values and then add the color later, instead of the other way around.

So, of course, there's a color layer. It goes above the light and dark layers, but not above the drawing. In this animation, the lighting makes the backgrounds quite dark and the colors aren't so strong. I still think however, this approach will work on more brightly colored backgrounds.

The color swatches layer:

For this sequence, I really only used about six colors or so, including the dark and light colors. I choose a color for the dark wood of the bed, the light wood of the bed, the pot, the pot's design, and the floor. That's about it. For each of those colors I kept a sample swath on a separate layer called the "colors" layer. I only had this idea halfway through painting the drawings, but anyway, saving your colors is really important for ensuring the color continuity between shots.

When I color, I set the brush to a lower opacity, like 10%. Even then, I still color very lightly. You want to build up the color very gradually, making sure not to overtake the value you made underneath. You're just washing color into the base of values you made earlier. For example, if you paint too hard in a dark area where the color should be faded and barely perceptible, then it will look really out of place. However, there are places where strong color will be appropriate.

Here's what the painting looks liked with the colors added:

You can also see the swatches of color I used for reference, stored up on a separate layer.

To really make the backgrounds look nice, you could add color layers above the drawing and subtly build on the color while toning down the black lines. I did that for the very first drawing, and vowed not to do it again in the interests of my sanity. Coloring both above and below the line drawing is great and highly recommended, but not if you have many many scenes to finish in a short time.

Back to Photoshop

That's about it for coloring in Painter. Next I brought the drawing back into Photoshop. For whatever reason, I am convinced that the 'multiply' in Photoshop is not as good as the 'gel' in Painter . So, I don't open the psd directly in Photoshop. I save a jpeg version from Painter and open that in Photoshop.

Note: For some reason, when you open jpegs made in Painter, they come up as with the same height but only a fraction of their original width. This has something to do with the Aspect Ratio, but I'm not sure exactly what's going on with that. If this happens to you, you can correct it in Photoshop by clicking, Image > Pixel Aspect Ratio > Square. Maybe it's just me. I'm not sure.

The last thing that I do to these paintings is add the glowing light around the windows. I'm sure there are many ways to do it, but this is what I did:

First, I made a new layer for the glow. Then, using the selection tool, I drew a 0-feather selection around the exact inside of the window (not that exact, just a quickie selection). Like this:


Then, I made a bigger 80pixel-feather selection, holding shift to add it to the original selection. In the picture below, the selection looks much smaller than how I actually drew it. When I made the selection, the lines went just past the borders of the window.


Finally, I selected white as my foreground color and used the Fill tool to fill in the glow. Like so:


And here's the final piece:

(If it looks smoother, that's because the previous shots were screenshots of a zoomed out, high dpi file, where the large amount of data doesn't look as good zoomed out.)

And that's all for that! Once again, there's a lot more thought and effort that goes into the painting besides the practical steps. I'll try to get to those in future posts. Stay tuned and check back often! Also, if there's some topic you would like me to go into more detail about, shoot me a comment or email. Thank you!

Next: Coloring the Animations

Part 1: Idea and Storyboards
Part 2: Making an Animatic
Part 3: Drawing the Backgrounds
Part 4: Animation Preplanning and Animating
Part 5: Painting the Backgrounds
Part 6: Coloring the Animations

2D Animation in Flash – Part 4: Animation Preplanning and Animation

[Part four in multi-part series about "Link's Prize," a 2D animation done in Flash. See the bottom of the post for the rest of the series.]

Previous: Drawing the Backgrounds

Now the fun [hard] part: Doing the animation.

Materials used:

pencil, paper, Flash MX+, wacom tablet

Outline:

-Getting Organized
-Preplanning
-Getting into Flash
-Animation!
-The Rough Version
-The Nicer Version
-Secondary Action

Getting Organized

With the animatic complete and the backgrounds in, the next big chunk was the animation. By far, this process takes longer than any of the others, as you can imagine. So let's get started.

The very first thing I did was to make a list of the shots and decide which shots are the most important. You want to animate those first.

What makes a scene important? It could be that the shot is the climax of an emotional sequence, or a money shot, some shot whose raison d'etre is to impress your audience with your animation skillz. It could be those shots that made you want to make this animation in the first place. Basically it's any scene that needs to look GOOD.

Now this is an important point. Not every scene needs 100% of your efforts. Before I did this project, I would usually approach each project by doing scene 1 (make background, color it, animate) and then scene 2, scene 3 ... etc. I did this with the Majora's Mask animation, and I lost steam around shot 6 or so. By animating the most important scenes first, you can put all your fire and energy into them, and leave those less important shots for when you're racing to finish.

For this animation, I decided that the most important shots were Four: "Link turns over and opens eyes," Five: "Link gets up and puts on his shoes," and Seven: "Link washes face." Those were the most important because the purpose of making this short was to show Link being cute, and those were the cutest shots. :) So, for this tutorial, I'll be talking about the first shot I animated, scene Four. Here we go.

Preplanning

Here's what happens in the shot: Link rolls over lazily and then opens his eyes.

I started by roughing out the shot on paper. I knew that he would somehow push up on the blanket, and turn at the same time. I tried to imagine how one does that, and did a very simple six-pose drawing of the action:



I was having a hard time with it. I didn't quite get what was happening with the arms while one is turning in bed. So, the next thing of course is to try it out. I went to my bed, covered myself with a blanket and tossed and turned like someone dreaming about Freddy Cougar. It was fun. I tried to pay attention to what my hands were doing. How my body was responding. How can one turn using the least amount of energy possible. Having a sense of it in my mind, I went back and redrew the thumbnails.



I picked up on several things by doing this. (long description)--> First, imagine you're on your side, lying in bed, facing left. You start to turn onto your back, and swing your left leg in an arc to the right that places it past your butt. You start to roll onto your back, planting your feet and having the knees turn upward. You lift the blanket with your right arm to prevent the blanket from constricting your rising knees. Having turned onto your back, you put the weight on your shoulders and feet, and lift your butt up and over to the left (rolling has somewhat put you way over to the right). Then you release your feet and continue rolling until you are on the other side. To finish the roll completely, you lift your upper-body up with your hands and butt planted and plop down such that you're face is facing the sheets (not straight out).

That's a very complicated description. But these are the kind of details that you need to think about when animating. What are the forces acting on the character? Where is the weight distributed? You don't need to describe it in words (like butchered attempt above) but have a sense in your mind and somehow translate that into thumbnail drawings.

Remember, the more thumbnails you make, and the more effort you put into them, the better your animation will be. You want to have a clear idea of what the actions are before you go into Flash, otherwise you'll spend a lot of frustrating hours fixing and reworking instead of animating. Not fun. (Not that it's totally avoidable, by the way. Sometimes hours of reworking aren't all bad.)

Still, it wasn't working quite right, so I went back to bed and tried again. Here was the final round of thumbnails.



One of the new points I learned was that, as your rolling, you're not rolling in place, rotisserie-style, but actually displacing. You're head mostly stays in the same place, while you're legs and butt are rolling away in an arc, like moving a compass. That's why you occasionally stop, pick yourself up, and adjust your position before continue rolling.

With all these details in mind, I finally decided I was ready to start animating.

Sidenote: To video or not to video?

In preparing to do a shot, I recommend video taping yourself with your digital camera or something and then watching it for insights. However, I find sometimes that doing that can be very distracting. You shouldn't be rotoscoping, or trying to get the animation to be exactly like a video. You want it to be a caricature of real life, something believable, without dipping into the uncanny valley.

So, I generally, I don't video unless the action is really complicated, or an animation is not going well and I need a boost in a different direction. That's my preference. If I was working for a studio, then I'd probably make a video for each shot I was working on, since each shot you make has to be top-notch. But if I'm making my own thing, and just trying to make something feel cohesive, I don't think I have the patience for recording and analyzing video of myself for every shot. That's just my preference.

Getting into Flash

Ultimately, you want to be able to take your thumbnails and put them directly, as is, into Flash. Then fill in the gaps. Simple as that (but never really).

So this is how I do it. I work in Flash MX. I have Flash 8, but for some reason, I think that the stylus works better in Flash MX (Is it just me? Does anyone else have this problem?!?). So I animate in Flash MX and compile the whole thing in Flash 8. It's kind of annoying, but that's what I do.

So, I have the scene open in Flash MX. The size of the movie is set to 720x480 pixels, and the frame rate to 24 fps. Below is the general look of my workspace:



Some notes about my workspace: In order to see the character clearly, I turn the background into a movieclip and set it to a low alpha (using the properties bar). Also, you may notice the obscenely unorganized mess of scenes I have on the right. That exists because every time I think I'm going to make a major change to my animation, I duplicate the scene and work on the duplicate.

Animation!

When I animate, I generally animate two times. The first time is a very rough version, where the character is represented by basic shapes, and the second time is the final look, a clean drawing of the character. Here's an example of the rough and final version of one frame:



In the first round, you are focused on making the animation smooth, and getting the timely just right. In the second round, you're making the character look good.

The rough version

I draw with the Brush tool. Flash users know that the size of the brush tool, unlike the pen tool, varies according to the amount you are zoomed in. This is very important. So, for the rough version, I work at 100%. For the nicer version, I zoom in. Sometimes I'll work at 150%, or sometimes 400%. It depends on the size of the character in the shot.

So, with the stage set to 100%, I make a blank keyframe at frame one. In frame one, I draw my first thumbnail sketch. And then in frame 3, I draw my second. And frame 5, my third. I copy directly from the pencil sketches into Flash, skipping each frame. (You don't have to skip a frame, I just do it because I know most frames, in the end, will be at least one frame apart.) The timeline looks something like this:



Onion-skinning is the feature that allows you to see frames before and after the one you're working on. Have it on as your working. Being able to see the previous shots is the bread and butter of doing animation. However, especially in this stage, where you're putting in the really important poses, don't feel like you have to copy the last drawing really closely. You're keyframing, so the poses are going to look dramatically different from each other, as they should.

Once you have copied all your drawings into Flash, play the animation. When you first play it, it's going to look very rough, and too fast. Remember, the more keyframes you put in, the better it will look. Picking the right points to make a keyframe is difficult to judge - a tutorial on that to come - but in general, if you have a 200 frame animation, with a lot of action, and you only put 5 keyframes, it's not going to look right.

So, the next thing is to adjust the timing and pacing of the action. Basically, that means spread the frames out, spacing out the frames so that the action doesn't feel too slow or too fast. It's hard to tell whether the timing is right until you put in the inbetweens, but for the time being try to space them out as best you can.

Here's an example of what I mean. See how the frames are all spaced out? How much you space them out will depend on the relationship between the drawings in those frames.


Ok, you have an animation, in essence. Now, the best thing you can do is make this part look and feel as best as you can. This can save lots of work later. If you notice the head is getting increasingly bigger throughout the shot, then fix it NOW. Those kinds of things will be a real pain in the butt later, believe you me. If you're not sure if it feels right just because there are too few keyframes, then do some inbetweening. It's only recently that I've been trying not to do the entire animation twice, only the keyframes; however, before that I would make the complete animation, inbetweens and all in rough first before going to the nicer version. There's nothing wrong with that, it just takes longer.

The Nicer Version

Ok, say that's done. Then, make a separate layer. This is going to be your "nice" layer. Lock and put the "rough" layer in outline mode. Now zoom in. How much you zoom in depends on how big the character is in your shot. You want to zoom in at least 150%, if not more if possible. The reason for this is that zooming in forces the brush to be smaller, and small, fine lines (even if they're messy) look better at 100% than big, chunky ones. Also, remember to write down somewhere off stage what zoom in percentage you used, so you can maintain a consistent line thickness.

So this is what it will look like. (Sorry this is not Scene Four ... I actually deleted the exact rough version I copied the nicer version onto. Whoops!) I was zoomed in at 249%. The current, in-progress nice drawing is in black. The rough version I'm tracing over is in red outline. You can see the previous keyframe in faded black.


So zoom in, and on the "nice" layer, draw a nice version of the character using the rough version as a guide. Do this for all your keyframes. As you work, it's a good idea to use the [,] and [.] keys to quickly "flip" through your frames and see if the animation is flowing or not. I constantly have my fingers on those frames as I'm drawing. I sometimes get in the bad habit of just wanting to race through the drawings and not watch it until I'm done. Don't do that. Before you know it, the character's head has tripled in size from how it started. That's really annoying. It's easier to catch it and correct it as you're working, not at the end.

Once you've finished all the keys, now you're ready to inbetween. So, as I mentioned before, you basically want to have the animation "on twos" which just means that every second frame is unique.

So, say you have a keyframe on frame 1, and another on frame seven., like this:


That means you're going to have two inbetweens. So you can go ahead and make those both blank keyframes.


You'll only want to work on "ones" (where every frame is unique) if A. the motion is too fast to be read on twos or B. you're masochistic. This is what each frame being unique would look like:


So, make blank keyframes in between the keyframes and start filling in the gaps. Where do you draw the inbetween? That's a good question, and one a bit beyond the scope of this article. I'll be sure to talk lots more about inbetweening and things like that in future posts, but in this series, I'm just going to talk about the general process of putting an animation together.

So, let's say you went ahead and filled in those inbetweens and have a long sequence of frames. Of course, it never ends with the last inbetween done. I do a lot of editing after that, especially with those darn reshaping heads.

Secondary Action

You might notice in the picture way back up that I only have drawn Link's body. His character is the most important, so that's the action I focus all my attention on. But after that, there's still more things going on, like his blanket and his pillow. Because the movements depend heavily on the movement of the main character, I don't draw them until after I've animated the main character. Such actions are called Secondary Actions. Examples include animal tails and long hair.

I actually didn't animate these secondary actions until I had finished the character animation for all the other important scenes. I really really wanted to make sure those were done before spending time fiddling with unimportant details like pillows. So it wasn't until all those other scenes were done that I came back and added the blanket and pillow animations.

Put these secondary items on separate layers. But, you don't want to get carried away by separating everything. I once did an animation where I drew the arms of the character on a separate layer. I think it somehow took away from interaction of the arm's weight on the body and the arms ended up looking like they were just tacked on spagetti strings, flopping this way and that.

Generally, I do Link's hair on a separate layer. In the case of shot four, the head movement was so subtle that I didn't think I needed to. You can always start drawing the hair with the rest of the body and switch to a different layer if it's getting too much to keep track of.

In general, that's it, but ...

That's a bit of a whirlwind tour of the process I use to animate. As for technique, spacing, timing and other things like that, I can recommend many books on the subject, and I'll be talking plenty on the subject here in the near future, but for this series, I'm focusing on the practical matter of making the animation.

Animation is a complex art and every time I attempt any project, big or small, I learn a ton. So please stayed tuned for more!

Absolutely, positively, send me questions if you have any. I really have no idea what people are interested in, so if you want me to go into detail about some topic, please comment, or shoot me an email, or anything! I'd like to make posts that people will be interested in. Thank you!

Next: Painting the Backgrounds

Part 1: Idea and Storyboards
Part 2: Making an Animatic
Part 3: Drawing the Backgrounds
Part 4: Animation Preplanning and Animating
Part 5: Painting the Backgrounds
Part 6: Coloring the Animations

2D Animation in Flash – Part 3: Drawing the Backgrounds

[Part Three in a multi-part series about "Link's Prize," a 2D flash animation. See the bottom of the post for the rest of the series.]

Previous: Making an Animatic

Materials used:

0.3 and 0.5 mechanical pencils, paper, scanner, Photoshop, Flash

Outline:

-Sketching the Backgrounds
-Setting up the Frame
-Drawing the Backgrounds

With the animatic finished, I next moved onto the backgrounds. You want to have a background before animating so you know exactly where to put the character and how it will interact with its environment. On the other hand, I didn't want to color the backgrounds just yet. Just in case while animating I wanted to change the background, it's easier if you haven't labored over painting the background yet. Draw now, paint later.

Sketching the Backgrounds

To get a finished drawing of a shot, the jump off point is the storyboard thumbnail. Here's the storyboard sketch from scene 3, the pan down from the window to Link:



From that, I make a bigger, more detailed version. Then, I'll usually make a few more, changing small details here and there. For this scene especially, I generally knew I wanted a pan, but getting the best setup of the shot was tricky. I made several versions before feeling satisfied. Here are all the different versions I made, the last one being the best:

Setting up the Frame

The whole movie is in the format of 720x480pixels. So, I need to make sure the backgrounds I drawn in those dimensions. To do that, first I made a sheet with rectangles in those dimensions in Photoshop.

To do this, first make a new white photoshop document using the preset, "Letter" or "A4" or whatever paper size you are going to print this out on. It doesn't matter what paper size it is since the proportions will remain the same. Then, on a new layer, take the rectangular selection tool, and set it to "Fixed Size" at width: 720px by height: 480px. Make the selection somewhere on the page. Then, use the Fill tool to fill the selection with white. So now you'll have a white rectangle on a white background. No problem. Then, double-click the layer to bring up the layer options. The last option should be Stroke. Check and click that option. I usually make the stroke black and not too thin or thick. Then, presto, you have your model box to be printed and traced.

I also like to make the box a little bigger than exactly 720x480, or have different sizes on the same page by duplicating and rotating the layer. Below are two pages I made this way. You can make your own, or even use these if you like:



a second version. I think the last one is generally the most useful:



The rectangles are either exactly or proportional to 720x480 pixels. The bigger ones are useful if you are going to be zooming in (making the background bigger) and you want to have lots of detail. So, I printed these puppies out and put them under blank pieces of paper. I roughly trace over the black lines, giving me a space to draw the background in that will fit perfectly into the movie.

This is really, really helpful. I used to just willy nilly draw backgrounds, and then have to do some reshaping in photoshop that wasn't fun.

Generally, it's a good idea to draw some bit outside those black lines just in case you want to zoom out or shake the camera later.

Drawing the Backgrounds

For the drawings I used a 0.3 mechanical pencil and a very handy-dandy eraser pen. I first sketched out the major items with a regular 0.5 mechanical pencil, then erased it and went over the whole thing with the thinner pencil. I also added small details, little nicks here and there, with the 0.3 pencil to make things look like wood. I think it worked out well.

Finishing up the drawing, I tried to make it as clean as possible. Make sure to get rid of those lines you traced to make the 720x480 rectangle. Get rid of blatant sketch lines. Some sketchiness is nice in the final product, but leaving too many sketch lines can ruin the overall effect. Also, It's harder to take them out with Photoshop than with an eraser.

Next, I scanned the drawings into Photoshop. I kept them at the size I scanned them, at around 300 dpi. Some basic Levels adjustments (Ctrl+L) makes those pencil lines a little darker (not too much) and whiten the rest. Here is the result for scene 3:



I saved this file as my working file, to be painted later. Before closing, I crop the shot to be exactly 720x480pixels, and save a copy as a jpeg. Thus, I have my large working version for coloring, and my black and white version to be immediately put into the animatic.

As I sketch, draw and scan each shot, I put them into my animatic. I make sure I've drawn all the backgrounds before starting the animation. Once again, seeing the backgrounds all together in the animatic really gives you a sense if the animation is working as a unit or not.

Overall, I'm still experimenting with drawing and painting backgrounds, but as I make progress, I'll be happy to let you know! :D

Next: Animation Preplanning and Animating

Part 1: Idea and Storyboards
Part 2: Making an Animatic
Part 3: Drawing the Backgrounds
Part 4: Animation Preplanning and Animating
Part 5: Painting the Backgrounds
Part 6: Coloring the Animations

2D Animation in Flash – Part 2: Making an Animatic

Once again, this is part of a multi-part series about the making of, “Link’s Prize,” a short 2D animation done in Flash. This is part two, 'Making an Animatic'.

Previous: Part 1: Idea and Storyboards

Materials used:

Flash, wacom tablet

Outline

-What is an animatic?
-Making the animatic

What is an animatic?

So, those of you who are animation fans know that before starting any serious animation for a film, animators first make an animatic. An animatic is basically a rough version of the entire film. The purpose of the animatic is to get a sense of the timing and pace of the film before starting the hard work of making it.

Here's the animatic for "Link's Prize":
[kml_flashembed movie="http://www.larkinheather.com/Images/artwork/animation/LinksPrizeAnimatic.swf" /]

[/kml_flashembed]

The whole animation is there, in essence. The length of each shot, camera motions, music and sounds are all set up. Even most of the keyframes of the animation are exactly as I made them in final version. Basically, you want as much of a picture of what the final product will be like before putting in the heavy work. It's easier to work on comic timing and mood and things like that BEFORE you start animating.

Making the Animatic

The animatic took only one afternoon to make. First, I copied the scenes into Flash exactly as I had them in my storyboards. After quickly throwing them into Flash, I went back and adjusted the timing of the shots. For example, I made the opening shot longer to fit better with the music. Overall, there weren't so many big changes, this being such a short animation.

This is also the time when I added the music and the sounds. The sound effects came from "Help the Wretched" at http://noproblo.dayjo.org/ZeldaSounds/. There, you can find tons of sounds effects from the Zelda series, like 'Link drowning' or 'Link falling off a cliff'. Good stuff. It's an incredible resource for any Zelda-related multimedia endeavor.

Obviously I couldn't get the animation timing down exactly to what it would be in the final product, but I got it somewhere close. If I was an animator at a studio, the timing of the animatic would then determine how many seconds I would have to work with within a given shot. For example, you might get assigned to a shot where a character has to walk across a room within approximately 200 frames.

As you make progress with individual shots, it's good to them stick them in your animatic. Replace the rough shots in the animatic with the nice, polished shots and watch the whole thing together. With each new addition, you can see how new things fit into the general flow of the film.

If you're not used to making animatics for your long projects, I highly recommend it. It's an easy way to check that your story makes sense as a whole and also keep track of your progress.

Next: Drawing the Backgrounds!

Part 1: Idea and Storyboards
Part 2: Making an Animatic
Part 3: Drawing the Backgrounds
Part 4: Animation Preplanning and Animating
Part 5: Painting the Backgrounds
Part 6: Coloring the Animations

2D Animation in Flash – Part 1: Idea and Storyboards

This is the first part in a multi-part series about the process involved in making, “Link’s Prize,” a short 2D animation done in Flash. This is by no means the best flash animation ever, but I wanted to write about the process in making it because I found it a was a highly educational experience. I hope in writing about it, you can learn something too! Ok, here we go!

Materials used:

Pencil, paper, ~~brain~~

Outline

-The Idea
-Storyboards

The Idea

So, I know I wanted to do some short animation featuring Young Link, from The Legend of Zelda, Ocarina of Time. I draw him all the time (he's so cute!) and so I've been longing to do an animation of his character for ages. However, the last time I tried to animate something with Link, it was disaster namely because 1. I had designed it to be a HUGE project and 2. my time management skills at the time were somewhat ... weak (in the sense that one week I would work my ass off, and the next do nothing but play Grand Theft Auto and drink diet coke.)

I must admit that this short, humble project was a huge first for me. It was the first time I ever have taken a personal animation project from start to finish, all without overeating, losing sleep, ingesting illegal quantities of caffeine, or generally going insane. Yay! But more on that later.

So the idea goes like this: Link wakes up, starts to get ready to start the day when he is suddenly and rudely is reminded that he has a cow in his bedroom. The whole idea fits in one sentence. Now, it's not Oscar material, but it is short and I was excited to get started.

Storyboards

I took the idea and started drawing very rough sketches of how I would layout the shots. Here's all the storyboard-related pages I drew (5 total):



(You can also see on the last page, my ideas for what I was going to do next, including writing about this whole thing here later ... ^_^)

So, about storyboarding: In the past, I used to labor over each shot of a sequence until it was "perfect" before moving on to the next one. This was a huge creative buzzkill and I would get frustrated and quit quickly.

So, this time, I first drew those main ideas, whether they were quick thumbnails of a shot, or a few keyframes of animation, those main-POW!-ideas that were the inspiration for doing the sequence in the first place.

With those down, I went back and started to fill in the rest of the sequence. For each shot, I started by drawing the very first idea that popped into my head. In the "each-shot-must-be-perfect" method, I wouldn't dare even draw my first idea, I'd just ignore it, pass it off as cliche. By drawing even that first weak idea, then I could build on it, change it to make it a better, stronger shot. For each shot, I drew several versions before moving on to the next one.

After reaching the last shot, I went back and tried to strengthen any shots that I still thought were weak. When I felt satisfied with the shots as a whole, I put numbers next to them to put them in order. If this had been a longer animation, I would have redrawn the shots so they could be easily read in sequence. However, the whole thing was only 8 shots long, so I felt I could imagine the events without redrawing it.

This way of doing things felt very organic, and less stressful than the way I used to do it. Time and time again, a theme that I've been learning is this: That you can't start off and suddenly make something perfect. But, if you make something crappy, then at least that's one step closer to making something more perfect than crappy.

That's the end of Part 1. I'll be writing the rest of the series very soon, and I hope you come back for a look!

Next: Making the Animatic

Part 1: Idea and Storyboards
Part 2: Making an Animatic
Part 3: Drawing the Backgrounds
Part 4: Animation Preplanning and Animating
Part 5: Painting the Backgrounds
Part 6: Coloring the Animations

“Link’s Prize” – Legend of Zelda animated short

Here it is:

[kml_flashembed movie="http://www.larkinheather.com/Images/artwork/animation/LinksPrize.swf" width="500" height="333" /]

[/kml_flashembed]


Finally, after two months, it's finished! Yay!

If you're curious how I made this animation, please check out the following series:
Part 1: Idea and Storyboards
Part 2: Making an Animatic
Part 3: Drawing the Backgrounds
Part 4: Animation Preplanning and Animating
Part 5: Painting the Backgrounds
Part 6: Coloring the Animations