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, each on its own layer:

There is a sample of the final version you can look at (with the Shockwave for FreeHand plugin installed). If you do not have the plugin, here are some (non-zoomable) snapshots of what the viewers would see:

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 display when the map is first loaded.
    Document Inspector panel
  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 another 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:

Add a Link in the HTML File for Your Homepage to Point to the New Web Page

  1. Drag the icon of your homepage HTML file to the icon for SimpleText.
  2. After the HTML file opens in a document window, click to place the insertion point where you want your viewers to find the link to the map.
  3. Enter the tags and the text for the link. Sam Sample typed this:
  4. Use File-->Save to update the HTML file for your homepage.
  5. Place the new FHC file, the new HTML file, and the old HTML file with the new edit, in the drop folder on the file server--so they can be posted to the web server.


Additional Info:


Copyright by Sandro Corsi.Last modified 20 APR 98.