Drawing Additional Map Elements

| ACG Home | Instructor Home | Class Home | list of tutorials |

As it stands, our map allows viewers to zoom in until they see a close-up view of our geographical location. We also want to have them zoom back and see where the Earth sits within the Solar System--just in case the Web ever reaches transplanetary dimensions. To complete the picture, we'll explore some of the drawing tools to create some new elements of our own:

There is a sample of the final version you can look at (with the Shockwave for FreeHand plugin installed).

After the picture is complete, we will need to prepare it for use on the Web:


Resize and Reposition the Globe Within the Document

  1. Launch the FreeHand application and re-open the map file you worked on in the previous session.
  2. Using the Document Inspector (Window menu), position the document page near the center of the pasteboard. This will let the viewers roam further away from the Earth before hitting the edge of the Universe (which in this case is the edge of the pasteboard).
  3. Still in the Document Inspector, resize the page. The size and contents of the document page determine what the browser will diaplay when the map is first loaded.
  4. Scale all elements (if necessary), so that the picture of the entire world fits inside the resized page.

Create New Elements Using Drawing Tools

  1. Create a new layer for the outer space background.
  2. Draw a box filling the entire pasteboard. Use a gradient fill to suggest the appearance of a glowing Sun.
  3. Use a tiled fill in a copy of the backdrop box to create a star-studded background.
  4. Draw an oval to indicate Earth's orbit:
  5. Draw the orbits of additional planets:
  6. Draw and shade the additional planets.

Export the Picture as a Shockwave for FreeHand File

  1. Xtras-->Afterburner-->Compress Document. A Save dialog appears.
  2. Enter the filename (all lowercase) according to these rules:
  3. Optionally, click 'Locked' to protect your work from being reused by others (make sure you keep a copy of the original FreeHand file for yourself).
  4. Find your folder on the desktop (the same where your other files are: HTML, GIF or JPEG, DCR). Click 'Save'.

Create a New HTML File for the Web Page Bearing the Map

  1. Find SimpleText on your computer's hard drive and launch it.
  2. In the untitled document which appears, create the basic framework of a generic HTML document. Type the following HTML tags, each on a separate line terminated by a return:
  3. Press return after the <HEAD> line to insert a blank line. On the blank line enter the TITLE tags and the name you want to see in the browser window. Sam Sample typed this:
  4. Add a blank line between the two 'BODY' lines and enter the tag to call up the map picture:
  5. File-->Save. Enter the filename (all lowercase) according to these rules:


Additional Info:


Copyright by Sandro Corsi.Last modified 23 APR 97.