Fireworks Project #4
Animating, Slicing, "Hot Spotting", and "Buttonizing"
Using the image of the Signing of the Declaration of Independence (appears at the very bottom of this page) create a 400 x 275 px image that has the text "Declaration of Independence" above the graphic and your initials are to be shown twice below the image. Save this first Fireworks file as fw4a.png in a folder called PreSlices. Compress your Fireworks files multiple times with the settings shown:
- GIF, Web Snap Adaptive, 8 colors (fw4asnap.gif in the PreSlices folder)
- GIF, Web 216, 8 colors ( fw4a216.gif in the PreSlices folder)
- JPEG (fw4aJPEG.jpg in the PreSlices folder)
GIF, Web Snap Adaptive, 8 colors: 9250 bytes
GIF, Web 216, 8 colors: 7976 bytes
JPEG: 14506 bytes
Save your fw4a.png file as fw4b.png in a folder called Slices. Then slice the image as shown below. You will be creating 5 slices. Set the compression for the "inner"slice to JPEG quality. Set the compression for all other slices to 8-color Web 216. You need to export the file as an Image and HTML. Be sure to resave the file fw4a.png so I can check your work.
Sliced Image, JPEG "inner" + 8-color Web 216 "outer" = 10,476 bytes
Re-open your fw4a.png file and save it as fw4c.png in a folder named HotSpots. Then create hotspots on the image as shown below. You will be creating 5 hotspots. You should export the image and its HTML. Be sure to resave your native file when finished so I can check your work. Use the following URLs:
- "Declaration of Independence" ==> http://www.ushistory.org/declaration/
- Ben (standing) ===========> http://sln.fi.edu/franklin/rotten.html
- John Hancock (sitting) ====> http://webpages.homestead.com/revwar/files/HANCOC.HTM
- Your left initials ===> https://www.angelfire.com/pa2/patterson
- Your right initials ===> http://www.peirce.edu
- Always provide Alt text and specify the linked page to open in its own window
Create animations and a 4-state button similar to the one shown below. Use the Statue of Liberty GIF below to create an animated version where she is waving the torch (10 frames). In the other animations, your initials should zoom in and out and change color (41 frames were used) and Peirce College and your name should move back and forth (80 frames used). The button should take you to www.initials.com
Copyright © 2001, RGPatterson, all rights reserved; last revised: 10/17/01