Computer Graphics Survey

Map Completion

Using FreeHand 8.0 on MacOS Computers

| previous handout | ACG Home | Instructor Home | Class Home | list of tutorials | next handout |

Before beginning the project

Read the information that pertains specifically to the way the ACG Lab operates. This section of the directions may not apply if you work on the project elsewhere.


Tutorial Goals

As it stands, our map allows viewers to zoom in until they see a close-up view of our geographical location. We also want them to see where the Earth sits within the Solar System--just in case the Web ever reaches transplanetary dimensions. To this end, we'll make a second picture, exploring some of the drawing tools to create some new elements, each on its own layer:

There is a sample of the second picture you can look at (with the Shockwave for Flash plugin installed). If you do not have the plugin, here is a (non-zoomable) snapshots of what the viewers would see:
Viewing the entire solar system

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

  1. In the Solar System picture, add a URL to an object. A URL (Universal Resource Locator) is the address of an item on the Internet. Clicking on the object with the URL will bring up the map of the Earth by loading its file into the web browser.
  2. Export both the picture of the Solar System, and the picture of the Earth, as SWF (Shockwave for Flash) files.
  3. Create an HTML file for each picture.
  4. Add a link to your homepage to bring up the new web page with the picture of the Solar System.
  5. Make the new and updated files available on the web server.


Create a sunburst in a new picture

  1. Launch the FreeHand application and create a new document (File-->New)
  2. Resize the document page. The size and contents of the page determine what the browser will display when the map is first loaded.
    Document Inspector panel
  3. Double-click the name of the default "Foreground" layer and enter the new name 'Space'. Press Enter.
  4. Make sure that 'Space' is the only unlocked layer, and that it is the active layer (its name is highlighted).
  5. Draw a box filling the entire page. Use a gradient fill to suggest the appearance of a glowing Sun.
  6. As a finishing touch, you can use the polygon tool to star-stud the background.
    the Polygon tool icon
  7. Lock the 'Space' layer by closing the padlock next to its name in the Layers palette.

return to top

Add planets to the new picture

  1. Create a new layer for the planets.
  2. Draw an oval to indicate the innermost planet's orbit.
  3. Draw the orbits of additional planets.
  4. Draw and shade the planets.

return to top

Add a link URL to one of the planets

  1. Display the URL Editor (Window-->Xtras-->URL Editor).
  2. Use the Option menu in the URL Editor to create a new URL entry. Enter the URL (all lowercase) according to these rules:
  3. Click 'OK'. The new URL entry appears in the URL Editor.
  4. In the drawing, select the shaded circle representing the Earth's position in the Solar System. Click on the new URL entry in the URL Editor to assign it to the selected object.

return to top

Convert the picture of the Solar System to SWF

  1. Make sure to save your document (File-->Save). You'll need the FreeHand version of the document if you wanted to work on the image again.
  2. File-->Export. A Save dialog appears.
  3. Use the 'Format' pop-up menu to select 'Flash SWF'
  4. Click the 'Options' button. Adjust the settings as follows, then click 'OK':
    options dialog for SWF files
  5. Since FreeHand has the bizarre habit of changing exported filenames, just enter tmp.swf as the filename (we'll change it later).
  6. Find your folder on the desktop (the same where your other files are: HTML, GIF or JPEG, DCR). Click 'Export'.
  7. In the Finder, click on the name of the file you just exported. When the icon label highlights, enter the correct filename (all lowercase) according to these rules:

return to top

Adjust the picture of the Earth, convert it to SWF

  1. Re-open the file you worked on in the previous session (the one with the map of the Earth).
  2. Make sure the measurement units (in the pop-up at the bottom of the document window) are set to 'Points'. In the Document Inspector, resize the page to the same size as the Solar System image (550 width, 350 height).
  3. Scale all elements (if necessary), so that the picture of the entire world fits inside the resized page.
  4. Repeat the steps listed for the Solar System document to export the Earth image as well as an SWF file. Rename it according to the following rules:

return to top

Create new HTML files for each map image using Aftershock

  1. Find Aftershock on your computer's hard drive and launch it.
  2. A new untitled window appears. File-->Preferences. Uncheck 'View in Browser', then click 'OK'.
  3. Use File-->Add-->Shockwave to import your first SWF file (in Sam Sample's case, that would be sample_s1.swf).
  4. In the right half of the window, change the 'Scheme' pop-up menu to 'Shockwave Only'
    Aftershock settings window
  5. File-->Save. Enter the filename (all lowercase) according to these rules:
  6. Use File-->New to clear the window. Repeat the previous steps to import your second SWF file (in Sam Sample's case, that would be sample_s2.swf), and to save its Shockwave-only HTML file with the following name:

return to top

Add a link to the maps in the HTML file for your homepage

  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 SWF files, the new HTML files, 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.

return to top


Information specific to the ACG Lab

return

| previous handout | return to top | next handout |


This document originally at <http://acg2.fullcoll.edu/FACULTY/CORSI/LEARN/OVERVIEW/OV120MAC/INDEX.HTM>
Copyright 1997-2000 by Sandro Corsi. Last modified 2000-04-05. SaneDraw home