Mr. Potato Head

The follow assignment requires the use of both layers and behaviors....and is hopefully fun.

Click on my demo

1. Look in your Public Folder and Drop Box folder. You should find a folder called Potato Head

2. Drag the PotatoHead folder into your "Images" folder in the "Sites" folder.

3. Open dreamweaver and save it as potato.html

4. Insert a layer. Label the layer with the appropriate part using the Layer Properties ID (For example: call the first layer "potato" and insert the potato into it. The next layer may be labeled "eye1" and one of the eyes inserted into it or nose and put the nose image inside the layer.)

5. Create a unique layer for each image/part and add the part to it.

6. Click on the image within each layer, and not the layer. Go to the Behavior menu (with the image, not the layer selected).

7. Choose "Drag Layer" from the Behavior menu. MAKE SURE THE BEHAVOIRS ARE SET FOR 4.0 or Later Browsers.

8. Drag layer will only be available if you have an image selected

9. Choose the name of the selected image/part from the "Drag Layer" pull down menu, then select "Unconstrained" for the movement. You must do this for each image/part.

10. Presto, you've made a a Mr. Potato Head game using layers and behaviors. Link the page to your default.html page.

To do more:

Make/find additional parts for your potato. Add them to your potato page. Creativity counts! Create the parts as transparent GIFs. You could even get funky and make an animated transparent GIF to put on your spud. Try putting Mr. Potato Head on a cool background image that goes with the accessories you've made. Get wild, make a Mrs. Potato Head.

To do much more:

1) Create a image to dress, like make a Barbie doll and get clothes to dress it or make a GI Joe action figure.

OR

Make a puzzle using Fireworks and the process outlined above.

2) Save the file as fun.html. Link the page to your default page.