Face Game

Open Photoshop by clicking the icon on the dock:
Create a new document by pressing +N. Set the attributes to match this picture:
Using the paint brush or the pen tool create a head shape.
Brush
1. Select the color you want to use by clicking on the colored square on the left in the tool palette:
2. Move your cursor around until you have the color you want, then press OK:
3. Select the paint brush
4. Adjust your brush size
  You can change the size using the option menu
  2. Move slider to adjust size:
  3. Click on your document to close dialog box
  Or you can change the size using the square bracket keys on the keybaord.
  [ makes the brush smaller
  ] makes the brush bigger
5. Paint in a head shape that fills the shape.
Pen tool
1. Select the color you want to use by clicking on the colored square on the left in the tool palette:
2. Move your cursor around until you have the color you want, then press OK:
3. Select the pen tool
4. Select the first Option at the top menu
5. Click and pull (to get a curve) around to create a shape about the same size as the gray shape. Continue until you have completed the shape:
Save for web (+OPTION+SHIFT+S) as (replace the square brackets and word last_name with your last name) [last_name].png in the heads in the faces in the class folder.
Drag the image below onto your desktop
Drag hair.png from the desktop over the Photoshop icon on the dock
Now that the file is opened in Photoshop, create a new layer by pressing
+SHIFT +N
Using the brush tool or modifying an image from demos_and_samples:a_photos:body_parts or the pen tool create the hair shape.
Turn off the background layer by clicking on the eye to the left of the thumbnail image
Save for web (+OPTION+SHIFT+S) as [last_name].png in the hair in the faces in the class folder.
Create a new Photoshop document with the following attributes
If rulers are not turned on, press +R to turn them on.
Click in the rulers on the right and top and drag guides to match the image below
Using the brush tool or modifying an image from demos_and_samples:a_photos:body_parts create one of the eyes shape. Make this happy eyes.
When 1 eye is complete, press +J to duplicate the layer
Press V on the keyboard to select the move tool
From the top menu select Edit>Transform>Flip Horizontal
Click and drag your eye to the other side of the document so that now you have 2 eyes
Save for web (+OPTION+SHIFT+S) as [last_name].png in the happy_eyes in the faces in the class folder.
Turn off the layer or layers you created
Create a new layer by pressing
+OPTION+SHIFT +N
Using the brush tool or modifying an image from demos_and_samples:a_photos:body_parts create an angry eye.
When 1 eye is complete, press +J to duplicate the layer
Press V on the keyboard to select the move tool
From the top menu select Edit>Transform>Flip Horizontal
Click and drag your eye to the other side of the document so that now you have 2 eyes
Save for web (+OPTION+SHIFT+S) as [last_name].png in the angry_eyes in the faces in the class folder.
Create a new document with the following attributes:
Set up the guides like below
Using the brush tool or modifying an image from demos_and_samples:a_photos:body_parts create a nose shape.
Save for web (+OPTION+SHIFT+S) as [last_name].png in the noses in the faces in the class folder.
Create a new document with the following attributes:
Match the guides
Using the brush tool or modifying an image from demos_and_samples:a_photos:body_parts create a happy mouth shape.
Save for web (+OPTION+SHIFT+S) as [last_name].png in the happy_mouths in the faces folder in the class folder.
Turn off the layer or layers you created
Create a new layer by pressing
+OPTION+SHIFT +N
Using the brush tool or modifying an image from demos_and_samples:a_photos:body_parts create the angry mouth.
Save for web (+OPTION+SHIFT+S) as [last_name].png in the angry_mouths in the faces folder in the class folder.

Web Page

Open BBEdit by clicking on the icon on the dock
To create a new HTML document press +CTRL+N.
Make sure XHTML 1.0 Strict is selected
Give your document a title (This is what appears on the top of your browser).
Press OK
Save the document as face_game in your web folder and include the extension .html
Add a pair of <div></div> tags:
.
The div tags make sure that you do not include content that is floating in space.
Locate the <head> tags:

The <head> area provides information for the browser

Inside the <head> tags add a javascript declaration

<script type="text/javascript">
//<!--


//->
 </script>

Create an array to hold the head images:

