Animation on Rollover

• You should have done the following activities completed:
• Bumblee Banner - Part I
• Bumblee Banner Part II - Simple Buttons
• Bumblee Banner Part III - Flight of the Bumble Bee

These should all be graded before you move on.

1. Open your Bee Banner in ImageReady.

2. Use the slice tool to slice each of your 5 buttons.. Select the slice selection tool, and select each slice, applying the Name of the slices as follows and add a link to the last button:

• 1 = flowertop
• 2 =banner
• 3 =first button (home)
• 4 = second button
• 5 = third button create a
  link= http://www.adodev.com/KPHS/Webmastering/webapr08.htm (on the animation palette - the slice tab)

3. Using the slice selection tool, click on the slice with the home button. Click the button that creates a new rollover state.

4. In the layers palette, click on the button for the home button. Click the right hand arrow. Turn off the drop shadow effect, by double clicking on it, for the home button slice.

5. Click on the animation palette. Set the time of frame 1 on the animation palette to 0.1 seconds.

6. Click on the Duplicate Current Frame Icon on the bottom of the animation palette 14 times until you have 15 frames.

7. Creating animation frames:

Click on frame 2. Turn on the eye on the layer palette layer called bee 1.
Click on frame 3. Turn on the eye on the layer palette layer called bee 2.
Click on frame 4. Turn on the eye on the layer palette layer called bee 3.
Click on frame 5. Turn on the eye on the layer palette layer called bee 4.
Click on frame 6. Turn on the eye on the layer palette layer called bee 5.
Click on frame 7. Turn on the eye on the layer palette layer called bee 6.
Click on frame 8. Turn on the eye on the layer palette layer called bee 7.
Click on frame 9. Turn on the eye on the layer palette layer called bee 8.
Click on frame10. Turn on the eye on the layer palette layer called bee 9.
Click on frame 11. Turn on the eye on the layer palette layer called bee 10.
Click on frame 12. Turn on the eye on the layer palette layer called bee 11.
Click on frame 13. Turn on the eye on the layer palette layer called bee 12.
Click on frame 14. Turn on the eye on the layer palette layer called bee 13.
Click on frame 15. The bee should be missing.

8. Set the timing of the Frame on the animation panel where the bee lands on the flower to 0.5 seconds or more.

9.Once you have added the rollover state for each button, go back to the home button rollover state and highlight that rollover. Click the right hand arrow at the top of the rollover palette,. select Copy Rollover State.

10. Then highlight the new rollover state for each of  the other buttons. Click the right hand arrow at the top of the rollover pallette and select paste rollover state.

11. Go back to the rollover state of each of the buttons and then to the animation panel frame 1. Turn the drop shadow back on for the home button, and turn off the drop shadow for the corresponding button you are on.

12.Your image should look like this template! Right click and save to your Bee folder as Bee_Banner_FINAL.psd. Then file save optimize as... Show your Final Bee Banner in HTML format in Mozilla Firefox. For a final screen grade.