Flash: Virtual Paper Doll

Today we are going to be building "draggable" movie clips that will make a "Paper Doll" or "Mr. Potato Head" sort of thing.  The ActionScript isn't that difficult, but it is very time-consuming so I am putting up a template that we can use to get started.

• Flash Paper Doll

I am also attaching a paper doll that I built from the template above.  It has a background music track, three extra models, and more.  Download the source file here.  You can also play with the SWF file here. To get the model and begin the clothing, I Googled "Fashion Paper Dolls" and clicked on images.  I chose to use this image:

Here are some paper dolls which match so you can share clothing and accessories:

 Here is an example of another set of paper dolls which let you share most clothing/accessories:

Also, this is another example of a more more complex "Paper Doll": [Click]

Once you have the template downloaded, either create your own model and clothing or look for good examples of paper dolls online.

Here are some other examples of paper dolls with different looks, styles and themes:

Note:  You might be surprised to find that there are paper dolls for specific genres or subjects as well.  For example, a search (for something like Edward Scissorhands, Harry Potter, Thor, True Blood, Star Trek, Star Wars, Arrested Development, etc.) will yield results such as the following:

If you can't find the right paper doll, you can always make some of your own design.  For example, these [Doctor Who and Monster High] were drawn by hand and scanned:

Have fun!

Flash: Eyes That Follow the Mouse

Today we are going to be drawing an eye (facing left), converting it to a movie clip, dragging an instance to the desktop, naming your instances, adding some ActionScript, and testing it.  The result?  Eyes that follow the mouse pointer, obviously.  :)

• Create a Flash ActionScript 2.0 file.
• Create three layers (Actions, Eyes, and Content).
• Add the following ActionScript to the Frame 1 of the Actions layer:

a = eye1._y-_ymouse;

b = eye1._x-_xmouse;

angleA = Math.atan2(a, b);

degrees = angleA/(Math.PI/180);

setProperty("eye1", _rotation, degrees);

a2 = eye2._y-_ymouse;

b2 = eye2._x-_xmouse;

angleA2 = Math.atan2(a2, b2);

degrees2 = angleA2/(Math.PI/180);

setProperty("eye2", _rotation, degrees2);

• Click on Frame 1 of the "Eyes" layer
• Draw a large circle (usually a black line and a white fill) [holding shift while dragging the circle helps it stay circular]
• Draw a smaller circle on the inside-left of the larger circle (about 9:00) which will serve as the pupil
• Select the entire eye [you can drag around the eyeball or click CTRL+A]
• Go to MODIFY > CONVERT TO SYMBOL
• Select "Movie clip" and call the clip something like "eyeball".
• Drag the eyeball over so that the "+" is directly in the center
• Go back to "Scene 1"
• Press "Delete" to remove the eyeball from the Stage
• Drag two "instances" of the "eyeball" on to the stage [a left and right eye]
• Click on the left eye and give it the "instance name" of "eye1"
• Click on the right eye and give it the "instance name" of "eye2"
•  Test your movie (CTRL+ENTER) -- the eyes should "look at" your mouse pointer.
• Add a background picture and resize the eyes accordingly to fit.
• Optionally you can add a custom mouse pointer to give the eyes something interesting to look at.

Below is a Video Tutorial which doesn't follow our project exactly, but should help explain the process:

Flash: Buttons

Making buttons in flash isn't as difficult as you might think.  You can make a drawing (or even just a circle, square, or other shape) and convert it to a button.

1. Draw the shape(s) that you would like to become the button.
2. Select the shape(s) either by clicking/shift-clicking on them or drag a box around them.
3. Select MODIFY > CONVERT TO SYMBOL (or right-click the selected shapes and choose Convert to Symbol)
4. Select the "Button" option.
5. Notice that the "timeline" has been replaced with 4 squares -- or "button states".  
1. Up: This is what your button will look like when untouched.
2. Over: This is what your button will look like when you move your mouse over it.
3. Down: This is what your button will look like when you click it.
4. Hit: This is the area of the button that is "encounterable".  
6. Adjust your button states to set how your button will appear to users.
7. Do a CTRL+ENTER to test your movie and see how your button works.