~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Blinking Eyes
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*** We must remember that our end result is an animation, and an animation is made up of individual frames (kind of like a moving comic strip). Now, we also must take note that for the eye to be tricked into seeing *realistic* motion, there must be 32 frames per second. Of course, with a petz picture, there are some tricks. Obviously we won't be making anywhere close to 32 frames... In fact, the best place to start is with:
Frame One:
Using PSP, open the file of the image that you want to work with.
Since this is the starting frame, we don't have to change much. All that you need to do is add any extra effects that you want the finished product to have. For example, now would be the best time to add any sort of eye sparkles, realistic fur, special borders, and especially transparency (which can be VERY important if you have a webpage with a background other than white).
Don't forget to save your progress, giving the image a unique name, preferably one with a number somewhere in it (i.e. -- "frame1.gif" or "cat1.gif"). This will become important later.
Frame Two:
Imagine a blinking eye in slow motion. You should notice that as the eye begins to close, the eyelid drops and covers only a part of the eye.
To create this effect on your petzie, use your magnifying glass (on the same image) and zoom into a comfortable range. I usually use something around 2000%, though it varies per picture.
Now, take the dropper tool  and soak up the color of the petz eyelid by clicking on it. On the right hand side, near the color pallet, the top-most color square should have changed to the color you selected.
Select the paint brush tool  and continue the eyelid by drawing another row or two under the existing pixels. Your petz should look slightly droopy. In CherryWood's case, her eye sparkle was covered completely, which is perfectly alright. Remember not to overdo this part!
Here is a closeup of what I've got so far:
When you are ready to save/export this frame, BE SURE to check for these two things:
(1) That it has a unique file name with a cooresponding number to its respective order
(2) And that it is the same size as the Frame One. If it isn't then the animation won't look very smooth.
If you followed the instructions and just worked off of the first frame, you should be just fine ;)
Frame Three:
Again working off of the last frame you saved, continue to add rows to the eyelids and drag them down further until they are covering about 3/4 of the eye. At this point the petz should be looking REALLY droopy -- or drunk... one of the two :)
As you are doing this, make sure that you stay true to the form and curve of the eyelid. If you turn it at a funny angle, then the finished product will look a little... odd. Most of the time, animations that turn out wrong are directly related to the content that is being animated. Keep that in mind.
Here's what I've got so far:
Frame Four:
This is possibly the easiest frame you will ever do during the whole project :P
Simply fill in the remainder of the eyeball with the eyelid color using your paint brush tool. It will end up looking like your petz never had his/her eyes open when the original photograph was taken!
Here's a closeup of the last frame:
*** At this point, you are all done making frames (yipee!). It is time to put them all together to make them "move". For this, you are going to want to open up Jasc Animation Shop. To make the whole process as painless as possible, and for the sake of the tutorial itself, we are going to be using the wizard function. Just follow the steps below:
Step 1: In the upper left-hand corner, click on the shortcut button with a little magic wand and film strip (it's next to the red banner icon). This should bring up a popup box that should read, "Animation Wizard."
Step 2: The first screen in the popup will ask you about the size of the animation. I usually check the circle that reads "Same size as the first image frame" simply because all the images that I'm working with are consistant in this catagory. Click "Next"
Step 3: The next screen should talk about the canvas color. If you want a transparent animation, leave the circle checked at "Transparent," otherwise, choose the appropriate color under the bubble titled "Opaque." Click "Next"
Step 4: For screen after this can be a little confusing. For the first choice, I would center your image - NOT place it in the upper left corner. For the second set of bubbles, choose the one that says, "With canvas color." Finally, check the bottom box that talks about scaling the image to fit the allotted frame. This whole section was designed to compensate for frames that are different sizes. However, since all of the frames should be the same size, position, etc. as noted above, it really doesn't matter too much. Click "Next"
Step 5: In the next section, you can choose, depending on what you want, how many times the animation will play. For blinking eyes, it is most preferable to loop it indefinitely.
Step 6: At the bottom of the same screen, notice the little bar that indicates how long each frame is displayed for. Let's make our "blink" at a moderate speed. Set the bar at the number 15. This will transfer the data consistantly for all the frames -- which is what we want for the time being. Click "Next"
Step 7: Now, you should see a white box. This is where we are going to asemble the frames in the right order. Click on "Add Image" and choose the first frame. It's name should appear in the white box. Continue to do that for all four frames. This will get you as far as getting the eyes closed. However, we still need it to open again (right?). So, do a little backtracking. Add frames three, two, and one in again -- in that order. It should look like this:
Step 8: Click "Next" then "Finish." In a short moment, you should end up with a long strip with all the frames in it. If you are eager and want a preview right away of what the animation looks like so far, right click on any one of the frames and choose the option that reads "View Animation" (It's roughly half-way down the menu).
Step 9: At this point, the animation as a whole is quite choppy... not to mention mundain and a little on the fast side. To fix this, we need to add a pause between each of the blinks. Right click on the first frame and choose "Frame Properties" from the menu. A little popup box should come up, and on it you should see the bar you worked with in Step 6.
Step 9a: As you know, this bar determines how long this frame is shown. Our base amount is 15 (or 15/100th of a second). For a longer pause, elongate the number. Now, how much the number should be adjusted to depends on a little math (gotta love it, right?). Remember that whatever number you choose is representional of the formula #/100 (look at that, it's only simple division) - which gives us the amount of time in seconds that the frame lasts [note that 100 is equal to ONE second's worth]. For example, if the number is set to 45, then the frame will last for 45/100th of a second. If the number is set to 100, then the frame will last for 1 second (100 % 100=1). So, if you want the frame to last for five seconds, set the number to 500. If you want the frame to last for 7.5 seconds, set the bar to 750.
-- For this tutorial, I found that the best pause ranged anywhere from three (300 on the bar) to 8 (800 on the bar) seconds. --
Step 10: Click "O.K." when you are finished and then preview your new animation. It should look a lot nicer. For the example, I use a pause of 540 on the bar, meaning that every 5.4 seconds, there will be a blink.
Step 11: After all the details have been fixed and all the adjustments have been made, all that is left to do is save. Follow the onscreen instructions (they are very much self-explanitory) - and away you go!
The Final Product:
|