heads=new Array();
	heads[0]="../../../../liz_arum_classes/[class name]/heads/[last name of a student in class].png";
	heads[1]="../../../../liz_arum_classes/[class name]/heads/[last name of a student in class].png";
	heads[2]="../../../../liz_arum_classes/[class name]/heads/[last name of a student in class].png";
	heads[3]="../../../../liz_arum_classes/[class name]/heads/[last name of a student in class].png";
	//continue for number of students in class

Create the arrays for happyEyes, angryEyes, happyMouths, angryMouths, noses and hair. Remember that angryEyes are in a folder called angry_eyes, happyEyes are in a folder called happy_eyes, angryMouths are in a folder called angry_mouths and happyMouths are in a folder called happy_mouths.

Still inside the script tags add the following function which will display a random head on your page:

 function updateHeads(){
    rand=Math.floor(Math.random()*heads.length)
    document.getElementById("head").src=heads[rand];
}

Create functions for happyEyes, angryEyes, happyMouths, angryMouths, noses and hair. You should copy and paste and then change each instance of the word head to the appropriate word:
```
 function update[Word](){
    rand=Math.floor(Math.random()*[array name].length)
    document.getElementById("[word]").src=[array name][rand];
}
```

Create a function called getAngry and call each of the other functions:

function getAngry(){
    updateAngryEyes();
    __________
    __________
    __________
    __________
    }

Create a function called getHappy and call each of the other functions:

function getHappy(){
    updateHappyEyes();
    __________
    __________
    __________
    __________
    }

Create a function called getFace. This function will pick a random number between 0 and .9. You will test if the number is less than .5. If it is call getAngry(), otherwise call getHappy():
```
function getFace(){
    if(Math.random()<.5){
    __________
    }else{
    __________
    }
}
```
Find the <body> tag and add a function onload which calls getFace():
```
   <body onload="______________;return true;">
```

Inside the div element add the following which sets up the buttons and the images. :

<!-- By setting action to # the page reloads itself when a button is clicked-->

 <form id="face" method="post" action="#" >
    <div>
    <input type="button" value="[what you want written on the button]" onclick="getAngry();return true;" />
    <br />
    <input type="button" value="[what you want written on the button]" onclick="getHappy();return true;" />
    <br />
    <input type="button" value="[what you want written on the button]" onclick="updateHeads();return true;" />
    <br />
    <input type="button" value="[what you want written on the button]" onclick="[function that changes noses];return true;" />
    <br />
    <input type="button" value="[what you want written on the button]" onclick="[function that changes hair];return true;" />
    <br />
   </div>
</form>
 
<!-- the following places all the images on the page-->
<img src="" alt="" id="head" style="padding:0em;position:absolute;top:150px;left:270px;" />
<img src="" alt="" id="eyes" style="padding:0em;position:absolute;top:270px;left:280px;" />
<img src="" alt="" id="nose" style="padding:0em;position:absolute;top:430px;left:280px;" />
<img src="" alt="" id="mouth" style="padding:0em;position:absolute;top:490px;left:280px;" />
<img src="" alt="" id="hair" style="padding:0em;position:absolute;top:50px;left:200px;"  />

Save and preview

Linking

Open index.html
Navigate to your table

Copy the last row:

<tr>
    <td class="assignment"><a href="last_assignment.html">last assignment</a></td>
    <td class="description">Applications used</td>
    <td class="date">9/20/05</td>
</tr>

and paste beneath it:

<tr>
    <td class="assignment"><a href="last_assignment.html">last assignment</a></td>
    <td class="description">Applications used</td>
    <td class="date">9/20/05</td>
</tr>
<tr>
    <td class="assignment"><a href="last_assignment.html">last assignment</a></td>
    <td class="description">Applications used</td>
    <td class="date">9/20/05</td>
</tr>

Change the first column to:

    <td class="assignment">Face Game</td>

Change the second column to:

    <td class="description">BBEdit, Photoshop and Javascript</td>

Change the third column to:
```
    <td class="date"></td>
    
```
In cell 1 of this row set up an anchor container (a link) around the text you added, linking it to the timeline page in your web folder
1. Hilite the word Rollover
2. Press +CTRL+A
3. Click on the File button
4. Navigate to the rollover page in your web folder
5. Click on the Choose button
6. Click on the Apply button

Brush

Pen tool

Web Page

Linking