Today’s exercise is dedicated to Jeff Lunn, a former student who came up with the idea for it and several others. This exercise is a hybrid in that it begins by using photobooth as a tool for capturing a sequence of images [footnote] while forcing you to take a look at yourself [/footnote] and then employs Flash to turn the images into an “eyecatching” interaction. In addition to being embarrassing and fun, this lesson introduces the concept of a “fully buttoned” interactive screen. You may want to consider this approach the next time you produce a tour [footnote] say as in the final assignment for this course. [/footnote]
1. Go to http://browning.mynmi.net/eyecatcher/eyecatcher.html for a demonstration of what you are about to produce. Or here. Or here!
2. Download eyecatcher.zip from free.mynmi.net. Unzip it and check out eyecatcher.html in your browser. Mouseover the top portion of the large black square with the picture of the gray haired man (yes, that’s me) in the middle and notice that I did a much worse job of controlling my movements than Jeff did.
3. Before we go any further, check out the file size of those pictures by looking at them in list view. Notice that all of the pictures are 8 or 9 kilobytes. You are about to take, and resize, pictures of yourself. Because the pictures will have to be loaded dynamically from the web, it is important that your pictures have an equally small file size.
4. Take the Pictures: Start Photobooth and remove your glasses if you are wearing them. Arrange your posture so that you see yourself on the screen in full facial.
5. Looking straight ahead, take a picture. Look up and to the left, only moving your eyes and take a picture. Look to the right, once again moving only your eyes and take a picture.
6. Repeat the process with upper left, upper middle, upper right. Then repeat again with lower left, middle, and right.
7. Locate your Photo Booth library and open all of the pictures at once in Fireworks or Photoshop.
8. Resize all of the pictures to 300 wide and 200 high. If you are using Fireworks, select File- Image Preview, set the quality somewhere in the 60’s to get a small file size, and export them, giving each one a representative name such as upper left, upper right, etc. In fact, you can save four of the pictures right over the ones of the gray haired guy.
9. Once you have exported all 9 pictures, open eyecatcher.html with your editor and look at the attached CSS file, catcher.css. Catcher.css contains just two classes and one id rule. The first class, .center, is for the big div tag that holds the other nine. The second class, .actiondivs, serves for all of the div tags except for the one in the very middle of everything, that displays all of the pictures. Picdiv, of course, is the id rule for that middle picture.
10. Return to the html and look at the short function named ‘loadface’ that does all of the work (shown below). What loadface does is alter the html of the picdiv div tag.
11.The last portion of loadface that reads (‘<img src=’+pict+’>’)
<img src="uppermiddle.jpg">
In this case, however we have substituted a variable named pict that responds to an ‘argument’ in the first portion of the loadface function as in function loadface(pict). The argument allows you to write just one reusable function instead of nine separate functions. Every time you call the function, you substitute the path of the image that you want to call, in place of the pict variable.
11. To illustrate how this works, look at the first actiondivs div tag that reads
<div class='actiondivs' onMouseover="loadface('upperleft.jpg')"></div>
This div tag contains a simple Javascript command, onMouseover, that instructs the div tag to call the loadface function whenever a mouse moves over it. The parentheses, instead of the word pict, now contains the path to the image that you would like for the function to load into the #picdiv div tag. And that’s basically how it works.
12. So finish it up. Modify the actiondiv and picdiv divs, so that they load the appropriate picture of YOU! As always, I am tempted to give more instructions but you should be able to figure this one out on your own. Have fun.
13. By the way, it would be very easy to modify this exercise to make it mobile friendly. Just change the oneMouseover commands to onClick, and resize the div tags to fit a mobile screen.