(Click on a link to get to a particular section of the document. Click Back to return to this outline.)
This hands-on workshop provides an overview of multimedia techniques, the web, and applications in GIS and mapping. The focus will be on the concepts and principles of design for multimedia applications, particularly the incorporation of interaction and animation for the display of maps and their distribution through the World Wide Web. Topics include file formats for graphic, animation, and sound; authoring programs; animation concepts; digital video; virtual reality; and HTML authoring. Software to be demonstrated and used include the enhancing of images using Photoshop, recording and editing sound, and the capturing and editing of video. Software for multimedia authoring will include Netscape Navigator Gold, Premiere, and Adobe PageMill. Design criteria, cross platform compatibility, and the advantages and disadvantages of each application will be covered. New developments in multimedia presentation though the World Wide Web, including QuickTime VR, Shockwave, and VRML, will also be reviewed. The session is intended for anyone interested in gaining hands-on experience in multimedia applications related to GIS.
- easy. You have to work with the computer and software. It won't always work right and it will make you feel stupid.
- an opportunity to listen and relax, and occasionally write some margin notes into your workbook.
- about creating an on-line GIS (although I'll talk about this).
- about Java, although one exercise uses JavaScript.
- here today, gone tomorrow. The materials will remain available at http://maps.unomaha.edu/Workshops/GISWEB.html
The workshop will be divided into four sessions (two in the morning and two in the afternoon), each approximately 1 1/2 hours in length. There will be a 1/2 hour break between morning and afternoon sessions and a 1 1/2 lunch break. The workshop will begin at 8:30 AM and end at 5 PM (8:30 - 10:00; 10:30 - 12:00; 1:30 - 3:00; 3:30 - 5:00).
The Web has been described in many ways. In the simplest sense, it may be thought of as a system for transferring files between computers. These files, manipulated as numbers and ultimately stored and transferred in binary 0s and 1s, may consist of text, pictures, graphics, sound, animations, movies, or even computer programs. In terms of content, the Web is a collection of shared resources. From a human standpoint, the Web is a large and ever-expanding community of people who contribute to its content and use its resources.
Web Glossary
Most of the necessary software for producing multimedia/GIS content is on the Web. The trick is knowing where the software is located, how to download, and install. Follow the instructions below to set-up your "multimedia/GIS work environment." In each case, choose the appropriate version of the software: Macintosh, or Windows.
Some of the programs require you to fill-out a form before you can download. Provide enough information (accurate or not accurate) to make the form complete. At most, you will receive e-mail, sales-oriented messages from the companies. If you are not interested, you can have yourself removed from their e-mail list.
Most of the programs will need to be installed. A file called Setup or Install will usually initiate the process. Try to avoid any e-mail of registration forms back to the company during the install process. This is not necessary to complete the installation.
Follow the step-by step instructions below. If one a site seems slow, move on to the next site. Go back to the site later when it might not be so busy.
This folder will contain all of the workshop programs and files. We will delete this folder at the end of the day.
The browser program displays web documents.
Plug-ins add functionality to the browser. The following plug-ins are required for the workshop. These plug-ins are small and should download and install quickly.
Adobe Acrobat: This plug-in displays Adobe Acrobat files within the browser window. Acrobat files use a Postscript-like file structure called Page Description Format or PDF. The advantage of this file structure is that it can display maps at a higher resolution.
Apple QuickTime: A QuickTime file consist of a series of frames that can be displayed in quick succession
Macromedia:
VRML: No standard plug-in has emerged.
The Netscape Communicator browser includes an HTML authoring component. A number of other HTML authoring programs are available that you might want to try. Of course, most text processors, like Word, now include an HTML output option.
Standard HTML Editors:
High-End Web Page Design Programs
These programs map out "hot spots" on GIF and JPEG images. Most web page editors now support this feature.
- Mapedit (available for 18 different operating systems; choose the appropriate one)
These programs edit graphic files in a raster format:
- Adobe Photoshop - The standard image editing program.
- Paint Shop Pro - An easy to use graphics editor that has nearly as many features as Adobe Photoshop.
Post-processing programs:
These programs allow you to assemble a series of GIF images to create an animated GIF.
Other GIF animation software:
- GIF Animator for Windows (from Technical University Vienna, Austria; download may be slow)
- GIFmation for Macintosh
These programs allow you to assemble as series of pictures or video clips into a movie.
Producing QuickTime Panoramas
- Adobe Illustrator - This is an object-oriented (vector-based) graphics program. You need to fill out the registration form to download. The size of the download is 12 MB. Downloading and installing this program takes about 10 minutes.
- Macromedia Freehand - The major competitor.
- Multimedia Director - A full-fledged multimedia authoring program.
- Macromedia Flash - For animated, vector-based web applications.
- Adobe LiveMotion - For animations through the web.
Multimedia combines multiple forms of media in the communication of information, such as audio, video, graphics, animation and computer data. Multimedia is the joining of any two or more of these. Previously, video had been considered separate from audio and computers separate from video and audio. Multimedia computers playback high quality sound and video, as well as text and graphics.
Macromedia Director
Director is the leading program for multimedia authoring (the ESRI of multimedia). Used extensively for the creation of CD-ROM content, Macromedia's Shockwave plug-in is bringing Director files to the web. The program is available for both Mac and PC although the Mac version is more stable.
Macromedia - Director Multimedia Studio Key Features
Director Web
Shockwave Files
Map Examples:
Maps on the web can be categorized as static (non-changing), interactive, and animated. Because of lower resolution in screen display as compared to printed materials, most of the effort has been concentrated on interactive and, to some extent, animated maps.
Finding Maps
Maps and References - A list of maps on the web. These lists are hard to maintain and this one is already out-of-date.
Map Database - A site in the Netherlands that maintain a database of maps on the web. User interacts with a FileMaker database.
On-Line Map Library - Perry-Castaneda Collection at the University of Texas.
Static Maps
Scanned Map - GIF Image 1340x847 pixels (raster file) - Nice looking map in GIF format. Most scanned maps don't look this nice.
Acrobat Map (Postscript vector file) - These store maps as vectors. Acrobat Reader lets you zoom-in.
If Netscape tells you that the plug-in was not found or immediately starts to save the file to your hard-drive, the Adobe Acrobat plug-in was not installed properly.
Interactive Maps
Xerox Parc - This interactive map server started in 1993.
Earth View Home Page
Street-Level Mapping
MapBlast
MapQuest
MapsOnUs
The Physical Earth
Earthquakes
Demographic Maps
With a Database
Map Animations:
- Weather Animation | (description)
- Fly-Through Animation (7.6 MB, QuickTime)
- San Francisco Bay area Population from 1800-1990 (446 KB, MPEG, description)
- Nebraska by county between 1954-1987 (264 KB, QuickTime, description)
- Generalization Cartographic Animation (578 KB, QuickTime, description)
- Omaha Animation of Age Groups (664 KB, QuickTime, description)
- Classification Animation (50 KB, QuickTime, description)
- Classification Animation with Sound (1.4 MB, QuickTime, description)
Virtual Reality with Quicktime VR:
HTML (hypertext mark-up language) controls the formatting of web pages. It is a text-based formatting language that is very similar to early word-processors like WordStar. Codes are inserted in the document that control the formatting of the text and the hyperlinks. The following guides describe the language:
A Beginner's Guide to HTML
Most web publishers avoid HTML Editors (WYSIWYG programs to help you create HTML documents) and "hard-code" their documents with a text editor. It is useful to become familiar with at least some of the HTML codes, as will be demonstrated with this exercise:
Step 1: Use a text editor to type in the following. If using a word processor, remember to save as "Text Only." Use "EX1.html" as the file name.
<HTML>
<HEAD>
<TITLE>Exercise #1: HTML Text File</TITLE>
</HEAD>
<BODY>
<H1>What is Multimedia?</H1>
Multimedia combines multiple forms of media in the communication of information, such as audio, video, graphics, animation and computer data.
<p>The Internet has been described in many ways. In the simplest sense, the Internet may be thought of as a system for transferring files between computers.
</BODY>
</HTML>Notice how the codes are all surround by the < and > characters. Also notice the HEAD section and the BODY section of the document.
Step 2: In Netscape, use the Open File command in File menu to open the EX1.html file. Notice how the text in the TITLE line is displayed in the top of the window. Also notice that the <H1> command makes the text larger.
Step 1: Downloading a GIF file:
Save the following file in the same directory as your "EX1.html" file.
U.S. Percent of Persons in Poverty by State, 1994 (Save the file as "pctpov94.gif".)
Any graphic image that is included on a web page is a separate file and can be downloaded to your computer. In this case, we will download a map to incorporate into our simple web page.
To save the graphic to your disk, hold the mouse button down on the Mac or click on the right button on the PC and wait for the save file dialog.
Step 2: Add the text displayed here in bold to your "EX1.html" file. Save as EX2.html.
<HTML>
<HEAD>
<TITLE>Exercise #1: HTML Text File</TITLE>
</HEAD>
<BODY>
<H2>What is Multimedia?</H2>
Multimedia combines multiple forms of media in the communication of information, such as audio, video, graphics, animation and computer data.
<p><H2>What is Internet?</H2>
The Internet has been described in many ways. In the simplest sense, the Internet may be thought of as a system for transferring files between computers.
<p>
Graphical illustrations form an important part of the web, as with this thematic map of the U.S.
<br>
<IMG SRC="pctpov94.gif">
</BODY>
</HTML>
Extra Time:
15-Minute Class in How to Write Web Pages with HTML - More raw coding.
Description of Netscape Composer - Official but dry description of Composer. They want you to buy their book.
A Page on Composer from the University of Colorado - A more graphic introduction to Composer.
Netscape Composer Lab - A short introduction.
University of North Carolina Chapel Hill Medical Center - A good introduction with links.
The Basics of Building a Web Page - From Auburn University College of Veterinary Medicine.
GIS programs are not designed to create well-designed maps that can be directly placed on the web. A variety of object-oriented graphics programs are available to make the output from GIS programs more presentable. These programs, such as MacroMedia FreeHand, CorelDraw, and Illustrator, allow for the manipulation of individual graphic objects. Although GIS programs like Arc/Info and ArcView output to an Illustrator format that can be read by all three of these programs, these Illustrator files are not always a good representation of the map on the screen. A better way to convert between the two programs is to 'print' the map from a GIS program to a PostScript file. This file can then be imported into Illustrator and modified.
Adobe Illustrator is a object-oriented (vector-based) graphics program. Like FreeHand (MacroMedia) and CorelDraw (Corel), Illustrator is a graphics editing that is particularly useful in making the output from GIS programs presentable on the web. In this exercise, we will edit a map from ArcView with Illustrator.
The best way to output a map from a GIS program is to save it as a Postscript file (an option in the Print dialog). This file can then be opened and edited with an object-oriented graphics program.
To begin this exercise, first download a Postscript file created with ArcView. Save the SOURCE version of this file (right button on PC mouse; hold button down on Mac mouse). Name the file ArcViewMap.ps.
Opening the Map in Illustrator:
Step 1: Open Adobe Illustrator
Step 2: Open the file ArcViewMap.psUnGrouping Map Elements:
Step 1: Click on the Map (graphic handles should appear)
Step 2: Select UnGroup from the Arrange MenuDeleting Line Segments:
Step 1: Select a line segment along the outline of the map.
Step 2: Select Same 'Fill Color' from 'Select' in the 'Filters' menu.
Step 3: Select Delete from the Edit menu.Rotate the Map:
Step 1: Select 'Select All" from the Edit menu.
Step 2: Select the Rotate tool from the Tools palette.
Step3: Press the option key and click on a graphic handle.
Step 4: Enter 90 for the angle of rotation in the dialog.Outline the Polygons:
Step 1: Select any single polygon in the map.
Step 2: Select Same 'Fill Color' from 'Select' in the 'Filters' menu.
Step 3: Click on the Stroke box in the Paint Style palette.
Step 4: Click on a black shading in the Paint Style palette.
Step 5: Repeat the procedure for each of the four colors in the map.Add Text, Split legend, as shown below:
Map created with ESRI's ArcView. Edited with Adobe Illustrator. Converted to a GIF file in Photoshop.
Illustrator / FreeHand tools for Map Publishing:
Page description format (PDF) is a postscipt-like file format developed by Adobe. The advantage of this format for maps is that it stores vector information, making the maps more zoomable.
Background information:
Example Maps in PDF format:
Adobe Acrobat can be used to add clickable areas to Acrobat files.
Exercise:
Step 1: Create a map in PDF format.
Open a map in Illustrator. Produce a PDF file of the map by 'printing' the map using the Acrobat software.
Step 2: Outline the area Acrobat Exchange
Step 3: Attach an URL to the outlined area.
A number of programs can convert graphic files to GIF files.
Convert Map to GIF with PhotoShop:
Step 1: Open Illustrator file in Photoshop. (72 dpi, mode: RGB, size for screen display) If you were not able to save your file from Illustrator, download the finished copy.
Step 2: Select Same 'Fill Color' from 'Select' in the 'Filters' menu.
Step 3: Crop map with box tool and Crop menu item in Edit.
Step 4: Change to Indexed Color in Mode (this changes the graphic to 8-bits per pixel).
Step 5: Save as a CompuServe GIF file called Mayoral.GIF.If PhotoShop is not available, try the Paint Shop Pro program that you downloaded from the web.
Photoshop can be used to create a variety of graphic effects. In this short tutorial, we will cover some of the procedures for producing these effects.
Tutorial
Client-side Image Maps This webpage explains how to make a client-side image map as well as a little bit about the difference between client side and server side image mapping.
Exercise:
Find pixels coordinates of a rectangle and polygon for the illustration below:
Step 1: Download this graphic.
Question: Why are the colors dithered (not solid) in this illustration?
Step 2: Find the coordinates that outline the rectangle and the polygon.
Instructions for finding the coordinates in Photoshop:
Step A: In File / Preferences / Units, change to 'Pixel'
Step B: Open the Window / Palettes / Info Window.
Step C: Write down the coordinates for the outline of a rectangle and a polygon (vertices only).Step 3: Type the following into a text editor. Change the coordinates in bold in the AREA statements to match the coordinates that you determined in PhotoShop or Mapedit. Name the file EX2.html and place in the same directory as the GIF file that you downloaded.
<HTML>
<HEAD>
<TITLE>Exercise #1: Client-side Image Map</TITLE>
</HEAD>
<BODY><A NAME="Error">
<P>
This is an example of an client-side image map.
<IMG SRC="Mayoral.GIF" USEMAP="#areadef">
</BODY>
<MAP NAME="areadef"><AREA SHAPE="rect" COORDS="152,308,168,323" HREF="ClickedRect.html">
<AREA SHAPE="poly" COORDS="282,329,275,316,273,300,270,291,290,289,290,320,281,330" HREF="ClickedPoly.html">
<AREA SHAPE="default" HREF="Error.html">
</MAP>
</HTML>
Step 4: Create the ClickedRect.html, ClickedPoly.hmtl file, and Error.html files as follows:
ClickedRect.html
<HTML>
<HEAD>
<TITLE>Exercise #1: This is the ClickedRect file</TITLE>
</HEAD>
<BODY><H1> You clicked on the rectangle! </H1>
</BODY>
</HTML>________________________________________________________
ClickedPoly.html
<HTML>
<HEAD>
<TITLE>Exercise #1: This is the ClickedPoly file</TITLE>
</HEAD>
<BODY><H1> You clicked on the polygon! </H1>
</BODY>
</HTML>________________________________________________________
Error.html
<HTML>
<HEAD>
<TITLE>Exercise #1: This is the Error file</TITLE>
</HEAD>
<BODY><H1> ERROR: You did not click on a valid area! </H1>
</BODY>
</HTML>
Step 5: In Netscape, open the EX2.html file using File / Open File. Pass the mouse over the rectangle and polygon and notice how the URL changes to the name of the files ClickedME.html and ClickedME2.html respectively. Click on the polygon to see if the appropriate file is displayed.
What is JavaScript?
JavaScript is a scripting language, similar to a programming language. The primary difference is that JavaScript is interpreted by the web browser. JavaScript can be used to develop interactive web pages that check user input into forms, change the look of web pages, or display informative messages in the status bar of a web browser. Here are three links about JavaScript:
- Coding
- A site that contains an archive of different scripts as well as various tips that are updated weekly. It also provides access to an online book about JavaScript and coding as well as information on adding Dynamic HTML to websites.
- Information
- Contains links to other Java sites, a tutorial, and free Voodoo software
A JavaScript example:
function hiLiter(imgBase,imgSwap)
// TASK: SWAP IMAGES
// imgBase - name of the document image to be replaced
// imgSwap - name of the image object to be swapped in
{
if (browserVersion == 1)
{
document.images[imgBase].src = eval(imgSwap + ".src")
}
}
// END -->
</SCRIPT>In the following exercise, we will create a simple JavaScript that will alternate between these four frames:
<HTML><HEAD><TITLE>Sample Javascript</TITLE><SCRIPT LANGUAGE="JavaScript"><!--// TEST: BROWSER VERSIONagent = navigator.userAgentbrowserVersion = 1
if (agent.indexOf("a/3",6) == -1)
{browserVersion = 1}
if (browserVersion == 1)// TASK: PRELOAD IMAGES{picker_n = new Image(200,200);picker_n.src = "picker.gif";red_n = new Image(200,200);red_n.src = "red.gif";blue_n = new Image(200,200);blue_n.src = "blue.gif";yellow_n = new Image(200,200);yellow_n.src = "yellow.gif";}function hiLiter(imgBase,imgSwap)// TASK: SWAP IMAGES// imgBase - name of the document image to be replaced// imgSwap - name of the image object to be swapped in{if (browserVersion == 1){document.images[imgBase].src = eval(imgSwap + ".src")}}// END --></SCRIPT></HEAD><BODY BGCOLOR="white"><A NAME="top"><CENTER><IMG SRC="picker.gif" NAME="map" WIDTH=200 HEIGHT=200 ALT="ThePicker" USEMAP="#mousemap" BORDER=0></CENTER></BODY><MAP NAME="mousemap"><AREA SHAPE="rect" COORDS="50,25,96,66" HREF="#top"onMouseOver="hiLiter('map','red_n'); window.status='Red'; returntrue"><AREA SHAPE="rect" COORDS="50,73,96,117" HREF="#top"onMouseOver="hiLiter('map','blue_n'); window.status='Blue'; returntrue"><AREA SHAPE="rect" COORDS="51,123,96,166" HREF="#top"onMouseOver="hiLiter('map','yellow_n'); window.status='Yellow';return true"><AREA SHAPE="rect" COORDS="1,175,200,200" HREF="#top"onMouseOver="hiLiter('map','picker_n'); window.status='Picker';return true"></MAP></HTML>
Introduction to Animation
- Tools used in Computer Animation
- Linking Reality and Abstraction through Computer Animation
- What is Non-Linear Editing
Apple QuickTime
Apple QuickTime VR
Outside
Inside
Looking-in
Example Animations:
Animation Programs
Adobe Premiere
Apple iMovie
Gif Animation Programs
Instructions for Premiere:
Step 1: Get the images to use for the animation here. The file contains 24 JPEG files. Download as many images for the time available. You can also go directly to the EarthView site and make your own maps for any time of the year.
Step 2: Open Premiere
Step 3: Use the File / Import command to import all of the frames for your animation.
Step 4: Drag each frame in order to the Construction Window. Alternate between the A and B video channels (i.e., put the first frame in the A channel, put the second frame in the B channel, the third frame in the C channel). Show each frame for one second (drag on the frame to adjust time).
Step 5: Extend the yellow bar at the top of the Construction Window to match the length of the movie.
Step 6: Select Movie / Make Movie and save the file as a QuickTime Movie (Output Options)
Step 7: Open the movie with Premiere and play.
Extra Time?: Overlap the frames in the A and B tracks by 1/2 second. Add a Cross-Dissolve transition effect for this period.
GIF Animation Software
GIF Animator for Windows
Gifmation
GIF Animation Exercise
Depending on the animation package that you use, you may have to convert the JPEG images from above into a GIF format. Use Photoshop or Photo Paint Pro.
Get the images to use for the animation here. The file contains 24 JPEG files. Download as many images for the time available. You can also go directly to the EarthView site and make your own maps for any time of the year. These JPEG files may need to be converted to GIF files depending on the GIF animation software that you are using.
Instructions for GIF Animator for Windows:
Step 1: Put the frames into the GIFAnimator folder. (Map1 | Map2 | Map3 | Map4 | Map5 | Map6)
Step 2: Open the GIF Animator program.
Step 3: Select all of the frames for the animation.
Step 4: Save the Animated GIF file.
Step 5: Display with Netscape
Extra Time?: Change one of the parameters in the GIF animation process.
What is VRML?
VRML (Virtual Reality Modeling Language) is an open, extensible, industry-standard scene description language for 3-D scenes, or worlds, on the Internet. With VRML and Netscape's Live3D, you can author and view distributed, interactive 3-D worlds that are rich with text, images, animation, sound, music, and even video. VRML 1.0 supports worlds with relatively simple animations while VRML 2.0 (still in development) supports complex 3-D animations, simulations, and behaviors by allowing Java and JavaScript programmers to write scripts that act upon VRML objects.
James Swanson VRMLs:
Other Geographic VRMLs:
ESRI
Internet Map Server | ArcView IMS Article
AutoCADAutoCAD Map
AutoDesk MapGuide
AutdoDesk MapGuide Description
MapInfo
Thank you attending this workshop. The page with all of the exercises and links will remain available at: http://maps.unomaha.edu/Workshops/GISWEB.html. You are welcome to visit this site at any time in the future. Changes and additions are always being made to the workshop.
Please fill-out one of the workshop evaluation forms.
