Submit Your Article
This tutorial will demonstrate how to make a Flash-based paper doll cut out of Jessica Rabbit, complete with color changing outfits.
Have you ever seen those little paper doll cut outs that come with different outfits with tabs you fold around them to dress them? Well, this is a Flash version of just that, minus the little unattractive tabs on all of the outfits. And, instead of a generic doll, we’re going to dress up Jessica Rabbit.
This tutorial is intended for you to learn how to make a Flash animation with small size, and just enough interactivity to keep people interested. This looks a lot more complicated than it actually is. There are only small bits of code for Actionscript that we’ll be using to make this whole animation work (which I will explain to you when we get there).
Step 1: Creating Jessica
So we start off with these pencil drawings, scanned in.
Now, we take it into Fireworks and outline her using the Pen Tool. This will take a little bit to trace all of the lines. Make the lines black, and 1px is fine. It will likely look a little choppy to you, but don’t mind that, it’ll smooth out here in a bit.
I have Jessica in two parts. Her body and her face. I wanted to be able to clearly see the detail on her face (even though it’s a simplified cartoon face). I traced the two separately, and then brought her traced face into the file with her traced body, matched them and connected the lines.
Step 2: Importing Jessica
When you save Fireworks files, without flattening them and making a bitmap out of them, you can import them directly into Flash, maintaining all of the layers, and the small size of the file. If it’s compressed you can not only not edit it when imported into Flash, but it creates an enormous file size that is completely avoidable with a few extra grains of effort.
Open Flash and go to File>Import to Library.
Maintain all of the defaults, or make it look like this:
Open your Library if it’s not already open CTRL+L or Window>Library. You should see a little folder in it that says Fireworks Objects. Open that, and inside of that you will see a new Symbol, which should be the Jessica Rabbit image from Fireworks.
Double-click on the image of Jessica and it will open that symbol on the stage.
Now, select all CTRL+A or use the arrow and select everything that way. Copy everything it has selected CTRL+C or Edit>Copy. Go to your menu and insert a new symbol. Insert>New Symbol or CTRL+F8. Name it Jessica, and make it a Movie Clip. Click out on the blank stage, then Paste everything you just copied. CTRL+V or Edit>Paste. While everything is still selected, go to your menu and ungroup Modify>Ungroup or CTRL+SHIFT+G so you just have a bunch of lines selected and not a bunch of grouped boxes. She is officially in as raw a format as we can get her in Flash.
***Don’t forget to save frequently during your projects. You never know when a program may crash and you’re going to be doing a lot of work here, so you don’t want to lose it all.
Step 3: Connecting with Jessica
We need to make sure all of the lines are closed off in Flash. If they are not closed off you cannot fill in the spaces. At this time you’ll also want to smooth out some lines as you go along.
To connect a line zoom in using the magnifying tool. Find a line that is not connected to another line, and hover your mouse pointer over the tip of the line. Your pointer will change into a corner looking icon, which indicates you found the end of the line.
Click and drag the line to the connecting point.
While you’re going through connecting these lines, take note of curves and straight lines you’re not really satisfied with (I would connect all of the lines first, then come back through). When you finish connecting all of the lines, go back and start smoothing them out.
You can either hover over the line and when you see a curved line icon appear click and drag the line to a more appropriate curve…
…or select the line (you may need to hold down the shift button and select the line in sections, depending on how it’s drawn) and use the little Smooth curves or Straighten curves button in the Tool box.
Step 4: Giving Jessica Life
To color Jessica I found a still image of her from the Who Framed Roger Rabbit, and pulled the colors from her on-screen illustration. Selecting the Paint Bucket Tool, you just click and fill in each section. If for some reason it does not fill in, there may be a line or two that have not been connected. Check all of the possible breaks in an area and close them off, which should make your fill work.
To make Jessica look less like a drawing, and with a little more life, we’re going to colorize her lines also, instead of just leaving them black.
Select something darker than the fill color, but not too drastically darker that it may as well be outlined in black still.
And so you continue this process with her whole body.
Now… we are going to give her a little more depth. Right now she looks very flat, because she is filled in with flat colors. We want to give her a little dimension by adding some gradient and some shadows.
Use your black arrow to select an area of color. Go to the Color Mixer and choose either a Linear or Radial (circular) gradient to use in the area. You’ll want to select the two (or more) colors you want to use. I only used two, as I don’t want to make this overly complicated, and it gives it just enough depth to give it some life.
To change the location of the gradient in the space you selected, as well as its size and shape, select the Fill Transform Tool.
Once the Fill Transform Tool is active, click the gradient shape in your image you want to alter. Once you click on it, a circular shape will appear.
Don’t forget to add some shadows too! The shadows really help the images pop.
I found the easiest way to add some shadows is to use the Pencil Tool or the Pen Tool. Select a bright color, or something you have not used for one of your lines already. Start drawing lines and filling in sections as you go along. When you fill a section in, double click on the bright line and it will select the whole line, even if it’s cropped by some other shapes, and hit the Delete key on the keyboard. We don’t need these lines after the shapes have been filled.
Continue these steps for the rest of the body, using colors accordingly. This will take a little while, and is full with trial and error to get just the right look you want.
Topics: Action Script, CSS, Flash, interactive, Jessica Rabbit
