Flash Animation 5: Creating a Complex Character of Movable Parts

mla apa chicago
Your Citation
Sanders, Adrien-Luc. "Flash Animation 5: Creating a Complex Character of Movable Parts." ThoughtCo, Aug. 9, 2016, thoughtco.com/flash-complex-character-of-movable-parts-140712. Sanders, Adrien-Luc. (2016, August 9). Flash Animation 5: Creating a Complex Character of Movable Parts. Retrieved from https://www.thoughtco.com/flash-complex-character-of-movable-parts-140712 Sanders, Adrien-Luc. "Flash Animation 5: Creating a Complex Character of Movable Parts." ThoughtCo. https://www.thoughtco.com/flash-complex-character-of-movable-parts-140712 (accessed September 23, 2017).
of 10


In this lesson, we're going to learn how to "cheat' on making detailed animated characters in Flash without actually drawing every frame. In past lessons we've animated basic shapes; while a bouncing ball with a face is easy to do and can be entertaining with the right script, we're going to go for something a bit more complex, using techniques we've already learned in more advanced ways, along with a few new tricks on importing files into Flash.

With that in mind, meet Lex; I've created him just for this lesson. You should create your own character for this lesson, but don't get too detailed. You'll notice with Lex that I started off with basic shapes, and then retraced to clean line art; you'll need that. In this lesson, clean, crisp line edges will be very important, as we'll be breaking our characters apart into different pieces. We'll also be coloring them much more simply than the colored version of Lex in the above image, but I went ahead and did a detailed version just to get an idea of my colors.

Note: In the preliminary stages of drawing, before importing into Flash, I'm working with pencil on white copy paper, retracing using an Artograph light desk, and then scanning into Photoshop for color and file exporting. I prefer it this way, but you can also draw directly in Flash, using your mouse or tablet. The principles covered still apply; just use the previous lessons on drawing in Flash, and make sure to make a symbol of each part.

of 10

Breaking Your Character Down into Parts

What we're going to do now is pull Lex apart by retracing his parts separate from the whole. What you have to think of when you're "breaking down" your character is how he/she will be moving, and from what points; when animating humanoids or anything organic with limbs, it's important to remember that

most motion happens through rotation at pivot points

rather than through vertical or horizontal movement. Limbs move in arcs.

So I separated Lex's limbs at various pivot points: separating the head, and then breaking the arms away and pulling them apart into shoulders + upper arms, forearms, and hands. Notice that I drew in the right arm (Lex's left) in full although it's hidden behind his body in the original art. This is because the arm will be moving, and not always hidden.

I didn't break down the trunk because it won't be moving. However, I did break away the facial features, because they'll be moving independent of the head itself, and I'll need to be able to control those as separate parts--even the eyeballs, although the nose is static,. I also made the hair a separate piece, because it's going to be a layer on top of the head and it needs to cover without having to be adjusted in every panel, as it will hide some of the facial features.

If you look below the eyeballs, you can also see that I drew an open mouth. While it's not visible on the original art, there is still an interior to the mouth, and Lex will be talking, so we'll need that.

of 10


Now on to color. If you're using Photoshop or a similar program, you should adjust your brightness and contrast before starting to make sure that your line work is as clean as possible. If you did your retracing in ink, you should have solid black lines; I prefer to use pencil , so I had to increase my contrast to get clean black. If you're drawing in Flash, you won't need to worry about this.

You can see that my color is more cel-style than the original. This is because importing rasterized files into Flash increases the size of your animation, which makes for a longer download time; if you're drawing your character in Flash, you'll have an advantage there, as yours will be vector-based and won't take up so much space. It will also resize cleanly, while rasterized files will pixelate.

Keeping your color simple will reduce your filesize. The color is also simple because there are places where the lines don't join seamlessly, and instead end in open areas of color. That color will need to mesh together when I reassemble Lex, so it's better to keep it as simple as possible. So I went with three shades on each color--one primary color and two variations of shadow on matte parts like the jeans, and one primary, one highlight, and one shadow on glossier objects like the skin or eyes. The only place where I deviated from this was the hair; I used a primary, a highlight, and a shadow, and then added a few touches of white. Notice all colors are in block shapes.

of 10

Making Your Character Parts "Transparent"

At this point we'll need to export each part as a transparent GIF file, so we can pull all of the parts into Flash as separate pieces.

If your'e drawing in Flash, skip this step and move on to Step 8.

In order to make the separate parts into transparent GIFs, we'll need to clear out all of our white space until the parts are floating on a transparent background. Most graphics/editing programs have a magic wand tool, which can automatically select an area based on color fill; they also have a "contiguous" option or something similarly named. When you select "contiguous" areas, it means that the area selected won't break past any line boundaries. In Photoshop I used the magic wand tool with the box next to "contiguous" checked and a tolerance of 32, and then clicked to select all of the white space outside of Lex's parts before deleting it (the checked background in Photoshop denotes transparency/a blank canvas with no fill). I don't want to delete the white areas inside his eyes and shirt, which would happen if contiguity was turned off.

If your linework isn't clean, you may have problems getting a clean selection and may have to take an eraser and go back to clean off a few remaining white pixels here and there.

of 10

Additional Break-Down Tips

Once that's done, select your parts one at a time and copy-paste them to a new document. Save them as transparent gifs, 256 colors, no matte. We don't want blocks of white space around them when we bring them into Flash. I've saved mine in a separate folder called "parts bin" with fairly obvious names: leftbicep.gif, leftforearm.gif, rightbicep.gif, rightforearm.gif, etc.

