Getting Started: The Basic Character
When you were a little girl or boy you may have played with paper dolls – and maybe now as a not-so-little girl or boy you’ve played with the many pixel dolls available online that let you dress the dolls in various outfits and various colors to create a customizable avatar.
We’re going to do something similar, making a Halloween dress-up doll with various complete costumes broken down into parts that you can mix-and-match to create custom costumes for the character.
You can do all of your drawings in Flash if you’re more comfortable with creating artwork from scratch in Flash, but you’ll still want to follow along as many of these basic principles covered will still apply. I’ll be working in Photoshop because tablet-drawing in Flash drives me batty, but you can use any graphics program of your choice, provided that it can export transparent GIFs or transparent PNGs.
I’ve started off by drawing my basic character in pencil, decently covered (no nudes, thank you), then scanning it into Photoshop, layering detailed color on top of it, and cleaning out all of the white space around it so that she’s free-floating with no background. (For more on graphics software, working with color and exporting images with transparency, check out Guide Sue Chastain’s enormous library of lessons on graphics software.)
Creating and Importing the Individual Costume Pieces
The various parts of the costumes/outfits are drawn separately, and in their entirety, even if parts of them will later be obscured (except for the shoes – those, only draw what’s going to be visible). For example, the superhero tights and boots will be partially obscured by the superhero leotard, but I drew the obscured area around the hips anyway. The same goes for the cape, and for the waistband of the schoolgirl skirt.
Try to break each outfit that you create down into clearly separated pieces.
If you’re drawing by hand, this is where you’ll find a light table useful. These drawings are going to need to fit cleanly on top of the base doll, so it helps to lay a clean sheet of paper on top of the original drawing of the doll and then sketch your outfits to fit both shape and pose before retracing them with clean line work. When you’re done, scan them into your graphics program. (If you’re drawing in Flash, or drawing digitally in a graphics program, just be sure to follow the guidelines above for fitting the clothing to the doll and breaking the parts down individually.)
Coloring and Transferring the Parts to Flash
Once you’ve got everything drawn and scanned, use your graphics software (or Flash, depending on your methods) to layer the individual pieces on top of the doll and size them appropriately, rotate them to fit, clean up the artwork, and erase all the surrounding white space. If you size everything to fit now, before exporting the images, it’ll save you a lot of trouble later when trying to piece everything together in Flash.
Color everything as you see fit; when you’re done, export all the pieces as individual files (e.g., dollbase.png, superherocape.png, schoolgirlsocks.png), either as transparent GIFS or PNGs. Although the file size is generally larger, I prefer to use PNGs to preserve the detailed shading and clean edges on the transparency. In the end the format doesn’t matter; all that matters is that you have images with transparent backgrounds surrounding the pieces to be assembled, so that you’ll be able to see the doll’s body around the clothing, and see the scene’s background. (If you worked in Flash, you don’t need to worry about this.)
Creating a New Flash File & Placing the Doll Base in the Library
Once that’s done, let’s escape back to familiar territory and open a new Flash file. Make sure that the pixel height and width of the file are greater than the overall height and width of your doll base. You may need to adjust it later if you have costume parts that increase that height and width. Click File -> Import to Library and select the filename for yout doll base to import it into the library, and then drag and drop it onto the stage to position it properly.
Importing the Costume Pieces to the Library
Once again click File -> Import to Library, and import all of your individual costume pieces to the Library. Don’t forget that you can import all of them at once, instead of one at a time, by holding down the Shift key while selecting multiple files.
Placing the Doll & Costume Parts On the Stage
Start dragging the graphics onto the stage, and positioning them on top of the doll so that they fit as they would were the doll dressed in that particular costume. Put each one on its own layer; you may want to think ahead in your layering, working out what can be mixed and matched and therefore what should be underneath or on top of what. (Example, albeit a fashion disaster: placing the superhero tights & boots on a layer underneath the schoolgirl skirt, so that the skirt can be worn over the tights and boots – or placing the superhero top on a layer underneath the devil pants so that the pants can be paired with the leotard feasibly.)
You’ll save a lot of hair-pulling if you work in layer folders, separating costume pieces by tops, bottoms, accessories, shoes, wings and capes, etc.
(Don’t forget to place all of the layer folders except for the one with things like wings and capes above the layer with the doll base, while the one with wings, capes, etc. go underneath the doll base.) That way you can hide and unhide the entire group at once, and collapse the folders to make your list of layers much more manageable. Don’t forget to name your layers, as well, so you’re not guessing what’s on each one. If you only have ten to fifteen pieces, it’s not so bad – but since I was working with 46, I’d have been lost without naming my layers.
Converting the Parts to Symbols
Now convert each graphic to a symbol (F8), whether they’re imported graphics or Flash drawings. As usual I prefer movie clips; there’s no point in using a button, and we need instance names. By the time you’re done your Library is going to be full of clutter, but don’t delete the PNG or GIF graphics to clean it up once you’ve finished creating all of your symbols; Flash references those files for the symbols, and if you delete the graphic then the symbol will end up blank. You may want to use folders in the Library, as well, to organize things.
Naming the Instances
Once all of your symbols have been created, select each instance on the stage and assign it an instance name. Eventually we’ll stop fiddling with the artwork (one year) and move on to actually making this work to hide and unhide the various costume parts, so we’ll need names to reference when scripting our actions.
Take a bit of time to complete your scene; create a background (you can make changeable backgrounds, too, if you’d like – that won’t be covered here, but it’s the same idea). Most importantly, set up the base for a menu to let you browse the various parts available to dress the doll. I’ve made mine a closet, though you may just prefer separate labeled boxes with miniature versions of the parts.
Now drag new instances of the symbols for the various pieces onto the stage, on a new menu layer. If you’re just using a box/table style menu that can fit everything in one area, then you can just shrink down your parts and arrange them inside the appropriate blocks of space.
If you’re making things (over) complicated as I tend to and following along with the closet idea: arrange the various costume parts so that they would fit into the closet as if hanging there as entire outfits, or laid out on the shelf.
Don’t try to cram everything in together; instead create something of a marching procession, with only part of it overlapping the closet. You can scale things if you'd like, to create the illusion of perspective and make them look like they really are "hanging" in the closet instead of draped on a body.
I’m out of space for this lesson, but on the next lesson we’re going to set up a mask so that the only part of the menu layer that’s visible is the interior of the closet—then create buttons to scroll the menu items to either side so that they can be brought into view and selected. Lastly we’ll assign actions to each closet item so that when it’s clicked, its corresponding costume item (the instances that we placed on other layers and fitted to the doll) will become visible, only to become invisible when clicked again.
When you were a little girl or boy you may have played with paper dolls – and maybe now as a not-so-little girl or boy you’ve played with the many pixel dolls available online that let you dress the dolls in various outfits and various colors to create a customizable avatar.
We’re going to do something similar, making a Halloween dress-up doll with various complete costumes broken down into parts that you can mix-and-match to create custom costumes for the character.
You can do all of your drawings in Flash if you’re more comfortable with creating artwork from scratch in Flash, but you’ll still want to follow along as many of these basic principles covered will still apply. I’ll be working in Photoshop because tablet-drawing in Flash drives me batty, but you can use any graphics program of your choice, provided that it can export transparent GIFs or transparent PNGs.
I’ve started off by drawing my basic character in pencil, decently covered (no nudes, thank you), then scanning it into Photoshop, layering detailed color on top of it, and cleaning out all of the white space around it so that she’s free-floating with no background. (For more on graphics software, working with color and exporting images with transparency, check out Guide Sue Chastain’s enormous library of lessons on graphics software.)
Creating and Importing the Individual Costume Pieces
The various parts of the costumes/outfits are drawn separately, and in their entirety, even if parts of them will later be obscured (except for the shoes – those, only draw what’s going to be visible). For example, the superhero tights and boots will be partially obscured by the superhero leotard, but I drew the obscured area around the hips anyway. The same goes for the cape, and for the waistband of the schoolgirl skirt.
Try to break each outfit that you create down into clearly separated pieces.
If you’re drawing by hand, this is where you’ll find a light table useful. These drawings are going to need to fit cleanly on top of the base doll, so it helps to lay a clean sheet of paper on top of the original drawing of the doll and then sketch your outfits to fit both shape and pose before retracing them with clean line work. When you’re done, scan them into your graphics program. (If you’re drawing in Flash, or drawing digitally in a graphics program, just be sure to follow the guidelines above for fitting the clothing to the doll and breaking the parts down individually.)
Coloring and Transferring the Parts to Flash
Once you’ve got everything drawn and scanned, use your graphics software (or Flash, depending on your methods) to layer the individual pieces on top of the doll and size them appropriately, rotate them to fit, clean up the artwork, and erase all the surrounding white space. If you size everything to fit now, before exporting the images, it’ll save you a lot of trouble later when trying to piece everything together in Flash.
Color everything as you see fit; when you’re done, export all the pieces as individual files (e.g., dollbase.png, superherocape.png, schoolgirlsocks.png), either as transparent GIFS or PNGs. Although the file size is generally larger, I prefer to use PNGs to preserve the detailed shading and clean edges on the transparency. In the end the format doesn’t matter; all that matters is that you have images with transparent backgrounds surrounding the pieces to be assembled, so that you’ll be able to see the doll’s body around the clothing, and see the scene’s background. (If you worked in Flash, you don’t need to worry about this.)
Creating a New Flash File & Placing the Doll Base in the Library
Once that’s done, let’s escape back to familiar territory and open a new Flash file. Make sure that the pixel height and width of the file are greater than the overall height and width of your doll base. You may need to adjust it later if you have costume parts that increase that height and width. Click File -> Import to Library and select the filename for yout doll base to import it into the library, and then drag and drop it onto the stage to position it properly.
Importing the Costume Pieces to the Library
Once again click File -> Import to Library, and import all of your individual costume pieces to the Library. Don’t forget that you can import all of them at once, instead of one at a time, by holding down the Shift key while selecting multiple files.
Placing the Doll & Costume Parts On the Stage
Start dragging the graphics onto the stage, and positioning them on top of the doll so that they fit as they would were the doll dressed in that particular costume. Put each one on its own layer; you may want to think ahead in your layering, working out what can be mixed and matched and therefore what should be underneath or on top of what. (Example, albeit a fashion disaster: placing the superhero tights & boots on a layer underneath the schoolgirl skirt, so that the skirt can be worn over the tights and boots – or placing the superhero top on a layer underneath the devil pants so that the pants can be paired with the leotard feasibly.)
You’ll save a lot of hair-pulling if you work in layer folders, separating costume pieces by tops, bottoms, accessories, shoes, wings and capes, etc.
(Don’t forget to place all of the layer folders except for the one with things like wings and capes above the layer with the doll base, while the one with wings, capes, etc. go underneath the doll base.) That way you can hide and unhide the entire group at once, and collapse the folders to make your list of layers much more manageable. Don’t forget to name your layers, as well, so you’re not guessing what’s on each one. If you only have ten to fifteen pieces, it’s not so bad – but since I was working with 46, I’d have been lost without naming my layers.
Converting the Parts to Symbols
Now convert each graphic to a symbol (F8), whether they’re imported graphics or Flash drawings. As usual I prefer movie clips; there’s no point in using a button, and we need instance names. By the time you’re done your Library is going to be full of clutter, but don’t delete the PNG or GIF graphics to clean it up once you’ve finished creating all of your symbols; Flash references those files for the symbols, and if you delete the graphic then the symbol will end up blank. You may want to use folders in the Library, as well, to organize things.
Naming the Instances
Once all of your symbols have been created, select each instance on the stage and assign it an instance name. Eventually we’ll stop fiddling with the artwork (one year) and move on to actually making this work to hide and unhide the various costume parts, so we’ll need names to reference when scripting our actions.
Take a bit of time to complete your scene; create a background (you can make changeable backgrounds, too, if you’d like – that won’t be covered here, but it’s the same idea). Most importantly, set up the base for a menu to let you browse the various parts available to dress the doll. I’ve made mine a closet, though you may just prefer separate labeled boxes with miniature versions of the parts.
Now drag new instances of the symbols for the various pieces onto the stage, on a new menu layer. If you’re just using a box/table style menu that can fit everything in one area, then you can just shrink down your parts and arrange them inside the appropriate blocks of space.
If you’re making things (over) complicated as I tend to and following along with the closet idea: arrange the various costume parts so that they would fit into the closet as if hanging there as entire outfits, or laid out on the shelf.
Don’t try to cram everything in together; instead create something of a marching procession, with only part of it overlapping the closet. You can scale things if you'd like, to create the illusion of perspective and make them look like they really are "hanging" in the closet instead of draped on a body.
I’m out of space for this lesson, but on the next lesson we’re going to set up a mask so that the only part of the menu layer that’s visible is the interior of the closet—then create buttons to scroll the menu items to either side so that they can be brought into view and selected. Lastly we’ll assign actions to each closet item so that when it’s clicked, its corresponding costume item (the instances that we placed on other layers and fitted to the doll) will become visible, only to become invisible when clicked again.
SHARE
