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