It's very important to break your facial features down into separate files. While I retraced the face as a whole piece, when copy-pasting into new files for the individual parts I pulled it apart even further. Remember that the face is the most expressive part of the human body, and has dozens of nuances of individual movement. Eyebrows move independently of the eyes; eyeballs move independently of eyelids, lips move independently of tongue. There are also various layers; I have the bases of the eyes, for example, and then the eyeball would layer on top of that--but then I made separate parts for both of the upper eyelids, both to cover the eyeballs correctly and so that Lex can blink or close his eyes. The same goes for opening and closing the mouth; the lips are made separately, and would layer over the open mouth piece, which would show past the lips when they move.

My entire parts bin, when finished, has only 64 kb of files--and that includes the 10kb detailed background that I exported. Make your files no larger than they need to be.

of 10

Importing Your Character Parts Into Flash

Now we'll finally be taking all of this into Flash. To start with, I opened a blank document, and then set it to 6:40x480 with a black background; I chose 640x480 for standard television production standards, rather than the 320x240 web standard, though both have a 4:30 aspect ratio.

To bring your files into Flash, go to File->Import to Library... and navigate to your parts bin folder. Rather than click to import them one at a time, you can hold down the Shift key while clicking and dragging over the entire file list to select them all, before clicking "Open". In your Library (accessible by hitting F11/Ctrl11), you'll see the full ist of your parts populated. The small icon next to them that looks like a tree indicates that they're graphics files rather than symbols, movie clips, buttons, etc.

of 10

Converting Bitmap Art Into Vector Art

Now here's a nifty little trick to convert your parts from rasterized images to clean vector drawings.

Do this only if you want to convert your artwork to vector art. If you want to keep your original artwork, then skip to Step 8.

If your line art and color blocks are clean enough, you can actually tell Flash to convert them to vector art using a function called "Trace Bitmap". To do this, drag any one of your shapes--I'm going to use the head for an example--onto your canvas (you'll notice bitmaps/raster pieces are surrounded by a grey bounding box), and then go to Modify->Trace Bitmap. A dialogue will open to control various options.

Color Threshold controls how much Flash tries to adhere to the colors in your images. The lower the number, the more Flash will try to recognize different colors and shades. Minimum Area sets the smallest area that Flash will recognize as a color block. Curve Fit and Corner Threshold define how closely Flash conforms to the curves and corners recognized in the image. Results will vary depending on how clean your artwork is and your settings. On mine, setting the Color Threshold to 0, the Minimum Area to 3, the Curve Fit to Pixels, and Corner Threshold to Normal before clicking OK almost perfectly reproduces my original artwork in vector format.

If you do this, just select all of the fills that make up your shape and then convert them to a symbol to keep them cohesive and place them in your library.

of 10

Reassembling Your Character and Scene

Here's the part where we all come back together, regardless of if we imported rasterized files into Photoshop, drew straight into Flash, or even used Flash to convert our rasterized files into vectors. Although my rasterized files converted cleanly into vector art, I've chosen to keep my original artwork for this lesson; it won't affect the techniques used from this point out; only the size of the final output file.

Now we can start really assembling our scene. I laid down my background first, by dragging and dropping it onto the first layer and then locking the layer; I've decided that Lex likes to race cars, and just used a piece of related artwork that I drew a long time ago for the background in a comic panel, resized to fit the canvas and saved as a low-quality JPEG file to keep the file size down.

I'm going to reassemble Lex on different layers now, like stringing a marionette together. To start off, I'm going to place his torso on a new layer, and drag it about utnilt it's positioned roughly where I want him to be before locking the layer so that I won't accidentally click and move it anywhere while working on other layers. (You can see that because I used transparent GIFs, it blends seamlessly over the background with no white space.) This is our base that we're going to build on. Looks a little creepy sitting there as a headless, armless trunk, doesn't he?

of 10

Continuing to Assemble Your Character

Take your various parts and assemble them by dragging them onto new layers (naming the layers appropriately helps). Make sure to keep your layers in the proper order--for instance, on Lex, while I laid his torso down first I have to remember to that his left arm (on my right) needs to be on a layer underneath the torso layer to make sure that it's hidden appropriately during various motions. You'll also need to remember that when assembling the face--the head goes as a base, with the facial features on layers above, then the hair on top of that.

You may need to scale some of your parts to make them fit together correctly as you try to arrange them seamlessly. Zoom in close as you're working to position each one, check how the lines and colors merge as you layer them on top of each other, and then zoom back out again to get the overall effect.

Once you've assembled your character in full, we'll move on to the last (and trickiest) part of this lesson, which will get our character ready to really be animated in the next lesson.

of 10

Grouping Parts for Animation and Conclusion

This is where it gets a little complex, but this part will save you a lot of trouble down the road. Although I've broken Lex down into movable parts, we now need to group those parts based on the whole. For instance, we need to group the left upper arm, left forearm, and left hand into a single group called "Left Arm". That way we can rotate the entire left arm without having to move the individual parts.

The grouping for this is a little tricky, and I've tried to pare it down to the maximum characters allowed in this space--but I can't do it without leaving out crucial details, so to learn how to make nested symbols to control the movement of your character's parts, click here. This will conclude the lesson.